SVG Format Guide: When, Why, and How to Use Scalable Vector Graphics

A practical guide to SVG — what it is, how it works, when to use it over PNG or JPEG, how to optimize it, and how to convert between SVG and raster formats.

Published February 17, 2026 · Updated February 17, 2026

Every website you visit today is full of SVGs. The logo in the top-left corner, the hamburger menu icon, the social media icons in the footer, the animated loading spinner, the chart in that blog post — there is a very good chance all of those are SVG files. It is the most widely used image format on the modern web that most people have never heard of.

And yet SVG remains widely misunderstood. Developers argue about when to use it. Designers export everything as PNG out of habit. Marketing teams send 4 MB PNG logos that could be 3 KB SVGs. People try to convert photographs to SVG and wonder why the results are terrible.

SVG is a genuinely powerful format, but it has a very specific domain where it excels — and clear boundaries where you should reach for something else instead. This guide covers all of it: what SVG actually is under the hood, when it is the right choice, when it absolutely is not, and how to work with it effectively on the web.

Vector vs. Raster: The Fundamental Difference

Before we talk about SVG specifically, you need to understand the core distinction between the two categories of digital images.

Raster images (JPEG, PNG, WebP, GIF) are grids of colored pixels. A 1920x1080 JPEG is literally 2,073,600 tiny colored squares arranged in a grid. When you zoom in, you eventually see those individual squares. When you scale up beyond the native resolution, the software has to guess what color to put between the existing pixels — and the result is blur.

Vector images (SVG, AI, EPS, PDF) describe shapes using mathematical instructions. A circle is not thousands of colored pixels arranged in a vaguely circular pattern — it is: "draw a circle at coordinates (100, 100) with radius 50, fill it with the color #FF6B35." A line is two endpoints. A curve is a start point, an end point, and control handles. A letter is a series of bezier curves.

This fundamental difference has real consequences:

The key insight is that neither approach is universally better. They solve different problems. A photograph of a sunset has millions of unique color values with organic gradients and noise — describing that mathematically would be absurd. A corporate logo with three geometric shapes and a wordmark has maybe 200 bytes of meaningful information — storing it as millions of pixels is equally absurd.

What SVG Actually Is

SVG stands for Scalable Vector Graphics. It is an XML-based markup language for describing two-dimensional graphics. That definition sounds dry, but every word in it matters.

XML-based means SVG is plain text. You can open an SVG file in any text editor and read it. You can write SVG by hand. You can generate it with code. You can transform it with XSLT. You can parse it with any XML library. You can search through it with grep.

Here is a complete, valid SVG file that draws a red circle:

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

That is 95 bytes. The equivalent PNG at 100x100 pixels would be around 2-4 KB. At 1000x1000 pixels, the PNG would be 20-40 KB. The SVG stays 95 bytes regardless of how large you display it — because the instructions do not change, only the rendering resolution does.

Markup language means SVG is structured like HTML. It has elements, attributes, nesting, and a DOM (Document Object Model). When you embed SVG inline in a web page, every shape becomes a DOM node that you can target with CSS selectors, manipulate with JavaScript, and animate with CSS transitions. A <circle> element is as real to the browser as a <div>.

Scalable is the headline feature. Because the graphics are described mathematically, the browser can render them at any resolution with perfect fidelity. On a standard display, a Retina display, a 4K monitor, or a billboard printer, the same SVG file produces razor-sharp output. No @2x variants needed.

The SVG Element Toolkit

SVG gives you a surprisingly rich set of drawing primitives:

• <rect> — rectangles and rounded rectangles
• <circle> — circles
• <ellipse> — ellipses
• <line> — straight lines
• <polyline> — connected line segments
• <polygon> — closed shapes from line segments
• <path> — arbitrary curves, the powerhouse element that can describe any shape using bezier curves and arc segments
• <text> — editable, searchable, real text (not rasterized glyphs)
• <g> — grouping element for organizing and transforming multiple shapes together
• <defs> and <use> — define reusable components and reference them multiple times
• <filter> — blur, drop shadow, color manipulation, and other pixel-level effects
• <linearGradient> and <radialGradient> — smooth color transitions
• <clipPath> and <mask> — hide parts of shapes using other shapes

Most real-world SVGs are built primarily from <path> elements, because design tools like Figma, Illustrator, and Inkscape export complex shapes as path data. A path like M10 20 C30 40 50 60 70 80 is a series of move-to, line-to, and curve-to instructions — essentially a tiny programming language for drawing.

When SVG Is the Right Choice

SVG is not a general-purpose image format. It is a specialist format that dominates specific categories of visual content. Here is where it genuinely cannot be beaten.

Logos

This is SVG's home turf. A logo needs to work at every imaginable size: 16x16 as a favicon, 200x50 in a website header, 800x200 in a presentation, full-width on a trade show banner. With a raster format, you need multiple files at different resolutions, and at some size you will hit the ceiling of whatever resolution you exported. With SVG, you have one file that is sharp everywhere.

A well-made SVG logo is typically 1-5 KB. The equivalent high-resolution PNG might be 50-200 KB. And the SVG can be recolored with a single CSS rule — dark mode support with zero additional files.

Icons

Icon systems are built on SVG for the same reasons as logos: tiny file sizes, infinite scalability, and CSS control. A typical icon set of 200 icons might total 60-100 KB as optimized SVGs. The same set as PNGs at just two sizes (24px and 48px) would easily exceed 1 MB.

SVG icons can also respond to their context. An icon in a navigation bar can inherit the text color of its parent element. A selected state can be a CSS class that changes the fill color. A hover animation can be a CSS transition on the stroke property. Try doing that with a PNG.

Illustrations and Infographics

Flat-style illustrations — the kind you see on SaaS landing pages, onboarding screens, and explainer sections — are ideal SVG candidates. They use clean shapes, limited color palettes, and sharp edges. An illustration with 50-100 shapes might be 15-30 KB as SVG. The same illustration as a high-quality PNG at a web-friendly resolution could easily be 200-500 KB.

Infographics are an even stronger case because they often contain text. Text in an SVG is real, selectable, translatable text — not pixels shaped like letters. This is better for accessibility, better for SEO, and better for localization.

Charts and Data Visualization

Libraries like D3.js, Chart.js (when using SVG mode), and Recharts render charts as SVG for good reasons. Each bar in a bar chart, each slice of a pie chart, each point on a scatter plot is a distinct DOM element that can be styled, animated, and interacted with independently. Hover a bar to highlight it? That is a CSS :hover on a <rect>. Animate a line chart drawing itself? That is a CSS animation on stroke-dashoffset. Attach a tooltip to a data point? That is a JavaScript event listener on a <circle>.

You cannot get this level of interactivity from a raster chart without building a separate overlay system from scratch.

UI Elements and Decorations

Background patterns, divider ornaments, curved section separators, decorative borders — these are all prime SVG territory. They render crisply at any viewport width, they can be CSS-animated, and they are typically just a few hundred bytes. Many sites inline these directly into their CSS as data URIs.

Simple Animations

SVG supports animation natively through SMIL (Synchronized Multimedia Integration Language) and — more commonly in practice — through CSS animations and JavaScript libraries like GSAP, Anime.js, and Framer Motion. Loading spinners, morphing shapes, path drawing effects, micro-interactions — SVG handles all of these elegantly.

A CSS-animated SVG loading spinner is 500 bytes. An animated GIF of the same spinner would be 10-50 KB and limited to a fixed color palette with aliased edges.

When SVG Is the Wrong Choice

SVG's limitations are just as clear-cut as its strengths. Here is where you should not use it.

Photographs

A photograph of a landscape, a portrait, a food shot, a product in a studio — these should never be SVG. Ever. The reason is simple math: a photograph has continuous-tone color variation across every pixel. Representing that with vector shapes would require one path per pixel (or per small region of similar color), producing an SVG file that is 10-100x larger than the equivalent JPEG, slower to render, and visually inferior.

If someone sends you a 15 MB SVG that is actually a photograph, what they have is a raster image wrapped in an SVG container (using the <image> element). They have all the downsides of both formats and the advantages of neither.

Complex Gradients and Photorealistic Rendering

Even non-photographic imagery becomes problematic for SVG when it involves complex color gradients, texture, noise, or fine detail. A watercolor-style illustration with hundreds of subtle color blends will produce an SVG with thousands of gradient-filled paths and a file size that dwarfs the equivalent PNG or WebP. If the artwork has organic textures, film grain, or painterly brush strokes, raster wins decisively.

A reasonable rule of thumb: if the image has more than a few hundred distinct shapes or more than a dozen gradients, strongly consider rasterizing it.

Highly Detailed Artwork

Detailed technical drawings, architectural plans, or illustrations with thousands of fine lines and micro-details can produce SVGs that are technically correct but painfully slow to render. The browser has to parse and render every path as a separate DOM element, and at some complexity threshold, the rendering cost exceeds what a simple decoded bitmap would cost. If your SVG takes noticeably longer to display than a PNG of the same content, it is too complex for vector delivery.

SVG on the Web

There are three fundamentally different ways to put an SVG on a web page, and each has distinct capabilities and limitations.

1. Inline SVG

Paste the SVG markup directly into your HTML:

<svg viewBox="0 0 24 24" class="icon" aria-hidden="true">
  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>

Advantages: Full CSS styling, JavaScript interaction, animation, no extra HTTP request, part of the DOM, can inherit currentColor for dynamic coloring.

Disadvantages: Increases HTML document size, cannot be cached independently from the page, makes your markup verbose.

Best for: Icons, UI elements, anything that needs to respond to CSS or JavaScript.

2. As an <img> Element

Reference the SVG file like any other image:

<img src="/logo.svg" alt="Company Logo" width="200" height="60">

Advantages: Standard caching behavior, clean HTML, lazy loading support, familiar syntax.

Disadvantages: No CSS styling of internal SVG elements, no JavaScript access, no animation of individual paths, treated as an opaque image.

Best for: Logos, illustrations, decorative images where you do not need to style individual elements.

3. As a CSS Background

Apply the SVG as a background image:

.hero-pattern {
  background-image: url('/pattern.svg');
  background-repeat: repeat;
}

Or inline it as a data URI:

.divider {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0 5 Q25 0 50 5 T100 5' stroke='%23ccc' fill='none'/%3E%3C/svg%3E");
}

Advantages: Keeps markup clean, great for patterns and textures, data URIs eliminate the HTTP request entirely.

Disadvantages: No DOM access, no interactivity, no animation, data URIs are not cached separately.

Best for: Background patterns, decorative textures, section dividers.

Accessibility

SVG accessibility is often overlooked, which is a shame because SVG actually has excellent accessibility support when used correctly.

For decorative SVGs (icons next to text, background ornaments), add aria-hidden="true" and the browser will skip them entirely for screen readers.

For meaningful SVGs (a logo that is the only link to the homepage, a chart that conveys data), you need to provide accessible information:

<svg role="img" aria-labelledby="logo-title logo-desc">
  <title id="logo-title">Fileza</title>
  <desc id="logo-desc">Free browser-based file converter</desc>
  <!-- paths here -->
</svg>

The <title> element acts as the equivalent of an alt attribute on an <img>, and <desc> provides a longer description. The role="img" tells assistive technology to treat the entire SVG as a single image rather than trying to parse each shape.

SVG Sprite Sheets

If your site uses dozens of icons, loading each as a separate file creates unnecessary HTTP requests. The solution is an SVG sprite sheet — a single SVG file that contains all your icons as <symbol> elements, referenced individually with <use>:

<!-- Define the sprite (usually in a hidden block or a separate file) -->
<svg style="display: none;">
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </symbol>
  <symbol id="icon-menu" viewBox="0 0 24 24">
    <path d="M4 6h16M4 12h16M4 18h16"/>
  </symbol>
</svg>

<!-- Use anywhere on the page -->
<svg class="icon"><use href="#icon-search"/></svg>
<svg class="icon"><use href="#icon-menu"/></svg>

One file, one request, full CSS control, cacheable, and no duplication. This is how most production icon systems work.

CSS Styling and Animation

Inline SVGs and SVGs referenced via <use> can be styled with CSS, which opens up powerful possibilities:

/* Recolor icons based on context */
.nav-link svg { fill: currentColor; }
.nav-link:hover svg { fill: var(--accent-color); }

/* Animate a path drawing itself */
.draw-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw 1.5s ease forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* Rotate a loading spinner */
.spinner {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

You can animate fill, stroke, stroke-width, stroke-dashoffset, opacity, transform, and virtually any SVG presentation attribute. This gives you smooth, GPU-accelerated animations with zero JavaScript and zero additional assets.

SVG Optimization

SVGs exported from design tools (Figma, Illustrator, Sketch, Inkscape) are almost always bloated with unnecessary data. A logo that should be 800 bytes might export as 8 KB because the tool includes editor metadata, redundant attributes, excessive decimal precision, empty groups, and inline styles that could be simplified.

What to Optimize

Editor metadata. Illustrator embeds massive XML comments, Inkscape adds sodipodi: and inkscape: namespaces, Sketch adds generator tags. None of this affects rendering. Remove all of it.

Unnecessary attributes. version="1.1", xmlns:xlink (if not using xlink), xml:space="preserve", enable-background — these are either defaults or legacy attributes that modern browsers ignore.

Excessive precision. Design tools often export path coordinates with 6-8 decimal places: M12.345678 23.456789. In practice, 1-2 decimal places are sufficient for web use. Rounding d="M12.345678 23.456789 L45.678901 67.890123" to d="M12.35 23.46 L45.68 67.89" saves bytes and produces no visible difference.

Redundant groups. Empty <g> elements, groups that contain a single child, nested groups with no attributes — these add DOM complexity without contributing anything to the visual output.

Inline styles vs. attributes. style="fill:#ff0000" is longer than fill="#f00". CSS shorthand hex colors save bytes.

SVGO: The Standard Optimization Tool

SVGO (SVG Optimizer) is the industry-standard tool for SVG optimization. It is used by most build pipelines, design tools, and web frameworks.

SVGO applies a configurable set of plugins that clean up SVG files automatically:

• Remove editor metadata and comments
• Remove empty containers and unused definitions
• Collapse unnecessary groups
• Round numeric values to configurable precision
• Convert colors to shortest representation
• Minimize path data
• Remove hidden elements
• Merge redundant paths (when safe)
• Convert shapes to shorter path equivalents

Real-World Optimization Results

The savings from optimization are significant and consistent:

After SVGO, the file can be further reduced with standard gzip or Brotli compression during HTTP delivery. A 2 KB optimized SVG typically compresses to 600-800 bytes with gzip — smaller than most favicons.

Manual Optimization Tips

Beyond automated tools, a few manual practices help keep SVGs lean:

• Design with a grid. Shapes that align to integer coordinates produce cleaner path data than arbitrary positions.
• Use viewBox instead of fixed width/height. viewBox="0 0 24 24" lets the SVG scale to any container, and you control the size with CSS. Hardcoding width="200" height="200" locks you in.
• Prefer basic shapes over paths when possible. <circle cx="12" cy="12" r="10"/> is more readable and often shorter than the equivalent <path> data. Some optimization tools convert in the other direction, so check your output.
• Combine paths that share the same fill/stroke. Two <path> elements with fill="#333" can sometimes be merged into one <path> with a combined d attribute, eliminating one element from the DOM.

Converting SVG to Raster Formats

Even though SVG is the better format for logos, icons, and graphics, there are many real-world situations where you need a raster version.

Why You Would Need a Raster Export

Email. Most email clients (Outlook, Gmail, Yahoo Mail) have limited or zero SVG support. If your email signature has a logo, it needs to be PNG. If your newsletter has an illustration, it needs to be PNG or JPEG.

Social media. Twitter/X, Facebook, LinkedIn, Instagram — none of them accept SVG uploads. Your open graph image, your profile picture, your post images all need to be raster formats.

Legacy systems. Older CMS platforms, document editors (Word, Google Docs for inline images), print services, and enterprise applications often do not support SVG.

App icons. Both iOS and Android require app icons as PNG files at specific pixel dimensions. You design the icon as SVG for scalability, then export PNGs at the required sizes (180x180, 192x192, 512x512, etc.).

Favicon fallback. While modern browsers support SVG favicons, older browsers and some social media crawlers still expect a favicon.ico or PNG.

Choosing Output Dimensions

The biggest advantage of converting from SVG is that you get to choose the exact output resolution. Because the source is vector, there is no quality ceiling — you are rendering math to pixels, not upscaling existing pixels.

Common dimension targets:

When converting with Fileza, you upload your SVG, select your output format (PNG for transparency, JPEG for photographs or smaller files, WebP for web-optimized output), and specify the dimensions. The conversion happens entirely in your browser using the Canvas API — your SVG is rendered to a canvas element at the target resolution and then exported as the chosen raster format. No files leave your machine.

Background Color for Transparent SVGs

Many SVGs have transparent backgrounds (no explicit background rectangle). When converting to JPEG — which does not support transparency — you need to decide what color replaces the transparent areas. White is the most common choice, but some use cases call for a specific brand color or black.

PNG and WebP both support transparency, so if your SVG has a transparent background and you want to keep it, choose one of those formats.

Converting Raster to "SVG"

This is the conversion that people ask about constantly, and the answer is almost always disappointing.

Auto-Trace: What It Actually Does

Auto-tracing (also called vectorization or image tracing) takes a raster image and attempts to create vector paths that approximate the shapes in it. Tools like Potrace, Adobe Illustrator's Image Trace, and Inkscape's Trace Bitmap do this by:

1. Converting the image to high-contrast regions (thresholding)
2. Detecting edges between regions
3. Fitting bezier curves to those edges
4. Outputting the curves as SVG paths

For certain kinds of images, this works well:

• Black and white line art — pen drawings, sketches, scanned signatures
• Simple logos with flat colors — if you have a low-res PNG of a logo and need it as SVG
• Silhouettes and high-contrast graphics — icons, stencil art

For everything else, the results range from mediocre to useless:

• Photographs produce SVGs with tens of thousands of paths that look like abstract art and weigh 5-50 MB
• Gradients become bands of flat color with visible stepping
• Fine details (hair, fur, fabric texture) are either lost or converted to noise
• Text becomes outlines that are no longer editable or searchable

The Honest Truth About Vectorization

True vectorization — converting a raster image into a clean, well-structured SVG that looks like it was designed in a vector tool — requires human judgment. A skilled designer will redraw the image using proper shapes, choose where to simplify, decide which details matter and which are noise, and produce a clean file with named layers and logical grouping. No automated tool can make those decisions reliably.

If you need a raster image converted to a proper SVG, you have two realistic options:

1. Redraw it manually in a vector tool (Figma, Illustrator, Inkscape). This takes time but produces the best results.
2. Use auto-trace as a starting point and then clean up the output by hand. This is faster for simple, high-contrast graphics but still requires manual work.

What you should not do is auto-trace a photograph, get a 20 MB file full of jagged paths, and call it an SVG conversion. That is technically an SVG, but it is worse than the original raster image in every measurable way.

SVG vs. PNG vs. JPEG: The Decision Matrix

Choosing between SVG and raster formats comes down to the content of the image:

The general principle: if the image is made of shapes, use SVG. If it is made of pixels, use a raster format.

Performance Considerations

SVG's performance characteristics are different from raster images, and understanding the trade-offs helps you make better decisions.

File transfer: SVGs are almost always smaller over the wire for logos, icons, and simple graphics. A 2 KB SVG with Brotli compression transfers as roughly 600 bytes. A 2x retina PNG of the same logo might be 15-30 KB even after PNG optimization.

Parse and render cost: SVGs are XML, so the browser must parse the markup and construct DOM nodes before rendering. For simple SVGs (icons, logos), this is negligible. For complex SVGs with thousands of paths, the parsing and rendering cost can exceed that of simply decoding a raster image. The threshold varies by device, but as a rough guideline, SVGs over 100 KB or with more than 2,000-3,000 path elements may render more slowly than equivalent PNGs on lower-end devices.

DOM weight: Every element in an inline SVG is a DOM node. A page with 200 inline SVG icons has 200+ extra DOM elements, each with event handling overhead and memory cost. SVG sprites with <use> references mitigate this by keeping the definitions in one place, but the rendered instances still create shadow DOM nodes.

Caching: External SVG files (<img src="icon.svg">) benefit from standard HTTP caching. Inline SVGs are cached as part of the HTML document — if your HTML is not cacheable, your SVGs are re-downloaded on every page load. For icon systems, external sprite sheets with aggressive caching headers are often the best strategy.

GPU acceleration: Raster images are decoded to bitmaps and composited by the GPU efficiently. SVGs are rendered on the CPU (unless explicitly GPU-layered via CSS transforms or will-change). For animations, this means SVG animations can be more CPU-intensive than CSS animations on raster images or canvas-rendered content.

Conclusion

SVG is one of those technologies that, once you understand it properly, makes you wonder how you ever worked without it. A single file that renders perfectly at any size, can be styled with CSS, animated with transitions, and weighs less than a typical JPEG thumbnail — that is genuinely remarkable engineering.

But it is a specialist tool, not a universal one. SVG excels at shapes: logos, icons, illustrations, charts, UI elements, patterns. It fails at pixels: photographs, textures, complex organic imagery. Knowing which category your image falls into is the entire decision.

For the cases where you need to bridge the two worlds — exporting an SVG logo as a PNG for an email signature, or generating social media images from vector source files — Fileza handles the conversion entirely in your browser. Upload the SVG, pick your output format and dimensions, and get a crisp raster file without uploading anything to a server.

The best workflow is to keep your source files as SVG whenever possible, and export to raster formats only when a specific platform or context requires it. Your SVG is the master, and everything else is a derivative. That way, when you need a new size, a new format, or a new color variant, you always have the lossless, infinitely scalable original to work from.