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

v1.0.0

Preview SVG code in real time, validate markup, upload files, copy output, and download rendered SVG.

SVG Code

Preview

SVG preview will appear here

SVG Code

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.

Read the full guide →

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.