L’element <svg> és un container per gràfics SVG i té diferents mètodes per dibuixar camins, caixes, cercles, text i imatges gràfiques.
Exemple de cercle amb SVG:
<!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html>
Explicació del codi SVG:
- Una imatge comença amb un element <svg>.
- Els atributs width i height de l’element <svg> defineixen l’amplada i l’alçada de la imatge SVG.
- <circle> s’utilitza per dibuixar un cercle.
- Els atributs cx i cy defineixen les coordenades x i y del centre del cercle. Si cx i cy són omesos, el centre del cercle es posa per defecte a (0,0).
- L’atribut r defineix el radi del cercle.
- Els atributs stroke i stroke-width defineixen com serà la línia de fora, definint el color i l’amplada amb px.
- L’atribut “fill” fa referència al color interior del cercle.
Exemples d’elements SVG:
Rectangle <rect>
<svg width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> </svg>
Amb cantó arrodonit:
<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg>
Polígon <polygon>
El <polygon> s’utilitza per crear gràfics que tinguin com a mínim tres costats.
Els polígons estan fets a partir de línies rectes i la forma que fan és tancada (totes les línies estan en contacte amb alguna altra, de manera que tanquen la figura).
<svg height="250" width="500"> <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" /> </svg>
Path <path>
L’element <path> s’utilitza per definir “camins”.
Per crear un <path> es poden utilitzar les següents comandes:
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
Nota: totes les comandes es poden expressar també amb lletres minúscules. Les majúscules fan referència a posicions absolutes, mentre que les minúscules són posicions relatives.
<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
Per més exemples i funcions clicar aquí .