Preview SVG files and inspect SVG code in the browser. Renders SVG with grid background, shows source code, validates syntax. No upload, instant preview.
Use this free online SVG Viewer directly in your browser. No signup required, no data leaves your device. Part of Utilier — a collection of 133+ developer utilities.
What is SVG Viewer & Code Inspector?
SVG (Scalable Vector Graphics) is an XML-based vector image format for web graphics. This tool previews SVG files or code by rendering them in the browser and displaying the source XML alongside the visual output. It shows SVG dimensions, validates syntax, and helps debug path issues with a grid background for transparency visualization.
Instant rendering: Paste SVG code or upload a .svg file and see it rendered immediately. No need to create an HTML file or open it in an editor.
Grid background for transparency: Displays SVG on a transparent grid (checkerboard pattern) so you can see exactly where transparency exists, important for icons and logos.
Source code display: Shows the SVG XML source code with syntax highlighting. See the actual <path>, <circle>, <rect> elements and their attributes.
ViewBox and dimensions: Extracts and displays the viewBox, width, and height attributes. Helps debug scaling and coordinate system issues.
Copy and download: Copy the SVG code to clipboard or download as a .svg file. Useful for extracting SVG from websites or converting formats.
Why use SVG viewer?
SVG code is XML-based and hard to visualize without rendering. Text editors show code, browsers show the image, but seeing both simultaneously makes debugging and understanding SVG structure much easier.
Debug SVG visually: When an SVG icon does not look right, preview it with this tool to see if the issue is the SVG itself or the embedding code.
Verify downloaded SVG: Before using an SVG from a website or icon library, preview it to check for hidden elements, embedded scripts, or unexpected dimensions.
Check transparency: The grid background shows exactly where an SVG is transparent vs. white fill. Critical for logos and icons that will be used on colored backgrounds.
Inspect viewBox issues: If an SVG is cropped or scaled incorrectly, the viewBox attribute is usually the culprit. The tool extracts and displays it for easy inspection.
Learn SVG structure: See how paths, circles, rectangles, and other SVG elements are defined in XML. Great for understanding how SVG works.
Runs locally: No upload. SVG files and code stay in the browser. Safe for proprietary icons, client logos, or unreleased designs.
When to use SVG viewer
Use whenever you need to preview or inspect SVG code or files.
Debugging SVG icons that do not render correctly in your application.
Previewing downloaded SVG files before using them in projects.
Verifying that SVG icons from icon libraries (Font Awesome, Heroicons) look correct.
Checking SVG dimensions and viewBox values when scaling issues occur.
Inspecting SVG code extracted from websites or design tools to see the actual elements.
Learning SVG by examining how shapes, paths, and gradients are defined in XML.
Validating SVG syntax before embedding in HTML or converting to other formats.
How to use SVG viewer
Paste SVG code or upload a file, then inspect the rendered output and source.
Paste SVG code or upload a file: Paste SVG XML into the text area, or click 'Upload .svg' to load a file. The tool accepts complete <svg>...</svg> tags or just the inner content.
View the rendered SVG: The SVG renders in the preview pane with a transparent grid background. Zoom in/out or pan if needed. The grid helps identify transparent areas.
Inspect the source code: The source code pane shows the SVG XML with syntax highlighting. See <path>, <circle>, <rect> elements and their d (path data), fill, stroke, and other attributes.
Check dimensions and viewBox: The info panel shows width, height, and viewBox attributes. If the SVG scales incorrectly, these values are the first thing to check.
Copy or download: Use the Copy button to copy the SVG code to clipboard, or Download to save as a .svg file. Useful for extracting SVG from inline HTML.
Edit and re-preview: Modify the SVG code (change colors, paths, dimensions) and the preview updates in real-time. Great for quick SVG edits.
Key features
Instant SVG rendering: Paste code or upload a file and see the SVG rendered immediately with accurate scaling and styling.
Transparent grid background: Checkerboard pattern behind the SVG reveals transparency vs. white fill, critical for icons and logos.
Source code display: Shows SVG XML with syntax highlighting for <path>, <circle>, <rect>, fill, stroke, and other elements.
Dimension extraction: Displays width, height, and viewBox attributes extracted from the <svg> tag.
Real-time editing: Edit the SVG code and see the preview update instantly. No need to reload or switch tools.
Copy and download: Copy SVG code to clipboard or download as a .svg file for use in projects.
File upload support: Upload .svg files directly instead of copying and pasting code.
Common use cases
Icon debugging: Preview SVG icons that do not render correctly in your app to isolate whether the issue is the SVG or the CSS.
File verification: Check downloaded SVG files for unexpected elements, embedded scripts, or incorrect dimensions before using them.
Transparency inspection: Verify that logo backgrounds are truly transparent (not white fill) using the grid background.
ViewBox troubleshooting: Inspect viewBox and dimensions when SVG scaling or cropping issues occur.
Learning SVG: Study how SVG paths, shapes, and gradients are defined in XML by examining real examples.
Quick SVG edits: Change colors, paths, or dimensions in the code editor and see results instantly.
viewBox='minX minY width height' defines the coordinate system. E.g., viewBox='0 0 24 24' is a 24×24 unit canvas
Width and height
Display size in pixels or other units. If omitted, SVG scales to container. viewBox controls internal coordinates
Path data (d attribute)
M (move to), L (line to), C (cubic Bézier), Z (close path). E.g., d='M10 10 L20 20' draws a line
Fill and stroke
fill='#color' (interior color), stroke='#color' (outline), stroke-width='2'. fill='none' for outline-only shapes
Transparency
opacity='0.5' (50% transparent), fill-opacity, stroke-opacity. Or use rgba/hsla colors
Scalability
SVG is vector — scales to any size without pixelation. Perfect for icons, logos, and responsive graphics
Browser support
Universal — all modern browsers render SVG natively. IE9+ supports SVG with some limitations
Comparison to PNG/JPEG
SVG: vector, scalable, small file size for icons/logos. PNG/JPEG: raster, fixed resolution, better for photos
Common mistakes to avoid
Using SVG without a viewBox attribute and expecting consistent scaling
Why it happens: The viewBox attribute defines the coordinate system and aspect ratio. Without it, the SVG may scale unpredictably when embedded in different contexts (responsive layouts, different container sizes). A <circle cx='12' cy='12' r='10'/> without viewBox has no defined coordinate system, so browsers guess, often incorrectly.
How to avoid it: Always include viewBox on the <svg> tag. For icons, use viewBox='0 0 24 24' (24×24 unit canvas). For logos, match the design artboard size (e.g., viewBox='0 0 200 100'). The viewBox defines internal coordinates; width/height define display size.
Embedding SVG with <img src='icon.svg'> and expecting CSS styling to work
Why it happens: When SVG is embedded via <img>, it is treated as an external resource and isolated from the page's CSS. You cannot change fill, stroke, or other properties with CSS. This is a security and scoping feature. If you need to style an SVG icon with CSS (e.g., change color on hover), <img> will not work.
How to avoid it: Inline the SVG directly in the HTML (<svg>...</svg>), or use an <object> or <iframe> tag and target the SVG with JavaScript. For icons, inline SVG is best: it allows CSS styling via fill: currentColor; and pseudo-selectors like :hover.
Assuming white fill and transparent background are the same
Why it happens: fill='white' fills the shape with white pixels. No fill (or fill='none') leaves the area transparent. On a white webpage background, both look identical, but on a colored background, the difference is obvious. A logo with fill='white' will have a white box around it; a logo with no fill is transparent.
How to avoid it: Use the tool's grid background to check transparency. If the grid shows through, the area is transparent. If you see solid white, it is fill='white'. For logos and icons that need transparency, use fill='none' or omit the fill attribute on background shapes.
Copying SVG from websites without checking for embedded scripts or tracking
Why it happens: SVG is XML and can contain <script> tags, event handlers (onclick='...'), or external resource references (<image href='https://tracker.com/pixel.svg'>). If you copy SVG from an untrusted source and inline it in your page, the script executes and can steal data, inject ads, or track users. This is an XSS (Cross-Site Scripting) risk.
How to avoid it: Always inspect copied SVG code before using it. Search for <script>, onclick, onload, href='http, and <image> tags. Remove any suspicious code. Or sanitize SVG with a library (DOMPurify, svg-sanitizer) that strips scripts and event handlers. For icon libraries (Font Awesome, Heroicons), download from official sources only.
Using absolute coordinates in path data instead of relative, making editing difficult
Why it happens: Absolute path commands (M, L, C) use fixed coordinates: M10 10 L20 20 means 'move to (10,10), line to (20,20)'. If you want to move the entire path, you must recalculate every coordinate. Relative commands (m, l, c) are offset from the current position, so moving the path only requires changing the first M.
How to avoid it: For hand-editing SVG, use relative commands (lowercase) after the initial M: M10 10 l10 10 (line 10 units right, 10 down from current position). Design tools like Illustrator can export SVG with relative or absolute paths — choose relative for easier manual editing.
Frequently asked questions
What is the difference between width/height and viewBox?
width and height define the display size in pixels (or other units). viewBox='minX minY width height' defines the internal coordinate system and aspect ratio. For example, viewBox='0 0 24 24' width='48' height='48' means the SVG uses 24×24 internal units but displays at 48×48 pixels (2× scale). viewBox controls what you see; width/height control how big it appears.
Why use SVG instead of PNG or JPEG for icons and logos?
SVG is vector — it scales to any size (tiny favicon to billboard) without pixelation or quality loss. File sizes are tiny for simple graphics (icons, logos). SVG can be styled with CSS (change colors, add animations). PNG and JPEG are raster (fixed resolution) and good for photos but poor for icons that need to scale or change colors.
How do I change the color of an SVG icon?
If the SVG is inlined in HTML, use CSS: svg { fill: #3b82f6; } changes all fill colors. For more control, use fill='currentColor' in the SVG and set color: #3b82f6; in CSS — the icon inherits the text color. If the SVG is embedded via <img>, you cannot change colors with CSS; you must inline the SVG or use a different embedding method.
What does viewBox='0 0 24 24' mean?
viewBox='minX minY width height' defines the coordinate system. '0 0 24 24' means the top-left corner is (0, 0) and the canvas is 24 units wide and 24 units tall. All coordinates in the SVG (circle cx='12', path d='M10 10') are relative to this 24×24 grid. The actual display size (width='48' height='48') scales this grid up or down.
Can I edit SVG code directly in this tool?
Yes. The source code pane is editable. Change colors (fill='#ff0000'), modify paths (d='M10 10 L20 20'), or add elements, and the preview updates in real-time. This is great for quick tweaks. For serious SVG editing, use a vector editor (Figma, Illustrator, Inkscape).
How do I make an SVG background transparent?
Do not add a <rect> or background shape with a fill. The SVG canvas is transparent by default. If there is a white background, look for <rect fill='white'/> or a CSS background and remove it. Use the tool's grid background to verify — if the grid shows through, the background is transparent.
Why does my SVG look different in the browser than in the tool?
CSS or JavaScript on the page may override SVG styles (fill, stroke, dimensions). Or the embedding method (<img> vs inline) affects styling. Check the browser DevTools to see applied styles. The tool renders SVG in isolation with no external CSS, so it shows the SVG as authored.