SVG Format: The Complete Technical Guide
SVG (Scalable Vector Graphics) is an XML-based vector image format standardized by the W3C. Unlike raster formats (JPEG, PNG, WebP) that store pixels, SVG stores mathematical descriptions of shapes, paths, text, and visual effects. The defining property is infinite scalability — an SVG at 1×1 pixel and at 10,000×10,000 pixels is rendered from the same file with identical sharpness. SVG 1.1 (2003, revised 2011) is the widely implemented standard; SVG 2.0 is a working draft that extends it.
Core Concepts: Raster vs. Vector
Raster images (PNG, JPEG, WebP) store a grid of pixel colors. Enlarging a raster image interpolates between pixels, causing blurring. File size grows with pixel dimensions.
Vector images (SVG, EPS, AI) store geometric instructions:
- "Draw a circle at (50,50) with radius 30, filled red, stroke blue 2px"
- "Render the text 'Hello' at (10,20) using font Arial 16px"
- "Draw a Bézier path from (0,0) through (50,100) to (100,0)"
SVG is rendered by the SVG engine at display time. At any scale, the math produces the correct coordinates. File size depends on geometric complexity, not output resolution.
When to use SVG: Logos, icons, illustrations, diagrams, charts, UI elements, maps — anything created with shapes and paths. Not suitable for: Photographs, complex textures, video frames — use JPEG/WebP for these.
SVG File Structure
SVG is XML. A minimal SVG file:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="200"
viewBox="0 0 200 200">
<circle cx="100" cy="100" r="80" fill="#e74c3c" stroke="#c0392b" stroke-width="4"/>
<text x="100" y="108" text-anchor="middle" font-size="24" fill="white">SVG</text>
</svg>
Key SVG elements and attributes:
<svg>: Root element. Required attributes:
xmlns: XML namespacehttp://www.w3.org/2000/svgwidth/height: Intrinsic dimensions (px, em, %, or unitless)viewBox:"minX minY width height"— defines the coordinate space. Enables scaling without changing coordinates.
<g>: Group element. Applies shared transforms and styles to children. The SVG equivalent of a layer group.
<rect>: Rectangle. Attributes: x, y, width, height, rx (corner radius), ry.
<circle>: Circle. Attributes: cx, cy, r.
<ellipse>: Ellipse. Attributes: cx, cy, rx, ry.
<line>: Line segment. Attributes: x1, y1, x2, y2.
<polyline>: Connected line segments. Attribute: points="x1,y1 x2,y2 ...".
<polygon>: Closed polygon. Attribute: points.
<path>: The most powerful element — draws arbitrary curves and shapes using a compact command language.
<text>: Text rendering. Attributes: x, y, font-size, font-family, text-anchor (start/middle/end), dominant-baseline.
<image>: Embeds raster images (PNG, JPEG) or other SVGs. Attribute: href with data URI or URL.
<defs>: Container for reusable elements (gradients, filters, symbols, patterns) that are referenced but not rendered directly.
<use>: Instantiates a referenced element. <use href="#my-icon" x="50" y="50"/> renders the element with id my-icon at (50,50). Enables efficient icon systems.
The Path Element: Command Language
<path d="..."> uses a compact command language:
| Command | Full Name | Parameters | Description |
|---|---|---|---|
M x,y |
MoveTo | x,y | Move to point (no drawing) |
L x,y |
LineTo | x,y | Line to point |
H x |
Horizontal | x | Horizontal line |
V y |
Vertical | y | Vertical line |
C x1,y1 x2,y2 x,y |
Cubic Bézier | control1, control2, end | Cubic Bézier curve |
Q x1,y1 x,y |
Quadratic Bézier | control, end | Quadratic Bézier curve |
A rx ry rot laf sf x,y |
Arc | radii, rotation, flags, end | Elliptical arc |
Z |
ClosePath | — | Close path back to start |
Lowercase versions (m, l, h, v, c, q, a, z) use relative coordinates.
Example: A rounded star or the classic heart shape can be drawn with a single path using C commands.
Styling: CSS and Presentation Attributes
SVG elements are styled via:
- Presentation attributes:
fill="red"stroke="blue"stroke-width="2"on the element - Inline style:
style="fill: red; stroke: blue;"(CSS syntax) - External/embedded CSS:
<style>circle { fill: red; }</style>in<defs>or linked stylesheet
CSS cascade applies: external stylesheet < embedded style < inline style < presentation attributes (with some nuances for inheritance).
Common styling properties:
fill: Fill color (#hex,rgb(),hsl(),url(#gradient-id),none)stroke: Stroke colorstroke-width: Stroke thickness in user unitsstroke-dasharray: Dash pattern (e.g.,"5 3"= 5px dash, 3px gap)opacity: Overall opacity (0–1)fill-opacity/stroke-opacity: Per-property opacitytransform:translate(x,y),rotate(angle cx cy),scale(sx sy),matrix(a b c d e f)clip-path: Clipping mask referencemask: Alpha mask reference
Gradients and Patterns
<defs>
<!-- Linear gradient -->
<linearGradient id="sunset" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f39c12"/>
<stop offset="100%" stop-color="#e74c3c"/>
</linearGradient>
<!-- Radial gradient -->
<radialGradient id="glow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="white" stop-opacity="1"/>
<stop offset="100%" stop-color="white" stop-opacity="0"/>
</radialGradient>
<!-- Repeating tile pattern -->
<pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="3" fill="#3498db"/>
</pattern>
</defs>
<rect width="200" height="200" fill="url(#sunset)"/>
<circle cx="100" cy="100" r="80" fill="url(#glow)"/>
<rect width="200" height="200" fill="url(#dots)"/>
Filters
SVG filters enable raster-like effects on vector shapes:
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="3"/>
</filter>
<filter id="drop-shadow">
<feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="rgba(0,0,0,0.5)"/>
</filter>
</defs>
<rect width="100" height="100" fill="red" filter="url(#blur)"/>
Filter primitives: feGaussianBlur, feColorMatrix, feComposite, feMerge, feDisplacementMap, feTurbulence, feMorphology, feConvolveMatrix, feBlend. Chains of primitives create complex effects (emboss, glow, glass, noise textures).
Animation
SVG supports three animation systems:
- SMIL animations (SVG native):
<animate>,<animateTransform>,<animateMotion>elements within SVG. Deprecated in Chrome (2016) but re-supported. - CSS animations/transitions: Applied to SVG elements via CSS.
@keyframesandtransitionwork on SVG presentation attributes that map to CSS properties. - JavaScript/Web Animations API: Full programmatic control. Libraries: GSAP, Anime.js, Snap.svg, D3.js.
SVG in HTML5
SVG can be used in HTML in four ways:
- Inline SVG:
<svg>directly in HTML markup. Full CSS/JS access, can reference page stylesheets. Best for interactive SVGs. <img src="logo.svg">: Simple embedding. No CSS/JS access, no animation (for security). Cached like any image.- CSS background:
background-image: url('icon.svg'). Same restrictions as<img>. <object data="logo.svg">: Full SVG including scripts runs in an embedded context.
Optimization
SVG files from design tools (Illustrator, Inkscape, Figma) contain unnecessary metadata. Optimization tools:
# SVGO (Node.js) — industry standard optimizer
svgo input.svg -o output.svg
# SVGO with custom config (preserve IDs, disable certain plugins)
svgo input.svg --config=svgo.config.js
# Inkscape command-line optimization
inkscape --export-plain-svg=output.svg input.svg
# Check compressed size (SVG compresses very well with gzip/brotli)
gzip -k output.svg && ls -lh output.svg.gz
Typical SVGO optimizations: remove editor metadata (<sodipodi:, <inkscape:), collapse groups, merge paths, remove redundant attributes, minify coordinates (reduce decimal places), convert absolute to relative path commands.
Embedding Fonts
<!-- Embed font as base64 -->
<defs>
<style>
@font-face {
font-family: 'MyFont';
src: url('data:font/woff2;base64,...') format('woff2');
}
</style>
</defs>
<text font-family="MyFont" font-size="24">Embedded font text</text>
For SVGs that will be opened in isolation (not in a browser that can load external fonts), embedding fonts as base64 ensures correct rendering. For web use, reference the same font the page already loads.
Conversion Commands
# PNG/JPEG to SVG (tracing — approximate, not lossless)
potrace bitmap.bmp -s -o output.svg # potrace (black/white)
autotrace --output-format=svg input.png > output.svg # autotrace (color)
# SVG to PNG at specific resolution
inkscape --export-filename=output.png --export-width=1024 input.svg
convert -density 300 input.svg output.png # ImageMagick
# SVG to PDF (vector, lossless)
inkscape --export-filename=output.pdf input.svg
cairosvg input.svg -o output.pdf
# SVG to EPS
inkscape --export-filename=output.eps input.svg
# Batch SVG to PNG 512px
for f in *.svg; do inkscape --export-filename="${f%.svg}.png" --export-width=512 "$f"; done
Related conversions
Most teams that read this guide convert images in one of these directions: