El contingut gràfic de les pàgines web sembla estar ben cobert pels dos formats usuals de fitxer, el GIF i el JPEG. Cada format té els seus usos òptims i, aparentment, pot semblar que ja no cal altre cosa per incloure imatge a les pàgines. Analitzant les coses amb més detall, però, ens adonem que ambdós formats de gràfic tenen serioses limitacions (tal com comentam en els articles dedicats als formats gràfics.)
Des de fa uns anys, el format vectorial Shockwave Flash, o simplement Flash, ha esdevingut una alternativa cada cop més utilitzada. Flash té molts avantatges i, de fet, podem trobar pàgines senceres creades en Flash. Ara bé, aquest és un format de fitxer patentat per un fabricant (Macromedia) i pot modificar-lo a voluntat. A més, i a pesar de les nombroses millores que s'introdueixen a cada nova versió de Flash, aquest suposa una solució externa al que és el llenguatge de creació de pàgines web, l'html. Per aquestes i altres raons, va sorgir la iniciativa de crear un format estàndard de fitxer vectorial per a la web, i és així com el consorci de la www (http://www.w3.org/Graphics/SVG/) ha desenvolupat el nou format SVG (Scalable Vector Graphics.)

Per què SVG?
Quina necessitat hi ha de un nou format gràfic? Bàsicament, superar les limitacions dels fitxers de mapa de bits, els omnipresents GIF i JPG. A més, altres formats vectorials com SWF no estaven inicialment dissenyats per a la web --eren més aviat un format per a aplicacions multimèdia.
SVG s'ha creat des del principi com una forma més del llenguatge XML. XML és el futur llenguatge de creació de pàgines web i moltes altres aplicacions. Es tracta d'un llenguatge extensible (és a dir, hom pot afegir-hi definicions pròpies, mantenint però la compatibilitat amb les definicions estàndard) i que separa totalment els continguts de la presentació, de manera que un mateix fitxer pot representar-se de diferents maneres en funció de on s'obri: l'exemple que es sol posar és el d'una definició de número telefònic, que es mostra numèricament i pot marcar-se directament en un telèfon o pot mostrar-se com a registre d'una base de dades o fins i tot en forma de gràfic (per exemple, un mapa) en un terminal d'ordinador.
Quan el llenguatge XML sigui l'estàndard per a la creació de pàgines web, els fitxers SVG seran una part més de les pàgines, no un fitxer accessori.

Què ofereix SVG?
Donem un repàs als avantatges del format SVG i les seves possibilitats.

  Té tots els avantatges d'un gràfic vectorial (els que comentam a les pàgines de Disseny gràfic): és escalable, compacte, amb formes sempre editables a través de corbes Bézier, contorns suavitzats, transparències, màscares (clipping paths) i capaç d'incloure, si cal, bitmaps.

  El tamany dels SVG és molt compacte.

  El text que inclouen es editable: admet les fonts escalables més comuns (TrueType o Type 1.) Això suposa una diferència enorme amb els actuals GIF o JPG: el text que contenen es pot editar, seleccionar, pot ser indexat pels cercadors...

El text que contenen els SVG es pot cercar, seleccionar, indexar... i pot aplicar-s'hi estil amb fulls d'estil en cascada. Això suposen unes possibilitats increïbles.

  Té una qualitat de color excel.lent: el color del gràfic es pot calibrar segons els sistemes estàndard.

  El fitxer SVG no és binari: és un fitxer de text normal i corrent. Això vol dir que es pot editar fins i tot amb el bloc de notes de l'ordinador!

  És compatible amb els estàndards actuals de la web i --el que és més important-- amb els futurs.

  Suport de full d'estil CSS. Això vol dir que amb els fulls d'estil podrem modificar, de la forma més poderosa i fàcil, fins i tot els gràfics de les pàgines web!!

  Serà possible crear pàgines amb una riquesa tipogràfica i de layout sense precedents.

  Pot incloure codi (scripts) que el modifica dinàmicament en funció de les necessitats.

  És un format extensible: els fabricants podran fer-ne d'ell el format nadiu de les seves aplicacions, afegint-hi les característiques específiques que calguin, però mantenint la compatibilitat bàsica i universal amb la resta d'aplicacions que reconeixin el format.

  Admet efectes com sons, efectes visuals en fer clic o moure's per sobre, etiquetes informatives...

Un exemple de mapa SVG de la ciutat de Viena, que es crea al servidor, depenent de la informació que el visitant tria a un formulari. Vegeu l'enllaç més avall.

  Es pot crear dinàmicament a un servidor, amb instruccions de Java, Javascript, Perl o XML. Per exemple, es poden generar gràfics d'excel.lent qualitat amb les cotitzacions bursàries en temps real; per crear un rellotge analògic, amb minuts i segons, calen tan sols 2K de codi.

  SVG pot arribar a simplificar extraordinàriament el "workflow" per al disseny de pàgines web i esdevenir un format universal: tots els programes podrien obrir tot tipus de fitxer.

  Els gràfics SVG ja no seran, com ara passa, una versió mutilada d'un gràfic creat inicialment en una aplicació determinada. S'estalviarien tasques d'exportar, canviar de tamany, optimitzar...

Aquest format té un futur que sembla un somni per als dissenyadors. Certament, les possibilitats hi són. Però hi ha un llarg camí a recórrer. Les solucions --o els apedaçaments-- actuals (html + Flash) tenen encara una vigència assegurada durant uns anys. De moment, Flash ofereix molta més interactivitat, simplicitat d'ús i una implantació creixent. Gairebé més del 80% dels navegadors poden veure pel.lícules flash. Així, doncs, es tracta d'una batalla que sembla perduda abans de començar. Pot passar el mateix que amb el format PNG? Malgrat les seves excel.lents qualitats, PNG no ha arribat a imposar-se als GIF o JPG, que són la norma en els gràfics per a la web. De fet, tècnicament és superior en alguns aspectes, però segueix mantenint les limitacions d'un format bitmap, cosa que ha dificultat que arribés a ser utilitzat de forma habitual.
La situació amb els SVG és un poc diferent, perquè no pretén substituir un format que funciona perfectament com el de Flash, sinó obrir tot un nou món de possibilitats en el disseny de les pàgines web. Veure alguns exemples del que pot aportar SVG a la web ens obre els ulls a idees sorprenents.

Eines per crear i veure SVG.
El format està lluny de ser una cosa comuna, però ja hi ha aplicacions capdavanteres que permeten crear aquest tipus de gràfic. Com hem dit, amb el temps és previsible que apareguin filtres d'exportació per a altres aplicacions, o que els nous programes ja l'incorporin. Actualment, només uns pocs programes tenen capacitat de crear gràfics SVG. Sens dubte, en tan sols uns mesos n'apareixeran moltes més. A les pàgines del consorci de la www hi trobarem informació puntual dels nous programes i plugins que s'incorporin a l'oferta existent. Per exemple, ara mateix tenim:

Illustrator 9. A les pàgines d'Adobe hi trobam, precisament, detallada informació sobre el format, podem descarregar gratis el plug-in per a Netscape o Explorer i també veure exemples. Visita aconsellada. www.adobe.com/SVG.

CorelDraw (versió 9-10): la darrera versió de CorelDraw té un filtre d'exportació a SVG.

Mayura Draw. És un programa poc conegut. Una aplicació de dibuix vectorial molt bàsica, però que té l'al.licient de ser freeware (versió 2.) i tenir una sòlida base de PostScript. La versió 3 és comercial, i és la que permet guardar com a SVG. Doneu un cop d'ull a la seva web.

Trajectory Pro és un editor bàsic d'imatge vectorial que té com a format propi el SVG. Compta amb les eines bàsiques de tot programa d'il.lustració, i una paleta de propietats on s'especifiquen les característiques dels objectes, entre elles el color i el grau d'opacitat.

Jasc Trajectory Pro. Un nou programa del mateix fabricant que Paint Shop Pro. A aquest programa el format SVG és el nadiu, és a dir, es tracta d'una solució pensada des d'un principi per a la creació de SVG. Es pot obtenir una versió "preview" o de prova,a la web del fabricant (http://www.jasc.com.) De moment, el programa encara no es ven, i la versió esmentada, tot i que totalment funcional, té algunes petites mancances.

Recursos. Alguns exemples de SVG.
Recomanem visitar les pàgines del consorci de la www (http://www.w3.org/Graphics/SVG) o a la nova pàgina http://www.svg101.com/ des d'on accedirem a les darreres notícies relacionades amb el desenvolupament d'aquest formidable avenç en el disseny per a la web. Hi trobarem enllaços a pàgines amb exemples d'aplicació de SVG, eines per veure/crear-los, articles, tutorials...

És clar, no podien faltar a aquest article alguns exemples de tanta meravella. Per veure els SVG cal, de moment, un plugin. El més còmode d'instal.lar és el SVG Viewer que ofereix, gratuitament, Adobe (http://www.adobe.com/svg.)
Recollim alguns gràfics propis (creats amb Trajectory) i aliens , a una pàgina d'exemples.

Com a exemple de SVG dinàmics, vegeu http://www.carto.net/papers/svg/text_e.html, amb mapes generats dinàmicament, com l'exemple de Viena, del qual en teniu la imatge de la pantalla línies més amunt. A partir d'una selecció d'informació que fa el visitant. Un model del que es podrà fer amb SVG: generar gràfics a mida, en funció de les necessitats de l'usuari, segons el moment del dia o el tipus de dispositiu...

   { A dalt }