SVG Viewer
Online SVG Code Editor & Live Preview Tool
What is SVG Viewer?
SVG Viewer is an online SVG code editor and live preview tool. It allows you to write or paste SVG code directly and see the rendered result in real-time. SVG (Scalable Vector Graphics) is an XML-based vector image format widely used in web design, icon creation, and data visualization.
This tool supports live preview, source code viewing, SVG file download, and more. It's an essential utility for front-end developers and designers.
SVG is both image and code: it can contain paths, text, filters, animation, external references, and styles. A viewer helps inspect shape, viewBox, scaling, and markup quickly, but security-sensitive SVGs should be handled carefully, especially when they come from unknown sources. Before embedding SVG in a website, check sizing, accessibility labels, sanitization, and whether scripts, links, or external resources are present.How to Use
How to use
- Type or paste SVG code in the left editor
- The right panel shows the SVG rendering in real-time
- Click the "Source" button to view formatted SVG source code
- Click the "Download" button to save SVG as a file
- Click the "Copy SVG" button to copy code to clipboard
SVG Safety
- Only paste SVG from trusted sources when possible; SVG can contain scripts, external references, or unexpected styling.
- Before downloading or embedding, verify viewBox, dimensions, fills, strokes, and text rendering at the target size.
Use Cases
Technical Principle
SVG source is parsed with new DOMParser().parseFromString(source, 'image/svg+xml'), which returns a Document built from XML rules rather than HTML's lenient parser. The parser checks well-formedness, surfaces a <parsererror> node on invalid markup, and exposes the SVG tree to scripts and CSS exactly like the rest of the DOM. Elements like <path>, <circle>, <rect>, <g>, <text>, <defs>, <linearGradient>, and <filter> are first-class nodes with their own attributes and event targets. The coordinate system is governed by the viewBox attribute. viewBox="minX minY width height" defines the internal coordinate space, and preserveAspectRatio (defaulting to xMidYMid meet) decides how that space is mapped into the rendered viewport: meet preserves the entire viewBox by adding letterboxing, slice fills the viewport by cropping, and none stretches non-uniformly. Path commands inside d use M (moveTo), L (lineTo), C (cubic bezier), Q (quadratic), A (elliptical arc), and Z (closepath); each command has an absolute uppercase form and a relative lowercase form. SVG security needs explicit handling because the format is executable: <script>, foreignObject containing HTML, xlink:href to external URLs, onload and other event-handler attributes can all run JavaScript in the page context if the SVG is injected inline. DOMPurify with the SVG profile or a server-side sanitizer is the standard mitigation when accepting third-party SVG. Rasterizing to PNG is done by drawing the SVG (loaded as an HTMLImageElement from a Blob URL) onto a canvas with drawImage, then calling canvas.toBlob('image/png') for download.
- Parser: new DOMParser().parseFromString(source, 'image/svg+xml') returns a strict XML Document with a <parsererror> node on failure
- viewBox: "minX minY width height" sets the internal coordinate space; preserveAspectRatio xMidYMid meet/slice controls fit vs crop
- Path commands: M moveTo, L lineTo, C cubic bezier, Q quadratic, A arc, Z closepath; uppercase = absolute, lowercase = relative
- Security surface: inline <script>, foreignObject, xlink:href to remote URLs, and onload/onclick handlers execute as JavaScript
- Sanitization: DOMPurify with USE_PROFILES: { svg: true } strips scripts and event handlers before inserting third-party SVG
- PNG export: load SVG into HTMLImageElement via Blob URL, drawImage onto a canvas, canvas.toBlob('image/png') for download
- Browser baseline: SVG 1.1 in every evergreen browser since 2011; SVG 2 features (text-on-path improvements) are partial
Examples
Circle
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#2563eb" />
</svg>Rectangle
<svg width="120" height="80" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="60" rx="8" fill="#10b981" />
</svg>Star
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#f59e0b" />
</svg>FAQ
What does the viewer do?
It renders pasted SVG markup, lets you zoom and pan, shows the source code with syntax highlighting, and reports image dimensions and viewBox. Useful for inspecting third-party SVG, debugging path data, and previewing icons before adding them to a project.
Is the SVG uploaded?
No. The page parses and renders SVG locally in your browser - SVG is just markup, the browser already knows how to display it. Pasted code never crosses the network.
Why does my SVG look different here vs. in design software?
SVG renders depending on the user agent. Browsers, Figma, Illustrator, and Inkscape interpret some edge cases (text rendering, filter effects, mesh gradients, clip-paths) differently. The viewer shows what the browser does, which is what your end-users will see in HTML.
Can I edit the SVG here?
You can edit the source on the left and re-render. For visual editing (drag to move points, change paths), use a real SVG editor like Inkscape, Figma, or Boxy SVG. This page is a viewer plus quick text edits.
How do I get the SVG into my project?
Copy the source. Most front-end frameworks accept inline SVG directly in JSX/HTML. To use as a background, put it in your assets folder and reference with url(...). To use as an icon font, run it through a build step like svgo plus a sprite generator.
Why is my SVG huge?
Many SVG exports include editor metadata (Adobe Illustrator XMP, Inkscape :inkscape: namespaces), unused defs, comments, and verbose path data. Run it through SVGO (online or CLI) to strip those - typically 30-70% smaller without visual change.
Are external resources loaded?
Most viewers block external loads (no fetching of external <image href> or <use href> URLs) for safety. Embed referenced bitmaps as data: URIs and convert <use> with external href to inline copies if your SVG depends on them.