Last updated
SVG Code Structure
SVG (Scalable Vector Graphics) is an XML-based format for describing 2D graphics. Unlike raster images, SVG graphics are resolution-independent — they scale perfectly to any size. An SVG file is plain text that can be embedded directly in HTML, styled with CSS, and manipulated with JavaScript.
SVG Coordinate System
SVG uses a coordinate system where (0,0) is the top-left corner, x increases to the right,
and y increases downward. The viewBox attribute defines the internal coordinate
space, while width and height define the rendered size.
SVG
<!-- Basic SVG with common shapes -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
width="200" height="200">
<!-- Rectangle -->
<rect x="10" y="10" width="80" height="60"
fill="#3498DB" rx="5" ry="5"/>
<!-- Circle -->
<circle cx="150" cy="50" r="40" fill="#E74C3C"/>
<!-- Line -->
<line x1="10" y1="100" x2="190" y2="100"
stroke="#2ECC71" stroke-width="3"/>
<!-- Polygon (triangle) -->
<polygon points="100,120 60,180 140,180"
fill="#F1C40F"/>
<!-- Text -->
<text x="100" y="195" text-anchor="middle"
font-size="12" fill="#34495E">SVG Shapes</text>
</svg>SVG Path Commands
| Command | Name | Parameters |
|---|---|---|
| M / m | Move to | x y |
| L / l | Line to | x y |
| H / h | Horizontal line | x |
| V / v | Vertical line | y |
| C / c | Cubic Bézier | x1 y1 x2 y2 x y |
| Q / q | Quadratic Bézier | x1 y1 x y |
| A / a | Arc | rx ry x-rot large-arc sweep x y |
| Z / z | Close path | — |