Scalable Vector Graphics

Scalable Vector Graphics (SVG, en catala grafics vectorials escalables) es una familia d'especificacions d'un format de fitxer basat en XML per descriure grafics vectorials bidimensionals, tant estatics com dinamics (p. ex. interactius o animats).

L'especificacio de SVG es un estandard obert que ha estat en desenvolupament pel World Wide Web Consortium (W3C) des de 1999.

Les imatges SVG i els seus comportaments es defineixen en arxius de text XML. Aixo significa que dins aquests es pot cercar, indexar, escriptar i, si es necessita, poden ser comprimits. Ja que son arxius XML, les imatges de SVG es poden crear i editar amb qualsevol editor de text, pero tambe hi ha disponibles programes de dibuix especialitzats basats en SVG.

Tots els navegadors web moderns essencials, donen suport i renderitzen SVG de forma directa. Microsoft Internet Explorer (IE), ho fa des de la versio 9.

SVG ha estat en el desenvolupament des de 1999 per un grup d'empreses dins del W3C despres que els estandards Llenguatge de Marcatge de Grafics de Precisio (PGML) - desenvolupat a partir de PostScript d'Adobe - i llenguatge de marcatge vectorial (vml) - desenvolupat a partir del Microsoft RTF - fossin enviats a W3C el 1998. SVG va agafar experiencia dels dissenys d'aquells dos formats.

SVG permet tres tipus d'objectes grafics: Grafics vectorials, grafics raster i text.

Els objectes grafics es poden agrupar, se'ls pot donar estil, transformar, i compondre a objectes previament renderitzats. SVG no dona directament suport als z-index^[1] que separa l'ordre de dibuix de l'ordre al document, a diferencia d'alguns altres llenguatges de marcatge vectorials com VML. El text pot estar dins qualsevol Espai de noms XML adequat a l'aplicacio, que millora les capacitats de cerca i accessibilitat dels grafics de SVG. L'estandar tret inclou transformacions niades, clipping paths, mascares alfa, efectes de filtre, objectes plantilla i extensibilitat.

Des de 2001, l'especificacio de SVG s'ha actualitzat a la versio 1.1 (Recomanacio actual) i 1.2 (encara una Esborrany). La Recomanacio SVG Mobil introduia dos perfils simplificats de SVG 1.1, SVG Basic i SVG Tiny (SVG Minuscul), pensat per a mecanismes amb capacitats computacionals i de representacio a la pantalla reduides. SVG Tiny mes tard es convertia una recomanacio autonoma (versio 1.2 actual) i la base per a SVG 1.2. A mes a mes a aquestes variants i perfils, l'especificacio SVG Print (encara un esborrany) conte directrius per a documents SVG 1.2 imprimible i SVG Tiny 1.2.

L'element Canvas en HTML5 proporciona un enfocament una mica diferent al render de grafics dinamics a HTML. Pero no te en compte els renders d'elements estatics, i els elements dibuixats no son identificables d'una manera parescuda a la del DOM.

Mentre que es principalment designat com a llenguatge d'etiquetes de grafics vectorial, l'especificacio tambe esta dissenyada amb les capacitats basiques d'un llenguatge de descripcio de pagina (PDL), com el PDF d'Adobe. Conte provisions per grafics rics, i es tambe compatible amb CSS per definir l'estil. Es, a diferencia de XHTML i XSL-FO, el proposit principal del qual es la comunicacio de contingut, no presentacio i, per tant, especifiquen objectes per ser mostrat pero no on posar tals objectes. Al contrari, SVG es un PDL ideal per a usos orientats a la impressio, ja que conte tota la funcionalitat necessaria per posar cada que posi cada glif i imatge en una localitzacio escollida de la pagina final.^[2] Un subconjunt de SVG molt mes especialitzat cap a la impressio (SVG Print, creat per Canon, Hewlett-Packard, Adobe i Corel) es actualment un esborrany en proces de la W3C.^[3]

Els dibuixos SVG poden ser dinamics i interactius. Les modificacions basades en el temps als elements es poden descriure en SMIL, o poden ser programades en un llenguatge de scripting (p. ex., ECMAScript o JavaScript). El W3C explicitament recomana SMIL com l'estandard per a l'animacio en SVG.^[4] Un conjunt ric de manejadors d'events com onmouseover i onclick poden ser assignats a qualsevol objecte grafic SVG.

Les imatges SVG, que son XML, contenen nombrosos fragments de text repetits i son aixi especialment aptes per a la compressio amb gzip, encara que altres metodes de compressio es poden utilitzar eficacment. Una vegada que una imatge de SVG ha estat comprimida per gzip, pot ser referida com a imatge "SVGZ", amb l'extensio corresponent de nom d'arxiu. L'arxiu resultant pot ser tan petit com un 20% de la mida original.^[5]

SVG va ser desenvolupat pel grup de treball d'SVG del W3C comencant el 1998, despres que Macromedia i Microsoft presentessin VML mentre que Adobe Systems i Sun Microsystems presentaven un format que competia amb l'anterior conegut com PGML. El grup de feina era presidit per Chris Lilley del W3C.

• SVG 1.0 es convertia en una Recomanacio de W3C el 4 de setembre de 2001.^[6]
• SVG 1.1 es convertia en una Recomanacio de W3C el 14 de gener 2003.^[7] L'especificacio de SVG 1.1 esta modularized per deixar subconjunts ser definits com a perfils. A part d'aixo, hi ha molt poca diferencia entre SVG 1.1 i SVG 1.0.
• SVG Tiny i SVG Basic (les descripcions SVG mobils) es convertien en Recomanacions de W3C 14 de gener de 2003. Aquests es descriuen com perfils de SVG 1.1.^[8]
• SVG Tiny 1.2 es convertia una Recomanacio de W3C el 22 de desembre 2008.^[9]
• SVG Full 1.2 es un Esborrany en progres de W3C. SVG Tiny 1.2 era inicialment alliberat com a perfil, i mes tard refactoritzat per ser una especificacio completa, incloent-hi totes les parts necessitades de SVG 1.1 i SVG 1.2. SVG 1.2 Full afegeix moduls al nucli de SVGT 1.2.
• SVG Print afegeix sintaxi per a documents de diverses pagines i suport de gestio de color obligatori.

L'estandard MPEG-4 Part 20 - Lightweight Application Scene Representation (LASeR, en catala "representador de escenes d'aplicacions lleuger") i el Simple Aggregation Format (SAF, en catala "format d'agregacio simple) estan basats en SVG Tiny.^[10] Va ser desenvolupat per MPEG (ISO/IEC JTC1/SC29/WG11) i publicat com SO/IEC 14496-20:2006.^[11] Les capacitats SVG son realcades en MPEG-4 Part 20 amb trets clau per a serveis mobils, com a actualitzacio dinamica, codificacio binaria, i bona representacio de les fonts.^[12] SVG va ser tambe acollit a MPEG-4 Part 11, en el format MPEG-4 Textual Extensible (XMT) - una representacio textual del contingut multimedia de MPEG-4, emprant XML.^[13]

A causa de demanda d'industria, dos perfils mobils s'introduien amb SVG 1.1: SVG Tiny (SVGT) i SVG Basic (SVGB). Aquests son subconjunts de l'estandard SVG sencer, principalment destinat a agents d'usuari amb capacitats limitades. En particular, SVG Tiny era definit per a mecanismes mobils altament restringits com telefons mobils, i SVG Basic era definit per a mecanismes mobils de mes alt nivell, com PDAs.

El 2003, el 3GPP adoptava SVG Tiny com el format obligatori per a grafics vectorials per als telefons de nova generacio. SVGT es el format de grafics vectorial exigit i el suport de SVGB es opcional per a Servei de Missatgeria Multimedia (MMS) i flux de commutacio de paquets (PSS).^[14][15][16] Va ser mes tard afegit com format exigit per a grafics vectorials en 3GPP IP Multimedia Subsystem (IMS).^[17] Cap perfil mobil inclou suport per al DOM sencer, mentre nomes SVG Basic te suport opcional per a scripting, pero ja que son subconjunts plenament compatibles de l'estandard la majoria dels grafics de SVG encara poden ser renderitzats per mecanismes que nomes donen suport al profiles mobils.^[18]

SVGT 1.2 afegeix un microDOM (mDOM), deixant totes les necessitats mobils ser satisfetes amb un perfil unic.

L'especificacio de SVG 1.1 defineix 14 arees funcionals importants o conjunts:^[7]

Camins (Paths)

Contorns de forma simple o composta dibuixats amb linies curves o rectes poden ser omplerts o perfilats (o ser emprats com a clipping path) i son expressades en un codi molt compacte en el cual, per exemple, M (de 'moure a') precedeix les coordenades inicials y L (linia a) precedira el punt sequent cap al que la linia ha de ser dibuixada. Les altres lletres de comanda (C, S, Q, T i A) precedeixen dades que s'utilitzen per dibuixar diverses corbes Bezier i corbes el*liptiques. Z s'utilitza per tancar un cami. En tots els casos, les coordenades absolutes segueixen lletres majuscula i les coordenades relatives s'indiquen amb les respectives lletres en minuscula.^[19]

Formes Basiques

Linies rectes o camins fets amb una serie de segments connectats amb rectes (polilinies), aixi com poligons tancats, cercles y elipses poden ser dibuixats. Els rectangles i els "rectangles" arrodonits pels cantons son uns altres elements estandards.^[20]

Text

El text de caracters Unicode inclos en un arxiu de SVG es expressat com dades de caracter XML. Molts efectes visuals son possibles, i l'especificacio de SVG automaticament maneja text bidireccional (com quan es vol compondre una combinacio de text angles i arab, per exemple), text vertical (com el xines era historicament escrit) i caracters al llarg d'un cami curvilini (com el text al voltant de les vores del Gran Segell dels Estats Units).

Pintat

Es poden omplir (fill) formes de SVG i/o perfilar-se (pintat amb un color, un gradent o un patro). Els 'fills' poden ser opacs o tenir diversos graus de transparencia. "Els Marcadors" (markers) son decoracions de fi de linia, com puntes de fletxa, o simbols que poden apareixer en els vertexs d'un poligon.

Color

Els colors es poden aplicar a tots els elements de SVG visibles, o directament o via el "fill", el "stroke" (contorn) i altres propietats. Els colors s'especifiquen de la mateixa manera com en CSS2, i.e. emprant noms com black (negre) o blue (blau), en hexadecimal com #2f0 o #22ff00, en el decimal com rgb(255,255,127) o com percentatges de la forma rgb(100%,100%,50%).^[21]

Gradents i Patrons

Es poden omplir formes SVG o perfilar-se amb colors solids com a dalt, o amb gradents de color o amb patrons que es repeteixen. Els pendents de color poden ser lineals o radials (circular), i poden implicar qualsevol nombre de colors aixi com repeticions. Tambe es poden especificar pendents d'opacitat. Els patrons es basen en objectes raster predefinits o objectes de grafics vectorials, que es poden repetir en direccions de x i/o y. Els gradents i patrons es poden animar i ser escriptats.^[22]

Des de 2008, hi ha hagut discussions^[23][24] entre usuaris professionals de SVG sobre que les malles de gradent, o preferiblement les corbes de difusio es podrien utilment afegir a l'especificacio de SVG. Es diu que una "representacio simple [emprant les corbes de difusio] es capac de representar efectets fins i tot molt subtils d'ombreig"^[25] i que "Les corbes de difusio son comparables tant en l'eficiencia de qualitat i codificacio amb xarxes de gredent, pero son mes simples de crear (segons uns quants artistes que han utilitzat les dues eines), i es poden captar des de bitmaps de forma totalment automatica."^[26]

Retall, Emmascarament i Composicio

Els elements grafics, incloent-hi text, camins, formes basiques i combinacions d'aquests, es poden utilitzar com contorns per definir tant 'dins' com 'fora' regions que es poden pintar (amb colors, gradents i patrons) independentment. Els camins de retall (clipping paths) plenament opacs i les mascares semitransparents son compostes junts per calcular el color i opacitat de tots els pixels de la imatge final, utilitzant l'alfa blending simple.^[27]

Efectes de filtre^[28]

Interactivitat

Les imatges de SVG poden interaccionar amb usuaris de moltes maneres. A mes a mes dels hipervincles esmentat sota, qualsevol part d'una imatge de SVG es pot fer provocar esdeveniments que representen canvis de focus, clics de ratoli, que es mouen o que amplien la imatge i uns altres esdeveniments de cursor, teclat i document. Els handlers (manejadors) d'esdeveniments poden comencar, aturar-se o canviar animacions i executar altres scripts en resposta a aquests esdeveniments.^[29]

Linkatge^[30]

Scripting

Es pot accedir a tots els aspectes d'un document de SVG i manipular-se utilitzant scripts d'una manera similar a HTML. L'estandard dels llenguatges de scripting s'anomena ECMAScript (de prop referit a JavaScript) i alla son definits objectes DOM per a tots els elements de SVG i atributs. Els scripts son tancats dins l'element