En el nostre article anterior vam veure com utilitzar programari lliure per incloure imatges en format WebP. Ara veurem perquè crear imatges SVG per a llocs web.
Un dels grans desafiaments que enfronten els dissenyadors web és la quantitat de dispositius amb què la gent es connecta a la xarxa. En aquells casos en què la imatge sigui merament il·lustrativa, una pèrdua de qualitat no afecta gaire. Però, si és important per al contingut com en el cas duna infografia, un esquema o una captura de pantalla, cal garantir que el contingut es vegi exactament igual en qualsevol mida.
Crear imatges SVG per a llocs web
Què són els gràfics en format SVG
Per entendre la diferència entre aquest tipus de gràfics i els utilitzats habitualment als llocs web, necessitem explicar dos conceptes; el de gràfics rasteritzats i el de gràfics vectorials.
- Gràfics rasteritzats: Aquest tipus de gràfics es construeixen amb píxels disposats en una quadrícula. Cada píxel té assignat un color específic. La qualitat es basa en la resolució que es determina en la quantitat de píxels per polzades. En augmentar la mida la densitat de píxels disminueix afectant la qualitat de la imatge. Això fa que, per representar imatges complexes amb molts detalls com una fotografia, en una mida determinada es necessitin arxius molt pesats.
- Gràfics vectorials: Es construeixen a partir dobjectes geomètrics expressats en fórmules matemàtiques. Aquests objectes poden ser línies, formes i corbes. En estar expressats en fórmules matemàtiques la seva mida es pot alterar sense perdre la qualitat i nitidesa representant els detalls de manera exacta.
Els gràfics rasteritzats són els més adequats per a imatges molt complexes com a fotografies o que incloguin ombrejats i degradats de colors suaus. Per a la seva edició requereixen programari especialitzat per a l'edició fotogràfica com El Gimp.
D'altra banda, els gràfics vectorials són millors per a il·lustracions, icones i logotips. Si bé hi ha programes per a la seva edició com Inkscape, també es poden crear i editar escrivint text.
Els gràfics en format SVG (Sigles en anglès per a Gràfics Vectorials Escalables) sutilitzen fonamentalment en llocs web i tenen aquestes característiques:
- No els afecta la resolució: Els gràfics en format SVG es veuen amb la mateixa nitidesa en qualsevol mida de pantalla incloent aquelles que utilitzen tecnologia de molt alta resolució.
- Són gràfics vectorials: Com ja expliquem, aquest tipus de gràfics es basa en la representació d'objectes geomètrics construïts a partir de fórmules matemàtiques. En modificar la mida simplement s'aplica la fórmula als valors nous.
- Més mida: El format SVG no necessita desar la informació per a cada píxel. Les fórmules matemàtiques per construir-los s'emmagatzemen en un fitxer de text en format XML comprimit.
- edició: Com tots els gràfics vectorials, el format SVG es pot modificar amb un programari específic o amb un editor de textos.
- interactivitat: A aquest tipus de gràfics se'ls pot animar o fer respondre a les instruccions dels usuaris utilitzant codi CSS o Javascript.
- compatibilitat: La majoria dels dispositius tenen navegadors que són compatibles amb aquest format gràfic.
Vam dir que un gràfic SVG es pot crear usant un editor de textos. Obre l'editor de textos de la teva distribució i enganxa el codi següent:
<svg width="200" height="200">
<rect width="100%" height="100%" fill="white" />
<circle cx="50%" cy="50%" r="50" fill="green" />
<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>
</svg>
Ara guarda-ho amb el nom de cercle.svg. Si us fixeu en el vostre gestor de fitxers veureu la miniatura del cercle verd i, si l'obreu amb un sisualitzador d'imatges, la veureu a mida completa.
on:
<svg width="200" height="200">
Estableix l'amplada i l'alçada en 200 píxels.
<rect width="100%" height="100%" fill="white" />
Estableix que el fons serà un quadrat blanc que ocuparà tota l'amplada i l'alçada de la imatge.
<circle cx="50%" cy="50%" r="50" fill="green" />
Ubica el cercle al mig de la imatge, li assigna un radi de 50 píxels i indica que el color serà verd.
<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>
Col·loca la paraula Ubunlog al centre exacte del cercle.
En un proper article veurem els editors gràfics per a aquest format.