A lhora de crear un lloc web, el dissenyador web ha de tenir en compte quatre punts primordials pensant en la maquetació i el disseny visual de la web, el text, les imatges, els colors i les tipografies empleades.
D'aquests quatre punts, al que més importància donarem en aquest post és al de les imatges, ja que parlarem de com crear fitxers SVG ja que és molt important tenir en compte la qualitat de les imatges amb què es treballa.
Els tractaments amb fitxers SVG, ha anat cada cop en augment per part dels professionals i no tan professionals del món del disseny.
Què és un fitxer SVG?
SVG és l'abreviatura en anglès de Scalabe Vector Graphics, en espanyol, Gràfics Vectorials Escalables. Es tracta d'un format obert i gratuït amb què crear gràfics en 2D, dues dimensions.
A diferència d'altres formats d'imatge, com ara JPG o PNG, SVG és un format escalable, no importa quant es vulgui augmentar la seva mida, atès que la qualitat de la imatge es mantindrà. És un dels formats més usats en pàgines web per col·locar gràfics o imatges vectorials.
Per què hem de fer servir SVG?
Amb aquest tipus de format, les imatges vectorials mantindran una alta qualitat, sigui quina sigui la seva mida i resolució. Al contrari, que les imatges compostes per mapa de bits, formades per píxels, que perden qualitat si són redimensionades. El format SVG es defineix per la lleugeresa i la versatilitat.
Un altre dels punts a favor per a l'ús d'aquest format, és la seva petita grandària, és a dir, gràcies a això augmenta la velocitat de càrrega de les pàgines on es trobin. Aquestes imatges són construïdes per mitjà del navegador, la qual cosa ajuda a disminuir la càrrega i el consum al servidor.
A més, es poden crear imatges SVG animades amb què donar al nostre lloc web un aire de proximitat i cridar l'atenció dels espectadors que la visiten.
SVG és un format obert, és a dir, pot patir millores i actualitzacions. A més els fitxers SVG, es poden editar amb programes d'edició vectorial, per exemple Adobe Illustartor sense perdre qualitat en la visualització, es pot veure en qualsevol dispositiu. També ens permet imprimir-los sense perdre qualitat.
Com crear fitxers SVG de manera senzilla
Potser, la manera més senzilla de crear fitxers SVG, si estàs familiaritzat amb ells, sigui mitjançant un programa de disseny gràfic, com pot ser Illustrator, Corel Draw, entre d'altres.
Centrant-nos en el programa Illustrator, quan anem a utilitzar el format SVG, hem de tenir en compte si hem fet servir degradats o altres efectes, com ara l'efecte artístic, desenfocar, pinzells, pixeles, etc. ja que es rasteritzen en desar-se en format de fitxer SVG. El que és recomanable és utilitzar efectes de filtre SVG, per afegir efectes perquè després no es puguin rasteritzar.
Un altre dels consells que us donem, és que s'utilitzin símbols i traçats simples a les il·lustracions per a un millor rendiment del dit format. Evitar l'ús de pinzells de molt traçat ja que això genera una càrrega de dades més gran.
Per crear un fitxer SVG en aquest programa, el primer que hem de tenir obert és un llenç en blanc on treballarem la nostra idea.
Un cop acabada la nostra feina, el que farem és anar a la barra d'eines que se'ns mostra a dalt del programa, i seleccionarem l'opció de arxiu, guardar com, i ens apareixerà una pantalla emergent on ens indica que donem un nom al nostre arxiu i indicar el format en què el volem desar. És en aquest darrer apartat on cal marcar l'opció SVG.
En seleccionar el tipus SVG, ens apareix un quadre de diàleg on ens mostren diferents opcions que cal tenir en compte.
Per norma general, al primer camp que ens apareix al quadre, apareix el perfil SVG 1.1. En el següent ens dóna opció a escollir les fonts, on ens donen de per defecte el text marcat a SVG i el subconjunt, com cap. En el nostre cas, aquest treball no té tipografies, si les tingués caldria canviar l'opció de subconjunts, de cap, a tots els pictogrames.
El següent apartat és molt important, si assenyalem la opció d'incrustar, les imatges de la composició s'incorporaran a l'arxiu, el que generarà que aquest augmenti de pes si fem servir moltes imatges de mapa de bits. Si d'altra banda, marquem l'opció d'enllaçar, cal anar amb compte amb les imatges si les farem servir en un lloc web, ja que hem d'incloure els fitxers de les nostres imatges, ia més molt important, mantenir-ne la ruta. L'avantatge aquesta opció, és que els arxius pesaran força menys.
A la part d'opcions avançades trobem l'opció de codi SVG, aquesta opció ens indicarà com és l'arxiu per dins, és a dir, el codi darrere del nostre treball. Aquesta opció és fonamental si vols afegir el teu fitxer SVG, per exemple al teu WordPress personal, només has de copiar el codi i afegir-lo directament al teu editor HTML de WordPress.
L'últim consell que us donem, és que a l'hora de desar en format SVG, tingueu en compte que si esteu treballant amb diferents taules de treball, només es conservarà la taula de treball activa.
Si volem anar més enllà i aplicar efectes SVG a la nostra il·lustració, Illustrator ens ofereix un conjunt d'efectes. Per això, haurem de seleccionar un objecte o grup. Per aplicar un efecte hem de seleccionar la finestra efectes, filtres SVG i ho aplicarem.
En aplicar un filtre SVG, el programa de disseny, ens mostra una finestra on apareixen un llistat de filtres per poder aplicar, un cop en seleccionem un, Illustrator ens mostra com queda, però en una versió rasteritzada.
Com has pogut observar, el format SVG ha suposat una revolució. Gràcies al seu potencial i la qualitat que ofereix, fa que les pàgines webs que ens trobem siguin molt més atractives sense sacrificar-ne el rendiment, sempre que facin un ús correcte d'aquest format. SVG ha esdevingut la unió perfecta entre el món del disseny i el desenvolupament web.