SVG Complete Guide — Everything About Scalable Vector Graphics

SVG has been around since 1999, yet most people still export everything as PNG. That's a shame, because SVG gives you resolution independence, tiny file sizes for simple graphics, CSS styling, animation, and full accessibility. Let's go through all of it.

What Makes SVG Different

Raster formats (PNG, JPEG, WebP) store pixels. Zoom in and they blur. SVG stores instructions — draw a line from here to there, fill this shape with blue, curve along these control points. The browser or viewer executes those instructions at whatever resolution the display needs.

This means a single SVG file looks perfect on a 72 DPI screen and a 300 DPI retina display. No @2x variants needed.

The viewBox Attribute

This trips up nearly everyone. The viewBox defines the coordinate system inside the SVG. The width and height attributes define how much space the SVG occupies on the page.

<svg viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="tomato"/>
</svg>

The circle is drawn at coordinates (50, 50) in a 100x100 coordinate space, then the whole thing is scaled up to 200x200 pixels on screen. Change width and height without touching viewBox and everything scales proportionally.

Paths: The Building Block

Almost every complex SVG shape is a . The d attribute contains a mini-language of drawing commands:

• M — move to (pick up the pen)
• L — line to
• C — cubic Bezier curve
• A — arc
• Z — close the path

<path d="M 10 80 C 40 10, 65 10, 95 80" stroke="black" fill="none"/>

That draws a smooth curve. Tools like Figma and Illustrator generate these paths for you — you rarely write them by hand unless you're tweaking specific points.

Styling SVG with CSS

SVG elements accept CSS properties, though the property names differ slightly from HTML. fill instead of background-color, stroke instead of border-color.

.icon-path {
  fill: #333;
  stroke: #666;
  stroke-width: 2;
  transition: fill 0.2s ease;
}
.icon-path:hover {
  fill: #0066cc;
}

You can put SVG inline in HTML and style it with your existing stylesheet. This is why icon systems moved from icon fonts to inline SVG — full CSS control, better accessibility, no font-loading quirks.

Animation

SVG supports both CSS animations and SMIL (Synchronized Multimedia Integration Language). CSS is generally preferred now:

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

For complex path animations, libraries like GreenSock (GSAP) or Framer Motion give you fine-grained control over path drawing, morphing, and sequencing.

Accessibility

SVG can be fully accessible. Add a