SVG Cheat Sheet
Quick reference for scalable vector graphics: viewBox, shapes, paths, transformations, gradients, and optimization basics.
Visual Tools
svg
vector
graphics
SVG (Scalable Vector Graphics) describes images as markup — resolutions don't matter. Unlike raster images, an SVG scales cleanly at any size and can be styled, animated, and manipulated with CSS and JavaScript.
viewBox & Coordinate System
viewBox="min-x min-y width height" defines the user coordinate system; the element then scales to whatever CSS size it is given.
html
<svg viewBox="0 0 100 100" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="40" height="30" fill="teal" />
</svg>
Table
| Attribute | Meaning |
|---|---|
viewBox | Internal coordinate system |
preserveAspectRatio | How to fit the viewBox into the rendered box |
width / height | Rendered size (can be CSS) |
xmlns | Required namespace on inline SVG |
Basic Shapes
Table
| Element | Attributes | Example |
|---|---|---|
<rect> | x, y, width, height, rx, ry | <rect x="5" y="5" width="50" height="20" rx="4"/> |
<circle> | cx, cy, r | <circle cx="25" cy="25" r="20"/> |
<ellipse> | cx, cy, rx, ry | <ellipse cx="25" cy="25" rx="30" ry="15"/> |
<line> | x1, y1, x2, y2 | <line x1="0" y1="0" x2="100" y2="100"/> |
<polyline> | points | <polyline points="0,0 50,40 100,0"/> |
<polygon> | points (closed) | <polygon points="50,0 100,80 0,80"/> |
<path> | d | See below |
Path Commands
d holds a sequence of single-letter commands. Uppercase = absolute, lowercase = relative.
Table
| Command | Name | Example |
|---|---|---|
M x y | Move to | M 10 10 |
L x y | Line to | L 90 10 |
H x / V y | Horizontal/Vertical line | H 90 |
C x1 y1 x2 y2 x y | Cubic Bézier | C 20 0, 80 0, 90 50 |
S x2 y2 x y | Smooth cubic | S 90 90, 50 90 |
Q x1 y1 x y | Quadratic Bézier | Q 50 0, 90 50 |
T x y | Smooth quadratic | T 50 90 |
A rx ry rot larc sweep x y | Arc | A 30 30 0 0 1 90 50 |
Z | Close path | Z |
html
<path d="M 10 10 H 90 V 90 H 10 Z" fill="none" stroke="teal" stroke-width="2" />
Fill, Stroke & Presentation
Table
| Attribute | Purpose | Example |
|---|---|---|
fill | Interior color | fill="teal", fill="none" |
stroke | Outline color | stroke="#333" |
stroke-width | Outline thickness | stroke-width="2" |
stroke-linecap | End caps (butt, round, square) | stroke-linecap="round" |
stroke-linejoin | Corner joints (miter, round, bevel) | stroke-linejoin="round" |
stroke-dasharray | Dashed pattern | stroke-dasharray="4 2" |
opacity | Element transparency | opacity="0.5" |
fill-rule | Winding (nonzero, evenodd) | fill-rule="evenodd" |
Transform & Gradients
html
<g transform="translate(50,50) rotate(45) scale(1.5)">
<rect width="20" height="20" fill="teal" />
</g>
html
<defs>
<linearGradient id="grad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#0d9488" />
<stop offset="100%" stop-color="#0ea5e9" />
</linearGradient>
</defs>
<rect width="100" height="40" fill="url(#grad)" />
Optimization Basics
- Remove unused
ids, comments, and redundant attributes. - Prefer integers/one decimal over long floats.
- Use
<path>over many tiny shapes. - Drop
xmlnsonly outside inline contexts (it's required inline). - Run files through an optimizer (SVGO) before shipping.
Common Pitfalls
[!WARNING] Two
ids with the same value in one page break gradient/filter references — prefix ids per icon instance or use unique names.
[!TIP] Set
viewBoxfirst, then CSS dimensions. WithoutviewBox, absolutewidth/heightis the only way to scale and it won't resize responsively.