SVG Viewer
Paste SVG markup and see it rendered live — pan/zoom, export PNG/SVG, copy image and a short syntax guide
SVG syntax — a short guide
Bite-sized sections from viewBox to paths and gradients. Each has a live example.
The <svg> canvas & viewBox›
An SVG is a canvas with its own coordinate space. `viewBox="minX minY width height"` defines that space; the SVG then scales to fit its rendered size, so units are relative, not pixels.
<svg viewBox="0 0 100 50">
<rect width="100" height="50" fill="#3b82f6" />
</svg>Coordinate system›
The origin (0,0) is the top-left. X grows to the right, Y grows downward — the opposite of maths class. A point at y=40 sits near the bottom.
<svg viewBox="0 0 100 100">
<circle cx="20" cy="20" r="6" fill="#ef4444" />
<circle cx="80" cy="80" r="6" fill="#22c55e" />
</svg>Basic shapes›
Primitives cover most needs: `rect` (with optional `rx` for rounded corners), `circle`, `ellipse`, `line`, `polygon` and `polyline`.
<rect x="5" y="5" width="40" height="30" rx="6" />
<circle cx="70" cy="20" r="15" />
<polygon points="100,5 120,35 80,35" />Fill, stroke & stroke-width›
`fill` paints the interior, `stroke` the outline, `stroke-width` its thickness. Set `fill="none"` for outline-only shapes; `stroke-linecap`/`stroke-linejoin` round the ends.
<circle cx="30" cy="30" r="20"
fill="#fde68a" stroke="#f59e0b" stroke-width="4" />Paths · move & line (M, L)›
`<path d="…">` is the most powerful shape. `M x y` moves the pen (no drawing), `L x y` draws a line to a point, `Z` closes back to the start. Lowercase letters (m, l) use relative coordinates.
<path d="M10 10 L50 10 L30 45 Z"
fill="#3b82f6" />Paths · curves (C, Q)›
`Q cx cy x y` draws a quadratic curve with one control point; `C c1x c1y c2x c2y x y` a cubic Bézier with two. The control points pull the line toward them like magnets.
<path d="M10 40 Q40 0 70 40"
fill="none" stroke="#a855f7" stroke-width="4" />Paths · arcs (A)›
`A rx ry rot large-arc sweep x y` draws an elliptical arc. The two flags (large-arc, sweep) pick which of the four possible arcs you get between the endpoints.
<path d="M10 40 A30 30 0 0 1 70 40"
fill="none" stroke="#22c55e" stroke-width="4" />Gradients & <defs>›
Reusable paint (gradients, patterns, filters) lives in `<defs>` with an `id`, then referenced via `fill="url(#id)"`. `linearGradient` blends along a line; `radialGradient` from a center.
<defs>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#3b82f6" />
<stop offset="100%" stop-color="#a855f7" />
</linearGradient>
</defs>
<rect width="80" height="40" fill="url(#g)" />