SVG Validator

How the SVG Validator works

A broken SVG behaves differently depending on where you put it. Inline in an HTML page, the browser's forgiving HTML parser patches it up and it mostly renders. The same file used in an <img>, a CSS background or a favicon goes through a strict XML parser instead, and it either shows nothing or shows the "XML parsing error" page. Illustrator, Figma and Inkscape export clean XML, but as soon as someone hand-edits a file, or a template stitches one together, the strict cases start failing. This checker applies the strict rules, so what passes here works everywhere.

Why it matters. SVG is now the default format for logos, icons and simple illustrations on the web. It is resolution-independent and often a fraction of the size of an equivalent PNG. That makes it a dependency of many other things. Icon systems built on <use href="#icon"> sprites fail silently when an id is wrong. Email clients and image-processing pipelines reject malformed files outright. Design-token pipelines, React's SVGR loader and build tools such as SVGO all start by parsing the XML, so one unclosed tag can break a whole build. Many upload forms and CMSs refuse any SVG that contains <script>, because an SVG opened directly in a browser can run code.

XML rules come first. Every element must be closed, either with an end tag or a trailing slash; SVG has no optional closing tags. Attribute values must be quoted, every attribute needs a value, a bare & in text must be written &, and there can be only one root element. A comment cannot contain --. If there is an <?xml ?> declaration it must be the very first thing in the file, and a stray blank line before it is enough to break the document. Names are case-sensitive, so <clippath>, <lineargradient> and viewbox are errors. They are the most common reason a hand-written SVG silently does nothing.

Shapes are checked for the attributes they need. A <path> without d, a <circle> without r, a <line> without both ends, or an <image> or <use> without href is an error. A <rect> or <ellipse> missing a size is legal but draws nothing, so it gets a warning. Path data is checked for stray characters, a missing initial moveto and malformed numbers such as 1.2.3. A polygon's points must contain an even count of numbers. Coordinates, radii, sizes, stroke-width and opacities must parse as numbers, sizes cannot be negative, and opacity must be between 0 and 1.

References are resolved. Every id is collected. Then every href="#…", xlink:href and url(#…) in a fill, stroke, filter, mask, clip-path or marker is checked against that list. A reference to a missing id is the classic "my gradient renders as black" bug, and it is reported on the line where the reference is made. Duplicate ids are errors because the second element can never be reached. Ids that start with a digit get a warning, because they break CSS selectors and url(#…) in some browsers. A <stop> outside a gradient, a <tspan> outside <text> and filter primitives outside <filter> are structural errors.

Colours and inline styles. Hex colours must have 3, 4, 6 or 8 digits. A bare word in fill, stroke or stop-color must be a real colour name, while none, currentColor, url() and the functional colour syntaxes are accepted. A style attribute is split on semicolons, and each declaration must contain a colon.

Reading the SVG validator report

The summary shows the number of Elements and Ids found, the count of Errors and Warnings, and a one-line Result. The table below it lists each problem with its line number, its level and a message.

• Errors break the file in at least one context. Fix them all before shipping; each message names the element or attribute at fault.
• Warnings mark things that work today but will cause trouble somewhere else.
• Valid, with warnings is a normal result for exported artwork. Read the list and fix the ones that apply to how you will use the file.

Warnings worth acting on. A root <svg> without xmlns renders inline but fails as a standalone file or in <img>. Without a viewBox the graphic will not scale to its container. xlink:href is deprecated in favour of plain href, and using any xlink: attribute without declaring its namespace is an error. <script> is flagged because it runs inline but is blocked in <img> and CSS. For accessibility, the root should have a <title> or aria-label, plus role="img", or aria-hidden="true" if the graphic is decorative. A DOCTYPE is unnecessary and should be removed.

Tips. Fix errors from the top down, because a single unclosed tag can cause a cascade of errors further down that all disappear once it is fixed. Run exported files through an optimiser such as SVGO after they validate, not before, and check again afterwards, since aggressive id minification can break references. If an icon renders inline but not as a background image, the missing xmlns warning is almost always the cause.

What it does not do. It does not know which attributes are allowed on which element, so a misspelling like strke is caught only if it is one of the checked names. It does not validate transform syntax or filter parameters, and it does not render the graphic. Use the SVG path visualizer in the related tools to see what a path actually draws.

Related tools