SVG is code you can read
Scalable Vector Graphics files are XML documents that describe shapes: <path>, <rect>, <circle>, groups with <g>, reusable pieces in <defs>, gradients and text. Design tools and icon libraries usually export them as one long line, which is fine for a browser but useless when you need to change a colour, find out why an icon is clipped or inline it into a React component. Indented, the structure is obvious: which group carries the fill, which path uses the gradient and where the viewBox sets the coordinate system.
Formatting and previewing
Paste the markup or drop an .svg file into the input. The built-in XML printer indents one element per line in element-only content and wraps attributes onto separate lines when an opening tag would exceed the line width. Set the toolbar Indent to 2 or 4 spaces or tabs, and lower the line width if you prefer every long tag broken up. Content where whitespace matters stays inline: the text and <tspan> children of a <text> element keep their exact spacing, and <style> blocks and CDATA sections are reproduced as written. Comments and the XML declaration are kept, because formatting should never drop information.
The Preview tab draws the result as an image while you type, which is the quickest way to confirm an edit did what you meant. Because it is rendered as an image, any script in the file does not run, and the SVG never leaves your browser. Ctrl/Cmd+Enter formats on demand and Ctrl/Cmd+Shift+C copies the output.
To shrink a file instead of expanding it, switch the toolbar to Minify (or press Ctrl/Cmd+Shift+M). That path runs SVGO rather than the printer; what it removes and why is covered on the SVG minifier page.
Validation before anything else
Every input is parsed as XML first, so the errors read the same as on the XML formatter: a tag closed in the wrong order, an unescaped & in text, an attribute value without quotes. On top of XML well-formedness, a few SVG-specific checks run:
- The root element must be
<svg>. An HTML page with an inline SVG inside fails with a clear message, so cut the<svg>element out first. - A missing
xmlns="http://www.w3.org/2000/svg"is a warning. Inline SVG in HTML works without it, but a standalone.svgfile or an<img src>will not display, and the preview stays blank for the same reason. - A namespace URI with a typo, such as
httpsinstead ofhttp, is reported with the expected value.
Spotting unsafe SVG
SVG can carry script, which is why uploading user-supplied SVG to a site is a known cross-site scripting risk. The formatter warns about <script> elements, event-handler attributes such as onload or onclick, javascript: URLs in href (including ones disguised with entities or whitespace) and <foreignObject>, which can embed arbitrary HTML. None of these block formatting; they are warnings so you can decide whether the file comes from a source you trust. Files referenced with <img src> never run scripts, but SVG inlined into a page or opened directly in a tab does.
Examples
Single-line icon from an icon set
Long opening tags are wrapped one attribute per line, which makes the stroke settings on the group easy to find and change.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></g></svg><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24">
<g
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<circle cx="9" cy="21" r="1"/>
<circle cx="20" cy="21" r="1"/>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
</g>
</svg>
Chart label with styled text
With 4-space indentation the elements are spread out, while the text and its tspan stay on one line so the rendered spacing does not change.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60"><style>.label{font:600 14px system-ui;fill:#111}</style><rect width="200" height="60" rx="8" fill="#f1f5f9"/><text x="16" y="36" class="label">Orders shipped: <tspan font-weight="700">1,284</tspan></text></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
<style>.label{font:600 14px system-ui;fill:#111}</style>
<rect width="200" height="60" rx="8" fill="#f1f5f9"/>
<text x="16" y="36" class="label">Orders shipped: <tspan font-weight="700">1,284</tspan></text>
</svg>
Exported logo with a gradient
The XML declaration and the generator comment are kept when beautifying; only minify removes them.
<?xml version="1.0" encoding="UTF-8"?><!-- Generator: Design Tool 12.0 --><svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#2563eb"/><stop offset="100%" stop-color="#7c3aed"/></linearGradient></defs><g fill="none"><rect x="10" y="10" width="100" height="100" rx="20" fill="url(#g)"/><path d="M 40 60 L 55 75 L 82 45" stroke="#ffffff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/></g></svg><?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Design Tool 12.0 -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="120"
height="120"
viewBox="0 0 120 120">
<defs>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#2563eb"/>
<stop offset="100%" stop-color="#7c3aed"/>
</linearGradient>
</defs>
<g fill="none">
<rect x="10" y="10" width="100" height="100" rx="20" fill="url(#g)"/>
<path
d="M 40 60 L 55 75 L 82 45"
stroke="#ffffff"
stroke-width="8"
stroke-linecap="round"
stroke-linejoin="round"/>
</g>
</svg>
Common errors and how to fix them
| Error | Cause | Fix |
|---|---|---|
Expected </g> to close <g> opened at line 1, found </svg> | A group or other element was never closed, often after deleting part of the file by hand. | Add the missing </g> before </svg>, or self-close an empty element as <g/>. |
The root element is <div>, expected <svg> | The paste includes the HTML around an inline SVG, or it is not an SVG file at all. | Copy only the <svg> element and its contents, or use the HTML formatter for the whole page. |
Unescaped '&' — it must start an entity reference like & or &Explained | Text such as “Tom & Jerry” or a URL query inside an attribute contains a bare ampersand, which XML does not allow. | Write & instead of &. |
<svg> has no xmlns="http://www.w3.org/2000/svg" — browsers will not display the file as an image | The namespace declaration was dropped, typically when the SVG was copied out of an HTML page where it is optional. | Add xmlns=“http://www.w3.org/2000/svg” to the root <svg> element. |
This SVG contains a <script> element, which runs when the file is opened in a browser | The file includes JavaScript. That is legitimate for some interactive graphics but dangerous in uploads from users. | Remove the script if the file comes from an untrusted source, or only embed it with <img src>. |
Frequently asked questions
How do I view an SVG file as code and as an image?
Paste or open the file, then switch between the code output and the Preview tab. The preview updates as you edit the input.
Will formatting change how my SVG looks?
No. Indentation is only added between elements where whitespace has no effect, and text content keeps its spacing. Attribute values, path data and IDs are not altered.
Why is my SVG preview blank?
The most common cause is a missing xmlns attribute on the root element, which stops browsers rendering the file as an image. Shapes outside the viewBox, or a fill of none with no stroke, also draw nothing.
How do I make an SVG file smaller?
Use Minify, which runs SVGO to remove editor metadata, comments and redundant attributes and to shorten path data. The SVG minifier page explains each change.
Is it safe to open an SVG from an unknown source here?
Yes. The preview is drawn as an image, so scripts do not execute, and the formatter warns about scripts, event handlers and javascript: links it finds.