When should I use SVG instead of PNG or JPEG?

Use SVG for logos, icons, diagrams, and simple illustrations defined by paths and shapes—they scale crisply at any CSS size and often stay smaller than multiple raster breakpoints. Avoid SVG for complex photos or extremely detailed art with millions of nodes; raster plus responsive `srcset` is more practical.

How does SVG accessibility differ from raster images?

SVG can include a ` ` and `aria-label` for the root or child elements; decorative SVGs should use `aria-hidden="true"`. Inline SVG inherits page styles and can expose text to screen readers if text is real ` ` nodes. Raster alt text maps to a single `img alt`—SVG gives more structure if you author it deliberately.

Can I rely on SVG animation in all browsers?

SMIL (` `, etc.) has uneven support; CSS animations and transforms on SVG elements are widely supported. For complex motion, test target browsers; for critical UI, prefer CSS or a small script. Many teams animate transforms (`transform`, `opacity`) for performance.

What does the viewBox attribute actually do?

`viewBox="min-x min-y width height"` defines the coordinate system mapped into the viewport. It enables scaling: the graphic’s internal units stretch to fit `width`/`height` on the ` ` while preserving aspect ratio if `preserveAspectRatio` is left default. Without viewBox, resizing the element may clip or letterbox unexpectedly.

How do I optimize SVG files for the web?

Run SVGO or similar to remove editor metadata, merge paths, and shorten IDs. Strip invisible layers and redundant groups. Prefer CSS for simple fills over duplicated attributes. For icons, consider a sprite or inline symbol defs; validate in a viewer after each aggressive pass.

SVG Viewer & Preview Online

Inspect SVG markup and see exactly how it draws—before you ship icons, logos, or charts. Understand viewBox and scaling so your vectors look sharp at every size.

Try it now: Open the free SVG Viewer & Preview Online tool — no sign-up required.

SVG as a resolution-independent graphics format

SVG is XML describing geometry, text, and effects—not a grid of pixels. One file can render sharp on a phone and a projector without maintaining @1x/@2x pairs. The cost is parser and DOM work: huge path data can rival raster bytes and slow rendering. For UI chrome and brand marks, SVG is usually the right default; for hero photography, use raster and tools like Image Resizer. When you must embed tiny raster previews inside SVG, Base64 Image shows how those payloads are encoded.

Understanding the viewport and viewBox

The element’s width and height (or CSS sizing) define the layout box on the page. The viewBox defines the abstract canvas coordinates the artist used. Together they create a scale-and-translate mapping: content is not “resized” by changing raster dimensions but by mathematical transformation. preserveAspectRatio controls alignment when aspect ratios differ—essential for full-bleed backgrounds versus centered icons. Previewing changes in a viewer catches clipping bugs before they reach production CSS. Percentage coordinates inside the SVG resolve against different boxes depending on attribute—another reason to eyeball output interactively.

Accessibility and semantic structure

Treat inline SVG like interactive DOM: add focus management if elements are clickable, expose names via title or aria-labelledby, and avoid relying solely on color contrast for meaning. For charts, consider whether data belongs in adjacent text or ARIA tables—decorative sparklines can be aria-hidden. Raster fallbacks with meaningful alt are simpler but less flexible; SVG rewards clean structure with better UX for assistive technology. If you export from design tools, strip auto-generated IDs that collide when multiple icons coexist on one page.

Optimization, fonts, and external references

Minify and deduplicate paths; avoid embedding full font files unless licensing and subsetting allow—converting text to outlines increases file size but guarantees fidelity. External images and filters referenced by URL may fail under offline preview or strict CSP; self-contained SVGs are easier to reason about. Never paste untrusted SVG into production without sanitization: <script>, event handler attributes, and foreignObject can carry XSS in naive renderers. User-uploaded SVG should pass through a strict sanitizer and be served with appropriate Content-Security-Policy. After color tweaks from design tokens, Color Converter helps align HEX, HSL, and RGB stops across your stylesheet and SVG fills.

Raster fallbacks and hybrid assets

Some teams serve SVG with PNG fallback via <picture> for ancient clients; in 2026 that audience is negligible for most B2B and consumer sites, but email clients remain patchy—test if SVG is your hero in a newsletter. When a chart is too complex for accessible SVG, a static PNG with a text summary sometimes wins on maintenance. The viewer helps you decide whether the source is lean enough for inline use or should be externalized like any other static asset.

Frequently Asked Questions

When should I use SVG instead of PNG or JPEG?: Use SVG for logos, icons, diagrams, and simple illustrations defined by paths and shapes—they scale crisply at any CSS size and often stay smaller than multiple raster breakpoints. Avoid SVG for complex photos or extremely detailed art with millions of nodes; raster plus responsive `srcset` is more practical.
How does SVG accessibility differ from raster images?: SVG can include a `<title>` and `aria-label` for the root or child elements; decorative SVGs should use `aria-hidden="true"`. Inline SVG inherits page styles and can expose text to screen readers if text is real `<text>` nodes. Raster alt text maps to a single `img alt`—SVG gives more structure if you author it deliberately.
Can I rely on SVG animation in all browsers?: SMIL (`<animate>`, etc.) has uneven support; CSS animations and transforms on SVG elements are widely supported. For complex motion, test target browsers; for critical UI, prefer CSS or a small script. Many teams animate transforms (`transform`, `opacity`) for performance.
What does the viewBox attribute actually do?: `viewBox="min-x min-y width height"` defines the coordinate system mapped into the viewport. It enables scaling: the graphic’s internal units stretch to fit `width`/`height` on the `<svg>` while preserving aspect ratio if `preserveAspectRatio` is left default. Without viewBox, resizing the element may clip or letterbox unexpectedly.
How do I optimize SVG files for the web?: Run SVGO or similar to remove editor metadata, merge paths, and shorten IDs. Strip invisible layers and redundant groups. Prefer CSS for simple fills over duplicated attributes. For icons, consider a sprite or inline symbol defs; validate in a viewer after each aggressive pass.

Ready to try it yourself?

Use SVG Viewer & Preview Online for Free