A Practical Guide to SVGs in Umbraco

If you've ever tried to use SVGs properly in Umbraco, you'll know it's not quite plug-and-play. Icons, logos, illustrations - SVGs are everywhere on the modern web. Out of the box Umbraco will let you upload SVGs. It even has a dedicated Vector Graphics (SVG) media type. But there are two things I wanted to improve. The Two Problems Inlining for CSS control. If you serve an SVG as an <img> tag, it works - but you lose most of what makes SVGs useful. You can't style it with CSS, you can't use currentColor to inherit text colour, you can't target individual paths for hover states or animations. To get that level of control you need the SVG markup inlined directly into your HTML. But inlining creates its own issues. An <img> tag sandboxes its content - scripts inside the SVG won't execute. Inline that same SVG into the page and any <script> tags or javascript: handlers will run. An editor could unknowingly upload an SVG containing an XSS attack, and you'd be serving it straight into the D