SVG Guide: Create, Optimize, and Convert SVGs for the Web

If you have been building websites for any length of time, you have encountered the moment: a designer hands you a logo, you drop it into your page, and it looks perfect on your laptop screen. Then you check it on a 4K monitor and the edges are fuzzy. You switch to a phone and it is either blurry or enormous. You try to change the color with CSS and nothing happens. The image is a PNG, or worse, a JPEG, and you are fighting a battle that SVG solved two decades ago.

SVG (Scalable Vector Graphics) is one of the most powerful and most underused formats in web development. It is not new — the W3C published the first specification in 2001 — but the tooling, browser support, and developer understanding have matured to the point where SVG should be a first-class citizen in every web project. This guide covers everything you need to know: what SVG is, how to create it, how to optimize it, how to animate it, and how to convert between formats when you need to.

What Is SVG and Why Should You Care#

SVG is an XML-based markup language for describing two-dimensional vector graphics. Unlike raster formats (PNG, JPEG, WebP) that store images as grids of pixels, SVG stores images as mathematical descriptions of shapes. A circle is not thousands of colored pixels — it is a center point and a radius.

This distinction has profound practical consequences:

• Infinite scalability. An SVG looks sharp at any size, from a 16px favicon to a billboard. No @2x or @3x variants needed.
• Tiny file sizes. A simple icon that weighs 15 KB as a PNG might be 800 bytes as an SVG.
• CSS and JavaScript control. You can style SVG elements with CSS, animate them, change colors on hover, respond to click events.
• Accessibility. SVG supports <title> and <desc> elements that screen readers can announce.
• SEO. Search engines can index text content inside SVGs.
• DOM integration. Inline SVG is part of the document, queryable with document.querySelector, styleable with your existing CSS.

The tradeoff is that SVG is not suitable for photographs or complex raster imagery. A photo of a landscape should be JPEG or WebP. But icons, logos, illustrations, charts, diagrams, UI elements, and decorative graphics should almost always be SVG.

SVG vs Raster: When to Use Which#

Here is a practical decision framework:

If your graphic has fewer than a few hundred paths, SVG will almost certainly be smaller and sharper. If it has thousands of paths (like a vectorized photograph), a raster format may actually be smaller. When in doubt, try our Image Compressor to compare output sizes.

Creating SVGs: From Code to Editor#

Writing SVG by Hand#

SVG is XML, and simple shapes are remarkably easy to write by hand. Here is a complete SVG that draws a blue circle with a dark border:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="45" fill="#3B82F6" stroke="#1E3A5F" stroke-width="3"/>
</svg>

And here is a more practical example — a simple notification bell icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="2" stroke-linecap="round"
     stroke-linejoin="round">
  <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
  <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
</svg>

Notice stroke="currentColor". That single attribute makes the icon inherit whatever CSS color is set on its parent element, which means one SVG works for light mode, dark mode, and any theme you build in the future.

Core SVG Elements#

The most commonly used SVG elements:

• <rect> — Rectangles. Attributes: x, y, width, height, rx (corner radius).
• <circle> — Circles. Attributes: cx, cy, r.
• <ellipse> — Ellipses. Attributes: cx, cy, rx, ry.
• <line> — Lines. Attributes: x1, y1, x2, y2.
• <polyline> — Connected line segments. Attribute: points.
• <polygon> — Closed shapes. Attribute: points.
• <path> — The power tool. Can describe any shape with a compact path data string (d attribute).
• <text> — Rendered text that remains selectable and accessible.
• <g> — Group element for applying transforms or styles to multiple elements.

For anything beyond basic shapes, you will want a visual editor. Our SVG Editor lets you draw, import, and export SVGs directly in the browser without installing anything.

Understanding viewBox: The Key to Responsive SVG#

The viewBox attribute is the single most important concept to understand, and the one that trips up most developers. It defines the internal coordinate system of the SVG — the "virtual canvas" that your shapes are drawn on.

<svg viewBox="0 0 200 100" width="400" height="200">
  <rect x="10" y="10" width="180" height="80" fill="#10B981"/>
</svg>

The viewBox="0 0 200 100" means the SVG's internal coordinate space runs from (0,0) to (200,100). The width="400" and height="200" on the outer element mean it renders at 400 by 200 pixels on screen. The browser scales the internal coordinate space to fit the display size — in this case, a 2x scale.

The magic happens when you remove the explicit width and height:

<svg viewBox="0 0 200 100">
  <rect x="10" y="10" width="180" height="80" fill="#10B981"/>
</svg>

Now the SVG will stretch to fill its container while maintaining its 2:1 aspect ratio (controlled by preserveAspectRatio, which defaults to xMidYMid meet). This is how you make SVGs truly responsive — set the viewBox, remove fixed dimensions, and control the size with CSS:

.icon {
  width: 2rem;
  height: auto;
}
 
.hero-illustration {
  width: 100%;
  max-width: 600px;
  height: auto;
}

SVG Optimization: Cutting File Sizes by 80 Percent#

SVGs exported from design tools carry enormous amounts of unnecessary data. Editor metadata, redundant attributes, excessive decimal precision, empty groups, invisible elements, and verbose path data can make an SVG three to ten times larger than it needs to be.

What Optimization Removes#

Here is a real-world example. An icon exported from a design tool:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 27.0.0, SVG Export Plug-In -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;"
     xml:space="preserve">
  <style type="text/css">.st0{fill:none;stroke:#000000;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;}</style>
  <g id="Layer_2">
    <g id="Layer_3">
      <path class="st0" d="M12.0000,2.0000 L2.0000,7.0000 L12.0000,12.0000
        L22.0000,7.0000 L12.0000,2.0000 Z"/>
    </g>
  </g>
</svg>

After optimization:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
     stroke="#000" stroke-width="2" stroke-linecap="round"
     stroke-linejoin="round">
  <path d="M12 2L2 7l10 5 10-5L12 2z"/>
</svg>

The optimized version is about 75 percent smaller. The XML declaration, editor comments, redundant attributes, empty groups, excessive decimal precision, and verbose path notation are all gone. The visual output is identical.

Optimization Best Practices#

1. Remove editor metadata. XML declarations, comments, and generator tags serve no browser purpose.
2. Collapse unnecessary groups. Empty <g> wrappers add bytes without meaning.
3. Shorten path data. Use relative commands, remove trailing zeros, combine segments.
4. Reduce decimal precision. Most icons need at most 1-2 decimal places, not 4.
5. Merge duplicate attributes. Move repeated fill/stroke values to a parent element.
6. Remove hidden elements. Zero-opacity or display-none elements waste bytes.
7. Convert shapes to paths. Sometimes a <rect> is more compact; sometimes a <path> is. Optimization tools make the right call.

You can run these optimizations automatically with our SVG Optimizer — paste your SVG, get an optimized version instantly, and see exactly how many bytes were saved.

Animating SVGs#

SVG animations are one of the format's superpowers. You can animate any attribute — position, color, opacity, path shape, stroke offset — with either CSS or SMIL (SVG's native animation syntax).

CSS Animations#

CSS animations on SVG elements work exactly like CSS animations on HTML elements:

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
.loading-spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

A popular technique is animating stroke-dasharray and stroke-dashoffset to create a line-drawing effect:

.draw-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease forwards;
}
 
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

This makes a path appear to draw itself on screen — a visually striking effect that requires zero JavaScript and adds zero weight beyond the CSS rule.

SMIL Animations#

SMIL (Synchronized Multimedia Integration Language) animations are declared directly in the SVG markup:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="20" fill="#EF4444">
    <animate attributeName="r" values="20;35;20" dur="1.5s"
             repeatCount="indefinite"/>
    <animate attributeName="opacity" values="1;0.5;1" dur="1.5s"
             repeatCount="indefinite"/>
  </circle>
</svg>

This creates a pulsing circle that grows and fades, then returns — all without CSS or JavaScript. SMIL animations are self-contained, which makes them ideal for animated icons and loading indicators that need to work in contexts where CSS is not available (like some email clients or embedded contexts).

SVG Accessibility#

Accessibility is not optional, and SVG provides good tools for it when used correctly.

Decorative SVGs#

If the SVG is purely decorative and adds no informational value, hide it from assistive technology:

<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
  <!-- decorative content -->
</svg>

Informative SVGs#

If the SVG conveys information, provide a text alternative:

<svg viewBox="0 0 24 24" role="img" aria-labelledby="icon-title icon-desc">
  <title id="icon-title">Warning</title>
  <desc id="icon-desc">A yellow triangle with an exclamation mark,
    indicating a warning condition</desc>
  <path d="M12 2L1 21h22L12 2z" fill="#F59E0B"/>
  <text x="12" y="17" text-anchor="middle" fill="#000"
        font-size="14" font-weight="bold">!</text>
</svg>

The <title> element serves as the accessible name (like alt on images), and <desc> provides a longer description when needed. The role="img" ensures screen readers treat the SVG as a single image rather than traversing its child elements.

Inline SVG vs External SVG: Tradeoffs#

There are three ways to put an SVG on a page, each with different implications:

Inline SVG (in the HTML)#

<button>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M5 12h14M12 5l7 7-7 7" />
  </svg>
  Next
</button>

Pros: Full CSS control, no extra HTTP request, immediate rendering, JavaScript interaction. Cons: Increases HTML size, not cached separately, duplicated if used multiple times.

External via <img>#

<img src="/icons/arrow.svg" alt="Arrow" width="24" height="24" />

Pros: Cached by browser, clean HTML, lazy-loadable. Cons: No CSS styling of internals, no JavaScript interaction, extra HTTP request.

External via CSS background-image#

.icon-arrow {
  background-image: url("/icons/arrow.svg");
  width: 24px;
  height: 24px;
}

Pros: Cached, keeps HTML clean, works in pseudo-elements. Cons: No styling, no accessibility, no interaction.

The rule of thumb: If you need to style or animate the SVG, inline it. If it is static and used across many pages, reference it externally. For icon systems, consider an SVG sprite sheet that combines the caching benefit of external files with the styling benefit of inline SVGs.

Making SVGs Responsive#

A responsive SVG adapts to its container without fixed dimensions. The recipe:

1. Set viewBox with your design dimensions.
2. Remove width and height attributes from the <svg> element (or set them to 100%).
3. Control size with CSS on the SVG element or its container.

<svg viewBox="0 0 800 400" class="responsive-chart">
  <!-- chart content -->
</svg>

.responsive-chart {
  width: 100%;
  height: auto;
  max-width: 800px;
}

For complex responsive behavior where you want different content at different sizes, use CSS media queries to show or hide SVG groups:

@media (max-width: 640px) {
  .desktop-labels {
    display: none;
  }
  .mobile-labels {
    display: block;
  }
}

This is impossible with raster images and is one of SVG's most practical advantages for data visualizations and infographics.

Converting Between Formats#

Sometimes you need an SVG as a PNG — for social media cards, email headers, or platforms that do not support SVG. And sometimes you have a raster image that you want to trace into vector form.

SVG to raster: Use our SVG to PNG converter to export at any resolution. Because the source is vector, you can export a crisp 4096px image from a 24px icon — something impossible with raster-to-raster upscaling.

Raster to SVG: Our PNG to SVG converter traces raster images into vector paths. This works best on images with clean edges and limited colors (logos, icons, line art). Photographs will produce very large, impractical SVG files.

Performance Considerations#

SVG is not automatically faster than raster. A few things to watch:

• DOM complexity. Each SVG element is a DOM node. A map with 50,000 path elements will bog down the browser. For complex visualizations, consider <canvas> instead.
• Filter effects. SVG filters (<feGaussianBlur>, <feDropShadow>) are GPU-intensive. Use sparingly, especially on mobile.
• Animation performance. Animate transform and opacity for GPU-composited animations. Animating d (path data) or fill triggers repaints.
• File size. An unoptimized SVG can be larger than a well-compressed PNG of the same image. Always optimize.

A good workflow: design in your preferred tool, export as SVG, run it through an optimizer, test rendering performance, and convert to PNG only where SVG is not supported. The SVG Optimizer handles the optimization step, and the SVG Editor lets you make quick adjustments without going back to your design tool.

Quick Reference Checklist#

Before shipping an SVG to production, run through this list:

• viewBox is set and matches the design dimensions
• Fixed width/height removed if the SVG should be responsive
• Editor metadata and comments stripped
• Path data optimized (short commands, minimal decimal places)
• currentColor used where the icon should inherit text color
• Accessibility attributes set (aria-hidden for decorative, <title> for informative)
• File size compared against an equivalent PNG to confirm SVG is the right choice
• Animation performance tested on mobile if animations are present

SVG is not a silver bullet, but for the categories of graphics where it excels — icons, logos, illustrations, charts, and UI elements — it delivers sharper rendering, smaller files, better accessibility, and more design flexibility than any raster format. The tooling to create, optimize, and convert SVGs is mature and free. If you are still serving 4x PNG sprites for your icon system, now is the time to make the switch.