El codi SVG (Scalable Vector Graphics) és un format d’imatge basat en XML (Extensible Markup Language) que permet descriure gràfics vectorials de manera escalable. A diferència dels formats d’imatge rasteritzats (com ara el JPEG o el PNG), on la imatge està composta per píxels, l’SVG utilitza descripcions matemàtiques per representar les formes i objectes gràfics.
El codi SVG està format per etiquetes XML que defineixen els elements gràfics, les seves propietats i atributs. Alguns dels elements més comuns en SVG inclouen:
<svg>: L’etiqueta principal que envolta tot el contingut SVG i defineix les dimensions i propietats del llenç.<rect>: Defineix un rectangle mitjançant atributs com ara la posició, la mida i el color d’ompliment.<circle>: Crea un cercle mitjançant atributs com ara la posició del centre, el radi i el color d’ompliment.<line>: Dibuixa una línia recta amb atributs per definir els punts d’inici i final, el gruix i el color.<path>: Permet crear formes complexes utilitzant comandes de dibuix, com ara moviments, línies i corbes.
A més d’aquests elements, l’SVG també admet transformacions, gradients, ombrejat, text i molts altres atributs i propietats per aconseguir efectes visuals avançats.
La principal avantatge de l’SVG és la seva capacitat per escalabilitzar sense perdre qualitat, ja que les imatges es basen en descripcions matemàtiques en lloc de píxels. Això significa que pots ampliar o reduir una imatge SVG sense que aparegui desenfocada o pixelada.
L’SVG s’utilitza àmpliament a la web per a gràfics interactius, icones, infografies i animacions. També es pot generar i manipular mitjançant codi JavaScript per crear visualitzacions dinàmiques i efectes animats.
Aquí tens un exemple senzill de codi SVG que dibuixa un cercle vermell:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <circle cx="50" cy="50" r="40" fill="red" /> </svg>
En aquest codi SVG, s’utilitza l’element <circle> per crear un cercle. Els atributs cx i cy especifiquen les coordenades del centre del cercle (en aquest cas, (50, 50)), mentre que l’atribut r defineix el radi del cercle (40 píxels). L’atribut fill determina el color de l’ompliment del cercle, en aquest cas, vermell.
Pots copiar i enganxar aquest codi en un fitxer SVG separat o utilitzar-lo dins d’una pàgina web per mostrar el cercle vermell.