SVG is fundamentally different from every other image format in this guide. JPEG, PNG, WebP, and AVIF store pixels — grids of colored dots that look worse when you zoom in. SVG stores instructions: "draw a circle at position 50,50 with radius 40, fill it red." The browser renders those instructions at whatever resolution the display needs. A 3KB SVG logo looks sharp on a 4K monitor, a phone screen, and a billboard.

This makes SVG the unambiguous best choice for logos, icons, charts, diagrams, and any graphic composed of geometric shapes and text. But SVG has sharp boundaries: it's terrible for photographs, carries security risks that other image formats don't, and its XML verbosity can backfire on complex illustrations.

This guide covers the technical architecture, practical use cases, performance optimization, security considerations, and the specific scenarios where SVG is the wrong choice. Need to convert? Convert SVG to PNG for raster output, or SVG to JPG for photos-in-vector that shouldn't be vectors.

How SVG Works: XML Under the Hood

An SVG file is a text file containing XML markup. Open one in a text editor and you'll see elements like <rect>, <circle>, <path>, <text>, and <g> (group). Each element has attributes defining its position, size, color, and styling.

A minimal SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#3b82f6"/></svg>

That's 99 bytes for a crisp blue circle at any resolution. The equivalent PNG at 1000x1000 would be 5-15KB. At 4000x4000, 40-80KB. The SVG stays 99 bytes regardless of display size.

The viewBox attribute defines the coordinate system. The SVG above uses a 100x100 coordinate space, but the browser can render it at 16x16 (favicon), 200x200 (thumbnail), or 2000x2000 (hero image) with equal sharpness. This resolution independence is SVG's core advantage.

Core SVG Elements and Capabilities

Shapes, Paths, and Text

Basic shapes: <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>. These cover most geometric UI elements with minimal markup.

Paths: The <path> element uses a mini-language of drawing commands (M=moveto, L=lineto, C=cubic Bezier, A=arc, Z=close). Nearly every complex SVG shape is a path — logos, icons, map outlines, and custom illustrations are all defined as path data. A typical icon path might be 200-500 characters; a complex illustration path might be 10,000+.

Text: SVG <text> elements render actual selectable, searchable text. The text reflows with the SVG's coordinate system, can be styled with any web font, and is accessible to screen readers. This is a significant advantage over rasterized text in PNG or JPEG, which is just pixels shaped like letters — unsearchable and inaccessible.

Filters, Gradients, and Effects

SVG supports Gaussian blur, drop shadows, color matrix transforms, displacement maps, and other filters via the <filter> element. Gradients (<linearGradient>, <radialGradient>) define smooth color transitions. Clip paths and masks control visibility regions.

These features let SVG replicate many Photoshop-style effects: glows, shadows, color overlays, and masking — all in vector, all resolution-independent. However, complex filter stacks on large SVGs can be expensive to render. A 50KB SVG with 15 blur filters might render slower than a 200KB PNG of the same visual output. Test rendering performance on target devices for complex SVGs.

Embedded Raster Images

SVG can embed raster images via the <image> element — either as external URLs or base64-encoded data URIs. This lets you combine vector elements (text, shapes, annotations) with raster content (photos, textures) in a single file.

The trade-off: embedded raster images make the SVG file size dependent on the raster data. A diagram SVG with a base64-encoded photograph can easily be 500KB+, losing SVG's file size advantage entirely. Use this sparingly — only when vector and raster must be composed in one document.

SVG Animation: SMIL, CSS, and JavaScript

SVG supports three animation approaches, each with different tradeoffs.

CSS Animation (Recommended)

Standard CSS transitions and animations work on SVG elements. You can animate transform, opacity, fill, stroke, and other properties using @keyframes and transition. CSS animations are hardware-accelerated in modern browsers, performant, and familiar to any frontend developer.

CSS is the right choice for most SVG animations: loading spinners, hover effects, icon transitions, chart animations, and UI micro-interactions. The animations are declarative, performant, and don't require JavaScript.

SMIL Animation

SMIL (Synchronized Multimedia Integration Language) is SVG's built-in animation system using elements like <animate>, <animateTransform>, and <animateMotion>. SMIL can animate attributes that CSS can't easily reach — like moving an element along a path or morphing between two path shapes.

The catch: Chrome threatened to deprecate SMIL in 2015, then reversed course. As of 2026, SMIL works in all major browsers, but its future is uncertain. For anything CSS can handle, prefer CSS. Use SMIL only for path-specific animations that CSS can't replicate.

JavaScript Animation

Since SVG elements are DOM nodes, JavaScript can manipulate any attribute — positions, colors, paths, transforms — using requestAnimationFrame or animation libraries (GSAP, Anime.js, Framer Motion). JavaScript animation offers the most control: physics-based easing, interactive animations, data-driven transitions for charts.

The downside: JavaScript animations require a script context, so they won't work in SVGs loaded via <img> tags (which strip scripts for security). They work in inline SVG and SVGs loaded via <object> or <iframe>.

Security: The Risk Other Formats Don't Have

Because SVG is XML that can contain JavaScript, it carries security risks that raster formats don't. A malicious SVG can include:

  • <script> tags that execute JavaScript (XSS attacks)
  • External resource references that leak user data or load malicious content
  • CSS @import rules that fetch remote resources
  • Extremely complex paths that cause denial-of-service by consuming rendering resources (SVG bomb)
  • Entity expansion attacks (XML billion laughs) that consume memory

Mitigation for user-uploaded SVGs: Sanitize SVG XML before serving. Strip all <script> elements, event handler attributes (onclick, onload), <foreignObject>, and external references. Libraries like DOMPurify handle this. Alternatively, serve user SVGs from a separate domain with restrictive CSP headers.

For your own SVGs: If you control the SVG source, security isn't a concern. SVGs from design tools like Figma, Illustrator, or Inkscape don't contain scripts (unless you add them manually).

The img tag sandbox: When SVG is loaded via <img src="logo.svg">, browsers automatically strip all scripts and block external resources. This is safe but limits SVG to static rendering — no animation via JavaScript, no external font loading, no interactive hover effects.

Accessibility and SEO

SVG has richer accessibility support than any raster format. A PNG with text is just pixels — screen readers can't read the text, and search engines can't index it. SVG text is real text.

Accessible SVG checklist:

  • Add role="img" to the root <svg> element
  • Include a <title> element as the first child (acts as alt text)
  • Add a <desc> element for longer descriptions
  • Use aria-labelledby pointing to the title and desc IDs
  • For decorative SVGs, use role="presentation" and aria-hidden="true"

Search engines index SVG text content. A chart rendered as SVG has its labels, values, and annotations indexable. The same chart as PNG is an opaque image with alt text as the only searchable content.

SVG Icon Systems

SVGs have become the standard for web icon systems, replacing icon fonts (which had sizing/alignment issues and accessibility problems).

Inline SVG: Paste the SVG directly into HTML. Maximum flexibility — full CSS styling, animation, and JavaScript interaction. The downside: the SVG markup adds to your HTML document size and can't be cached separately from the page.

SVG sprite sheets: Combine multiple icons into a single SVG file using <symbol> elements, reference them with <use href="#icon-name">. One HTTP request for all icons, browser caches the sprite file, and individual icons are referenced by ID. File size for 50-100 icons is typically 15-40KB (gzipped: 5-15KB).

External SVG files: Load each icon as a separate <img src="icon.svg">. Simplest to manage but loses styling capabilities (can't change colors with CSS). HTTP/2 makes the multiple-request overhead negligible.

The recommended approach: inline SVG for icons that need dynamic styling (color changes, animation), sprite sheet for the standard icon set, and external files for rarely-used or third-party icons.

When Raster Is Better Than SVG

SVG is the wrong choice when the content is inherently raster:

Photographs: Never convert photos to SVG. A vectorized photograph (traced with a tool like Potrace) is either a low-fidelity posterized approximation or an enormous file. A 12MP photo as SVG could be 5-50MB versus 200KB as JPEG. The math doesn't work.

Complex illustrations with many gradients and textures: Photorealistic digital paintings, watercolor-style illustrations, and images with dozens of gradient layers produce SVGs with thousands of path elements and gradient definitions. At some complexity threshold, the SVG file is larger and renders slower than an optimized PNG or WebP.

Screenshots: Screenshots contain rasterized text, UI elements, and potentially photographic regions. They should be PNG (lossless text clarity) or WebP (smaller with acceptable quality). SVG adds no value here.

The rule of thumb: If the original was created as vector (in Figma, Illustrator, or code), keep it as SVG. If the original was captured or generated as pixels (camera, screenshot, render), use a raster format.

SVG Optimization

SVGs from design tools like Illustrator, Figma, and Sketch contain significant bloat: editor metadata, unused definitions, excessive decimal precision, and redundant attributes. Optimization can reduce file size by 30-80%.

SVGO (SVG Optimizer) is the standard tool. It's a Node.js tool with plugins that remove metadata, collapse groups, convert shapes to shorter path equivalents, reduce decimal precision, and minimize markup. A typical Figma export at 8KB becomes 3KB after SVGO.

Manual optimization tips:

  • Remove id attributes you don't reference (Figma assigns IDs to everything)
  • Reduce path decimal precision from 6+ places to 1-2 for icons (saves 30-40% on path data)
  • Use viewBox instead of fixed width/height for responsive sizing
  • Remove XML comments, <metadata>, and editor-specific namespaces
  • Gzip/Brotli compression on the server reduces SVG transfer size by 60-80% beyond SVGO optimization

A well-optimized SVG icon: 200-800 bytes. A well-optimized SVG illustration: 2-20KB. With Brotli compression on transfer: half that again.

Converting SVG to Raster Formats

When you need a raster version of an SVG — for social media uploads, email, or platforms that don't support SVG — the conversion requires specifying output dimensions since SVG has no inherent pixel resolution.

SVG to PNG: The most common conversion. PNG preserves SVG transparency and produces sharp text and edges. Specify the dimensions you need — a 1024x1024 PNG from SVG gives you a crisp file for most use cases. Convert SVG to PNG here.

SVG to JPG: For photographs or content going to email/print where transparency isn't needed. The SVG's transparent background becomes white (or whatever default the converter uses). Convert SVG to JPG here.

SVG to ICO: For favicon generation. Converts to multi-resolution ICO container with 16x16, 32x32, and 48x48 versions. Convert SVG to ICO here.

SVG to WebP: For optimized web delivery when SVG isn't practical (email newsletters, platforms without SVG support). Convert SVG to WebP here.

SVG is the only image format that gets better as screens get sharper. While raster formats need larger files for higher resolutions, SVG stays the same size and renders perfectly everywhere. For the content types it excels at — logos, icons, charts, diagrams, and geometric illustrations — nothing else comes close.

When you need raster output from SVG — for social media, email, or platforms that don't support vector — ChangeThisFile handles the conversion: SVG to PNG, SVG to JPG, SVG to ICO, and SVG to WebP. Going the other direction? Convert raster icons to vector in a design tool first — automated raster-to-SVG tracing rarely produces clean results.