SVG Viewer & Validator

Before an SVG goes into production, whether as a logo, an icon set, or a piece of user submitted content, it is worth checking two separate things: does it render correctly, and is it safe to embed. This tool checks both at once, rendering a live preview alongside a structured validation report, built around the actual SVG 1.1 specification published by the W3C rather than guesswork about what makes an SVG well formed.

Why SVGs break, and what well formed actually means

SVG is an XML based format, so the first requirement is that the markup is well formed XML, every tag properly closed, every attribute properly quoted, no stray characters breaking the structure. A single unclosed tag or unescaped ampersand is enough to make a parser reject the whole file. This tool runs your code through a real browser XML parser, the same kind of parser that will ultimately render or reject the file in production, so a pass here means the file will actually work, not just look plausible.

The viewBox attribute, and why so many exports miss it

Per the SVG 1.1 specification, the viewBox attribute defines the coordinate system used to scale the graphic inside its container. In practice, this is the single most common issue we see in SVGs exported from design tools: a missing or mismatched viewBox is usually why an icon looks correctly sized in one context and stretched, cropped, or tiny in another. This tool flags that specifically, rather than lumping it in as a generic warning, since it is the fix most likely to actually solve a real rendering bug. If this check fails, our SVG ViewBox Fixer can generate a correct one automatically.

SVGs can contain executable code, this checks for it

Unlike a JPG or a PNG, an SVG is a document, and the SVG specification explicitly allows a <script> element inside it, along with inline event handler attributes like onload or onclick. That means an SVG can carry executable JavaScript, a well documented cross site scripting vector when an application renders untrusted SVGs directly in the browser, for example an SVG uploaded by an end user and displayed without sanitization. This tool explicitly checks for embedded script tags and inline event handlers and flags them separately, so you know exactly why a file was marked as a concern rather than getting a vague security warning.

What this tool does not catch

Being upfront about limits matters as much as the checks themselves. This tool validates structure and flags known risky patterns, but it is not a substitute for server side sanitization if you are accepting SVGs from untrusted users at scale, a dedicated library such as DOMPurify configured for SVG is the right tool for that job. Similarly, a passing validation report confirms the file is well formed and free of the specific risks checked here, it does not guarantee visual correctness across every browser and rendering engine, since some edge cases around filters, fonts, and CSS still vary by implementation.

Runs entirely in your browser

Every check here runs client side using your browser's native XML parser, nothing you paste or upload is sent to a server, logged, or stored. That makes this a safe way to check unreleased branding, client files, or SVGs from a source you do not fully trust yet, without exposing that content to a third party service in the process of checking it.

Fixing what this tool finds

A validation report is only useful if you can act on it. If this tool flags a missing viewBox, the SVG ViewBox Fixer generates a corrected one automatically. For everything else, malformed markup, embedded scripts you want to strip, unnecessary attributes, our SVG Code Editor gives you a live code and preview panel to make the fix directly, part of the same SVG & Design Tools collection this validator belongs to.