SVG Inliner
How it works
Paste SVG markup that styles its shapes with CSS classes or a <style> block, and the tool rewrites every one of those rules as an inline style attribute directly on the elements it targets. That matters because when you drop several SVGs into the same HTML page, their <style> blocks share one global scope: a class like .cls-1 in one icon silently restyles .cls-1 in another, so colours and strokes bleed between graphics. Inlining the styles makes each SVG self-contained, so it looks the same no matter what else is on the page, and it also survives the sanitizers and email clients that strip <style> blocks. Paste your SVG, copy the inlined result, and use it anywhere. The conversion runs entirely in your browser, so your artwork is never uploaded.
Frequently Asked Questions
Why would I inline SVG styles?
- To stop two SVGs on the same page from fighting over the same class names. When you embed several SVGs in one document their CSS classes can clash and override each other, which happens often when icons come from different design sources or generators. Inlining the styles as presentation attributes isolates each SVG from the page's stylesheet.
Does it handle all CSS properties?
- It handles the common SVG ones: fill, stroke, stroke-width, stroke-linecap, opacity and transform, converted from class selectors and <style> blocks into inline attributes. Properties that are not SVG presentation attributes (CSS variables, animations) are left as they are, because inlining them would change rendering.
Will the inlined SVG still be editable in Illustrator or Figma?
- Yes. Presentation attributes are the native SVG way of styling, and every vector editor reads them. If anything, an inlined SVG is more portable than one with a <style> block, because no CSS context is required to render it correctly.