SVG Preview & Formatter
Paste SVG source (or open a file) to preview it in a safe, script-free way. Pretty-print with 2-space indentation, minify to one line, inspect viewBox and size info, and export a data URI snippet for CSS embedding. Everything stays in your browser.
Drag & drop an SVG file, or click to choose
You can also paste the source below. Everything is processed on your device.
How to use
Paste SVG source (or open a file) and the preview plus code stats appear instantly. The preview is rendered as a data URI inside an img element, so any script inside the SVG is never executed — a safe way to inspect files you downloaded from anywhere. The checkerboard background makes transparent areas obvious at a glance.
- Enter SVG source — paste it into the text area or drag & drop a file. Try the example chips first if you like.
- Check the preview and stats: character count, width/height attributes, viewBox and element count.
- Use Pretty-print (indent 2) to make the code readable, or Minify to one line to slim it down. Optionally strip the XML declaration and comments while minifying.
- To embed the SVG in CSS, copy the data URI snippet and paste it straight into your stylesheet.
Examples
- Slim down an icon → minify a formatted SVG and strip the declaration and comments; the before/after character counts are shown.
- Read a minified SVG → Pretty-print puts each tag on its own line with indentation so the structure becomes readable.
- Embed in CSS → pick the Circle example and a snippet like background-image: url("data:image/svg+xml,%3Csvg...") is generated, ready to copy.
- Safety-check a received SVG → scripts never run in this preview, so you can inspect files from unknown sources.
Power-user notes
- The formatter is a lightweight one: +1 indent on opening tags, -1 on closing tags; self-closing tags, declarations and comments stay put. Attributes and text content are never changed.
- Minifying removes only inter-tag whitespace and line breaks (attribute values and text nodes are preserved). Pretty-print then minify round-trips back to the original single line.
- The data URI uses encodeURIComponent plus extra encoding for single quotes and parentheses, so it works in url() with or without quotes.
- SVGs that reference external images or web fonts may not render correctly because this page makes no network requests.
FAQ
Is my data sent to a server?
No. Preview, formatting and minifying all run entirely in your browser; the SVG is never transmitted or stored externally.
Can scripts inside the SVG run in the preview?
No. The preview renders the SVG as a data URI in an img element, and by browser design scripts and external resource loads inside an SVG displayed this way are never executed. It is safe to check SVGs from unknown sources.
What is the difference between formatting and minifying?
Formatting puts each tag on its own line, indented two spaces per nesting level. Minifying removes only the whitespace and line breaks between tags to produce a single line. Neither changes attributes or text content. When minifying you can optionally strip the XML declaration and comments.
What is the data URI output for?
It is a string for embedding the SVG directly in CSS, such as background-image, without a separate image file. Special characters are percent-encoded, so you can paste the generated snippet straight into a stylesheet.
Are there SVGs that will not display?
Sources without an svg tag show an error. SVGs that reference external images or web fonts may also render incorrectly because this page never makes network requests.