It found a in a file I was sent. Is that dangerous?

It depends entirely on where the file goes, and the report says which. Pasted inline into a page, an SVG's script runs with that page's origin — its cookies, its storage, its DOM. Loaded as an or a CSS background it never runs at all. The preview here removed it before rendering, and the frame it renders in cannot run script in any case, so looking at the file in this tool is safe regardless.

SVG Editor and Explainer

Edits an SVG next to its live render and explains the file: viewBox and scaling, transforms, every path command, inherited paint, wasted bytes, and what breaks in an <img>, a data URI or inlined.

Edit an SVG with the render beside it, and read a panel that says what the file actually is: whether it will scale, what each transform does on the way down to a shape, what the d attribute spells out command by command, how a fill resolves through inheritance, what the editor leftovers cost in bytes, and what breaks when the same file is used as an <img>, as a CSS background or pasted inline. Every finding points at the exact attribute it is about. It is a set of rules over the parsed file, not a model, so it reports what is there and never guesses at what the file is for.

🔒 Runs entirely in your browsersvgeditorviewboxexplainaccessibility

Examples

SVG source

Drop an .svg file

Read in this tab. Nothing is uploaded.

Type here and the preview follows. Click a shape in the preview and the source jumps to its element.

Preview

Background

The clickable outlines cover shapes whose box can be worked out from the file. <text>, <use> and an <image> with no size need a renderer, so they are selected from the source instead.

Rendered in a sandboxed frame from markup rebuilt out of the parsed tree — never from your bytes. The frame is a fixed box and the file is given all of it, which is what makes a document that cannot scale visibly refuse to fill it.

Bytes

395

Elements

Shapes

Path commands

Deepest nesting

What this file is

noteFrame
Sized, and it scales
width="24" and height="24" give it an intrinsic size, and viewBox="0 0 24 24" makes that size a starting point rather than a limit. Give it a different width in CSS and everything inside is rescaled to match. This is what you want for an icon.
noteCoordinates
One user unit, and what it is worth
Coordinates inside run from 0 to 24 across and 0 to 24 down. At the declared width of 24, one user unit draws 1 CSS pixels — and that number changes with whatever size the file is actually given.
notePaths
Absolute and relative commands mixed
3 absolute and 6 relative commands in the same path. Both are legal and they draw the same shape; the practical difference is that a fully relative path can be moved by editing the first M alone, and this one cannot.
notePaint
currentColor: the page decides the colour
1 attribute paint with currentColor, which resolves to the CSS `color` property inherited at the point the SVG sits. Inline in a page that is exactly what you want from an icon: it takes the surrounding text colour and follows a theme switch for free. Used as an <img> or a CSS background-image it resolves against nothing and comes out black, because there is no element to inherit from.
noteAccessibility
Named "보관함에 저장"
<title> is the accessible name of the graphic, and most viewers also show it as a tooltip on hover — which is why a <title> written as a filename is worse than none. This one reads "보관함에 저장".
noteAccessibility
No <desc>
<title> is the short name; <desc> is the longer description for a graphic whose content matters — a chart, a diagram, a map. An icon does not need one, and adding an empty one is worse than leaving it out.

Selected element

Click a shape in the preview, or put the caret inside an element in the source.

Strip the cruft with the SVG optimiser · Turn it into a CSS data URI · Work on one path on its own

How to use it

Paste the SVG, or drop the file
The source box takes a paste and the drop zone takes an .svg. Everything is read in this tab. The four examples above the panes are worth a click first: each one is a different shape of real file, and the report says something different about each.
Read the frame section first
It says which of four shapes this document is, and that decides most of what follows. A viewBox with a width and height scales and has a size of its own; a viewBox alone fills whatever box it is given; a width and height with no viewBox does not scale at all, which is why an icon copied out of a design tool so often refuses to resize. The preview hands the file a fixed box, so you can see which one it is.
Click a shape to line the two panes up
Clicking an outline in the preview puts the caret on that element in the source and fills the element panel: the transform chain from the outermost element down, what the accumulated matrix does, the paint as it resolves through inheritance, and for a path, every command in plain language. Moving the caret in the source selects in the other direction.
Use the "show me" buttons rather than searching
Every finding carries the source range it is about, so the button on it selects those exact characters — the second gradient with the duplicate id, not the first, and the one attribute rather than the tag around it.
Take the size findings to the optimiser
The size section counts bytes and names what they are — editor metadata, an unused gradient, seven decimal places nobody chose — but this tool does not rewrite your file. The SVG optimiser does that pass for the whole document at once, and shows a before/after difference so you can check nothing moved.

Common questions

Why does my icon not get bigger when I set a width in CSS?

Almost always because the file has a width and height but no viewBox. Without one, user units are CSS pixels and there is no mapping for the browser to rescale — the box grows and the drawing stays put. The frame section says so and proposes the exact viewBox to add, which is usually "0 0 <width> <height>" with the numbers already in the file.

I inlined two icons and the second one lost its gradient. Why?

Their ids collided. Design tools generate names like a, Layer_1 and SVGID_1_, and once both files are in one page every url(#a) resolves to whichever came first in the document — so the second icon silently borrows the first one's gradient or clip path. The portability section flags exporter-generated ids for exactly this. Prefix every id with something unique to the file before inlining it.

The file works on my page and renders blank as a CSS background. What changed?

Three things differ, and the report names whichever applies. A missing xmlns is forgiven by the HTML parser and fatal everywhere else. currentColor has nothing to inherit from outside a page, so it comes out black. External references are not fetched at all in an <img> or a background-image, so the element that needs them draws nothing. And a # in a hex colour truncates a data URI unless it is written as %23.

A hole in my path is filling in solid. Do I move it?

No — reverse it. Under the default fill-rule="nonzero" an inner loop is a hole only when it winds the opposite way round from the loop containing it, so a hole that fills in solid is a direction problem, not a position one. The path section says how many subpaths there are and which rule is deciding. Reversing one subpath is what the SVG path tool does.

It found a <script> in a file I was sent. Is that dangerous?

It depends entirely on where the file goes, and the report says which. Pasted inline into a page, an SVG's script runs with that page's origin — its cookies, its storage, its DOM. Loaded as an <img> or a CSS background it never runs at all. The preview here removed it before rendering, and the frame it renders in cannot run script in any case, so looking at the file in this tool is safe regardless.

Why does the paint panel disagree with what I see?

Because the file has a <style> block and this report does not apply it. Resolving CSS selectors needs a CSS engine; every value quoted here comes from presentation attributes and inline styles only. The report says so wherever a <style> block exists rather than quietly showing a value the stylesheet has overridden.