Using SVG's in Twig Templates

!Title!

There are a number of ways to implement SVG's, just checkout this article on CSS Tricks for an in-depth look into SVG's. The easiest way that I have found to implement SVG's is to use the SVG code directly in my HTML templates. This keeps strict Content Security Policy's happy, preserves the ability to cache the assets, and more importantly - allows you to manipulate the SVG's with CSS while keeping your code DRY. Which leads me to my next point, the criteria I have for using SVG's.

• Ability to manipulate the SVG with CSS
• Maintain Strict Content Security Policy's
• Easy Maintenance
• Provide a good experience to my viewers

As mentioned in the linked CSS Tricks article, when implementing SVG's with an <image> tag or background-image: CSS property, you loose the ability to manipulate the SVG with CSS. So both of those methods are out the window for me. We could implement the SVG as an HTML <object> - but that would require us to use inline CSS to manipulate the image. That for me is a no-go because I like to keep my styling assets separate for my template assets. Lastly you can use data: URI's to embed your SVG's via <image> , background-image , or <object> tags. But that also requires you to implement a CSP Policy that allows data: as scheme source which is a very bad idea. It would create a potential attack vector for bad actors with malicious intent. Also using data URI's to embed your CSS adds more complexity to maintenance because now you have to base64 encode your SVG's.

So that brings me to inline SVG's. There are a couple of downsides to this approach but we'll talk more about that later. I've created a public repository of the source for this demo on GitHub rushlow-development/svg-in-templates . Feel free to check it out. Word to the wise, the demo app is just that - a demo. I would not attempt to use that code base in production without further modifications...