This takes an SVG file, or pasted SVG markup, and prepares it as inline HTML, with a live preview so you can confirm it renders the way you expect. Inlining SVG directly into HTML, rather than linking it as an external file, lets you style and animate individual parts of it with CSS and JavaScript.
How to use it
- Upload an .svg file, or paste SVG markup directly into the box.
- Click convert.
- Check the preview to confirm it renders correctly.
- Look over the HTML output underneath the preview.
- Copy the markup and paste it into your HTML wherever you want it.
When it helps
- Making parts of a logo or icon changeable with CSS, like changing the fill color on hover.
- Animating specific paths in an SVG with CSS transitions or JavaScript, which isn't possible with an externally linked image.
- Skipping an extra HTTP request for a small icon by embedding it in the page.
- Quickly checking whether an SVG exported from a design tool actually renders correctly.
- Cleaning up and inspecting SVG markup that came from an unfamiliar source.
Good to know
- Inline SVGs add directly to your HTML's size, so this works best for small icons rather than big, complex illustrations.
- Check for hardcoded width and height attributes in the SVG that might fight with your own CSS sizing.
- Strip out editor specific metadata from an exported SVG for a cleaner result.
- Remove unnecessary title tags or editor specific metadata from an exported SVG before inlining it, since these add size without affecting how the graphic actually renders.
- If an icon set you're using ships as separate SVG files, convert a few key ones you'll style dynamically, and leave the rest as regular image files to keep your HTML size reasonable.
Questions
Why inline an SVG instead of linking it as an image?
Inlining lets you style individual shapes with CSS and animate them with JavaScript, neither of which works when the SVG is loaded through an img tag.
Does inlining change how the SVG looks?
No, it should render the same either way. This tool doesn't alter the SVG's content, just its format.
Can I convert several SVG files at once?
This handles one at a time. For a batch, repeat the process for each file.
Can I style an inlined SVG's colors with CSS afterward?
Yes, that's one of the main benefits of inlining. Once it's part of your HTML, you can target its paths and shapes directly with CSS selectors.
Is there a downside to inlining a large SVG?
Yes, a large inlined SVG adds directly to your page's HTML size on every load, whereas an external SVG file can be cached separately by the browser.
Will inlining an SVG affect its file's original dimensions or viewBox?
No, the viewBox and any width or height attributes carry over exactly as they were in the source file, unless you edit them afterward.