What is SVG
Scalable Vector Graphics (SVG) is an XML-based image format for representing two-dimensional vector graphics. Unlike raster formats, such as JPEG or PNG, SVG uses a textual description with the image’s geometric data, making it scalable without loss of quality.
Structure of an SVG file
An SVG file consists of an <svg> element that contains all other elements.
This element can contain attributes to define the image’s dimensions, background color, and other properties.
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Graphic elements -->
</svg>Cookbook
Draw a rectangle
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="80" height="80" fill="red" />
</svg>Draw a circle
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>Draw a polygon
<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,100 50,25 50,75 100,0" />
<polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>Draw a path
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path
fill="none"
stroke="red"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" />
</svg>The d attribute of the <path> defines the path to be drawn.
The following table lists the commands and their corresponding letters:
| Comando | Lettera | Descrizione |
|---|---|---|
| MoveTo | M m | Move to a new position |
| LineTo | L l | Draws a line to a new position |
| Horizontal LineTo | H h | Draws a horizontal line |
| Vertical LineTo | V v | Draws a vertical line |
| Cubic Bézier curve | C c | Draws a cubic Bézier curve |
| Smooth Cubic Bézier curve | S s | Draws a smooth cubic Bézier curve |
| Quadratic Bézier curve | Q q | Draws a quadratic Bézier curve |
| Smooth Quadratic Bézier curve | T t | Draws a smooth quadratic Bézier curve |
| Elliptical arc curve | A a | Draws an elliptical arc curve |
| ClosePath | Z z | Closes the current path |
Commands can be used in uppercase or lowercase. Uppercase letters indicate absolute coordinates, while lowercase letters indicate relative movement from the current position.
Draw text
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="50" font-family="Arial" font-size="16" fill="black">Hello, world!</text>
</svg>Handle light and dark mode
<svg id="logo" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<style>
#logo * {
fill: #000;
}
@media (prefers-color-scheme: dark) {
#logo * {
fill: #fff;
}
}
</style>
<rect x="0" y="0" width="100" height="100" />
</svg>Linear gradient
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="background" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:white" />
<stop offset="100%" style="stop-color:black" />
</linearGradient>
</defs>
<rect x="10" y="10" width="80" height="80" fill="url(#background)" />
</svg>Loading animation
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 20" style="width: 100%; height: 30px">
<style>
@keyframes loading-animation {
to {
stroke-dashoffset: 0;
}
}
</style>
<rect stroke-width="1" stroke="rgb(106, 164, 68)" fill="none" x="2" y="2" width="296" height="16" rx="7" ry="7" />
<path d="M 10 10 L 290 10" stroke-linecap="round" fill="none" stroke="rgb(156, 204, 108)" stroke-width="16"
stroke-dasharray="280" style="
animation: 5s cubic-bezier(0,.26,.24,1) 0s infinite normal none running loading-animation;
stroke-dashoffset: 279;
" />
</svg>Arrows and wavy lines
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600"
viewBox="0 0 202.006 110.386">
<style>
line {
stroke: white;
stroke-width: 1;
}
#wiggle>* {
stroke: white;
fill: none;
}
.dashed {
stroke-dasharray: 5, 5;
}
</style>
<defs>
<marker id='head' orient="auto" markerWidth='6' markerHeight='4' refX='0.1' refY='2'>
<polygon points="0,0 0,4 6,2" fill="black" />
</marker>
<pattern id="wiggle" viewBox="0 0 8 6" height="8" width="8" patternUnits="userSpaceOnUse">
<path d="M 0 4 Q 2 8, 4 4 T 8 4" />
</pattern>
</defs>
<g>
<rect fill="url(#wiggle)" x="0" y="0" width="40" height="8" transform="
translate(58 28)
rotate(90)
" />
<rect fill="url(#wiggle)" x="0" y="0" width="68" height="8" transform="
translate(164 30)
rotate(90)
" />
<line x1="60" y1="24" x2="125" y2="24" marker-end='url(#head)' />
<line x1="73" y1="79" x2="130" y2="101" marker-end='url(#head)' />
<line class="dashed" x1="60" y1="32" x2="150" y2="95" marker-end='url(#head)' />
</g>
</svg>