Zona LogoCheck a logo before using it
Open the SVG, compare it on light and dark backgrounds, and inspect its dimensions and viewBox. Zoom in to review fine details without changing the saved artwork.
View and edit SVG online
An SVG viewer turns XML markup into a picture; an SVG editor lets you change that markup. This free online workspace combines both with an inspector, so you can see what a file contains before using it on a website, sharing it with a developer, or making a small code change.
Make a targeted color edit
Find a fill or stroke declaration in the code, change its value, and watch the preview update. Copy a declared color from the inspector when you need to reuse it.
Review a design export
Look for text, font declarations, and embedded image references. An SVG can mix vector shapes with raster images, so the file extension alone does not tell you how every part was built.
Find XML errors
Use the reported line and column and Jump to error when the parser provides a location. Fix the markup in the editor while keeping the last valid preview as a reference.
How to open and edit an SVG file
- 01
Choose a file or paste code
Use Upload SVG, drop one .svg file into the workspace, or choose Paste code to insert SVG text from your clipboard. If clipboard access is denied, paste manually into the focused editor. The limit is 10 MB. The examples below give you a working file to explore.
- 02
Review the live preview
Use checkerboard to see transparent areas, or switch to a light or dark surface. Switch between Preview, Inspector, and Data URI in the right panel. Original keeps the file or example you opened; for pasted code, it captures the first valid, safe version. Edited follows your current code. Compare shows both side by side on desktop, with shared scale, background, and zoom. Background and zoom controls sit below the preview. Fit resets preview zoom; the background and zoom controls do not modify the SVG source.
- 03
Edit and inspect
Change the code and pause briefly for analysis. Format code adds indentation without optimizing the SVG; Undo restores the previous code. On desktop, drag the panel divider or use its arrow keys. Use fullscreen for more room, then exit with the button or Esc where supported.
- 04
Download the current SVG
Download becomes available when the latest code passes validation. The file contains your current code, without optimization or formatting; a missing root SVG namespace is added automatically. Open the Data URI tab to choose URL-encoded or Base64, inspect its size, and copy it for HTML or CSS. Both use the same validated source as download. Keep a copy before closing the page: drafts are not saved.
Preview SVG directly from code
Try these small SVGs to connect the code with its visual result. Each example includes the complete markup shown in the preview. Open it in the editor, make the suggested change, and inspect what updates. If you already have unsaved edits, the tool asks before replacing them.
Shapes & colors
Two shapes, two fills, and a shared coordinate system. Notice that the inspector counts zero paths: a rect and a circle are separate SVG elements.
SVG source
<svg xmlns="http://www.w3.org/2000/svg"
width="240" height="160" viewBox="0 0 240 160">
<rect x="28" y="28" width="104" height="104"
rx="24" fill="#2563eb" />
<circle cx="160" cy="80" r="44" fill="#fbbf24" />
</svg>Preview
Try this change Change #2563eb to #16a34a. Then change width to 360 and height to 240 while keeping the viewBox unchanged.
Drawing with strokes
A group shares its stroke settings with two paths and a circle. The empty fill keeps the artwork transparent between the lines.
SVG source
<svg xmlns="http://www.w3.org/2000/svg"
width="240" height="160" viewBox="0 0 240 160">
<g fill="none" stroke="#2563eb" stroke-width="4"
stroke-linecap="round" stroke-linejoin="round">
<path d="M24 124 80 48 128 104 160 64 216 124" />
<path d="M24 136H216" />
<circle cx="188" cy="36" r="12" />
</g>
</svg>Preview
Try this change Change stroke-width from 4 to 8 and the stroke color to #7c3aed. Compare the result on light and dark backgrounds.
Gradient & text
The rectangle references a gradient in defs, while the text uses a local generic font family. The inspector lists the paint reference, gradient stops, and text declaration.
SVG source
<svg xmlns="http://www.w3.org/2000/svg"
width="240" height="160" viewBox="0 0 240 160">
<defs>
<linearGradient id="sky" x2="1" y2="1">
<stop offset="0" stop-color="#2563eb" />
<stop offset="1" stop-color="#7c3aed" />
</linearGradient>
</defs>
<rect x="16" y="24" width="208" height="112"
rx="24" fill="url(#sky)" />
<text x="120" y="88" text-anchor="middle"
font-family="sans-serif" font-size="24" fill="#ffffff">
Hello SVG
</text>
</svg>Preview
%22%20%2F%3E%0A%20%20%3Ctext%20x%3D%22120%22%20y%3D%2288%22%20text-anchor%3D%22middle%22%0A%20%20%20%20font-family%3D%22sans-serif%22%20font-size%3D%2224%22%20fill%3D%22%23ffffff%22%3E%0A%20%20%20%20Hello%20SVG%0A%20%20%3C%2Ftext%3E%0A%3C%2Fsvg%3E)
Try this change Change the second stop-color to #db2777 and replace Hello SVG with your own text. Try font-family="serif" to see the browser's font fallback.
Understand your SVG properties
The inspector reports what is declared in the source. It is useful for understanding structure, but it does not calculate every inherited CSS value or guarantee the same font rendering on every device.
| Property | What it tells you | What to check |
|---|---|---|
| Width & height | The original root attributes, including units or percentages. Missing values are shown as not specified. | Compare these with the preview viewport, which can be derived from the viewBox. The source attributes stay unchanged. |
| viewBox | Four numbers: the minimum x and y coordinates, followed by the coordinate area's width and height. | Make sure the artwork sits inside this area. A missing or invalid viewBox is reported, not repaired automatically. |
| File size | The UTF-8 byte size of your current code, with the original upload size shown separately. | Size can grow after edits. This is not the same as character count or the compressed size a web server might transfer. |
| Paths | The number of path elements, including paths inside defs. | Rectangles and circles are separate elements. Repeated use instances are not expanded into extra paths. |
| Fill & stroke | Declared paint values from attributes, inline styles, and CSS blocks. | A listed declaration is not a computed style. Inheritance, currentColor, and CSS variables can change the rendered result. |
| Gradients & patterns | Paint references such as url(#sky), plus the declared gradient stop colors. | A gradient fill is not one solid color. Check the referenced definition and its stops before editing. |
| Text & fonts | Text elements, snippets, and declared font families or font shorthand. | External fonts are not loaded. Text converted to paths no longer carries a detectable font declaration for those outlines. |
| Image references | Embedded, external, or local references on image and feImage elements. | Supported embedded PNG/JPEG/WebP images can be inspected; external images stay blocked. Local references can also point to vector content. |
120 × 80
180 × 120
Same coordinates, different display sizes
Both drawings use viewBox="0 0 240 160". Their width and height change together, so the shapes keep the same proportions. Changing the viewBox instead changes the coordinate area being displayed. When this tool cannot resolve dimensions, it uses a labeled 300 × 150 preview viewport without rewriting your code.
viewBox="0 0 240 160"Fix common SVG preview problems
Start with the visible symptom, then check the related source property. The viewer does not automatically repair or sanitize your file, and a blocked preview does not always mean the artwork itself is broken.
| What you see | Possible cause | What to try |
|---|---|---|
| White artwork seems missing | The artwork blends into a white preview surface. | Switch to Dark or Checkerboard before changing fill values. A preview background does not remove a background already drawn inside the SVG. |
| Invalid SVG XML | An unclosed tag, missing quote, invalid root, or namespace issue. | Use Jump to error when a position is available. Check the opening svg element and xmlns, then match tags and quoted attributes. |
| Preview or download is blocked | Active content or an unsupported resource reference was detected. | Inspect scripts, event attributes, and external links. Export a self-contained SVG from your design app; do not simply disable validation. |
| Text looks different | The declared font is unavailable on the current device. | Try a generic family such as sans-serif, or export text as paths in your design app when preserving letter shapes matters. |
| Artwork appears cropped | The viewBox may exclude part of the geometry, or the SVG uses clipping or a mask. | Compare coordinates with the viewBox and inspect clipPath or mask references. Zooming out cannot reveal artwork clipped by the SVG itself. |
| Preview has not followed an edit | The latest markup is invalid, so the previous valid image is still shown. | Look for Last valid preview and the error message. Correct the code and wait for analysis; download stays disabled until the current revision is valid and safe. |
Use an SVG viewer in your browser
Open the page in a modern browser on Mac, Windows, Linux, or Android, then choose a local SVG or paste its code. You do not need to install a dedicated SVG viewer app. Available features depend on your browser: for example, fullscreen may not be available in every environment.
On desktop
Keep code and artwork side by side. Search with Ctrl/Cmd + F and undo with Ctrl/Cmd + Z inside the editor. Tab leaves the editor so you can reach other controls by keyboard.
On a smaller screen
Use the single row of Code, Preview, Inspector, and Data URI tabs. Upload opens Preview; examples and error navigation open Code. The code area and wide reference tables scroll within their own containers. Use your device's file picker to select the SVG.
Processing stays in your browser, but this is not a promise that the website works offline. Save or copy your work before refreshing, closing the page, or switching devices.
Frequently asked questions
Is this SVG viewer free, and do I need an account?
The SVG Viewer & Editor is free to use and does not require an account. You can open one SVG at a time, up to 10 MB, or work with pasted SVG code within the same size limit.
Are my SVG files uploaded to a server?
No. File reading, inspection, editing, preview generation, and download creation happen in your browser. The built-in ZonaLogo example is fetched from this site; your own SVG is not uploaded by the tool.
Can I view an SVG directly from code?
Yes. Choose Paste code, insert SVG markup with an svg root and wait for the preview. A missing root namespace is handled automatically for preview and download; the editor keeps your pasted code. The examples above provide complete markup you can open and modify.
Can I change SVG colors?
Yes, through the code editor. Edit a fill, stroke, CSS declaration, or gradient stop as appropriate. Inspector color buttons copy values; they do not replace colors in the document.
Can I use it on Mac, Windows, Linux, or Android?
Use a modern browser on your device and choose a file or paste code. This is a web tool, not a Windows Explorer thumbnail extension or a native app. Some browser features, including fullscreen, may be unavailable.
Can it open SVG exports from Illustrator or Inkscape?
It can open self-contained exports that pass the viewer's XML and security checks. Inert top-level Inkscape view metadata is excluded from the preview while staying in the source. Exports with external resources, active content, or unsupported structures may still be blocked.
Are preview background and zoom included in the download?
No. Checkerboard, Light, Dark, zoom, and the selected comparison view affect inspection only. Download always exports the latest validated code, even while viewing Original. The download contains your current source code, adding only a missing root SVG namespace when needed. To change the artwork itself, edit the SVG code.
Will my draft survive closing the page?
No draft is saved automatically. Download the SVG or copy the code before refreshing or leaving. Loading another file or example asks for confirmation if it would discard your edits.