Scalable Vector Graphics (SVG, en català gràfics vectorials escalables) és una família d'especificacions d'un format de fitxer basat en XML per descriure gràfics vectorials bidimensionals, tant estàtics com dinàmics (p. ex. interactius o animats).

L'especificació de SVG és un estàndard 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. Això significa que dins aquests es pot cercar, indexar, escriptar i, si es necessita, poden ser comprimits. Ja que són arxius XML, les imatges de SVG es poden crear i editar amb qualsevol editor de text, però també 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 versió 9.

esquerra|miniatura|Aquesta imatge il·lustra la diferència entre mapa de bits (bitmap) i imatges vectorials (outline). La imatge bitmap està composta per un conjunt fix de punts, mentre que la imatge vectorial compon d'un conjunt fix de formes. En la imatge, canviar l'escala del bitmap revela els punts, però canviar l'escala de la imatge vectorial conserva les formes.

SVG ha estat en el desenvolupament des de 1999 per un grup d'empreses dins del W3C després que els estàndards Llenguatge de Marcatge de Gràfics de Precisió (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 experiència dels dissenys d'aquells dos formats.

SVG permet tres tipus d'objectes gràfics: Gràfics vectorials, gràfics raster i text.

Els objectes gràfics es poden agrupar, se'ls pot donar estil, transformar, i compondre a objectes prèviament renderitzats. SVG no dona directament suport als z-index que separa l'ordre de dibuix de l'ordre al document, a diferència d'alguns altres llenguatges de marcatge vectorials com VML. El text pot estar dins qualsevol Espai de noms XML adequat a l'aplicació, que millora les capacitats de cerca i accessibilitat dels gràfics de SVG. L'estandar tret inclou transformacions niades, clipping paths, màscares alfa, efectes de filtre, objectes plantilla i extensibilitat.

Des de 2001, l'especificació de SVG s'ha actualitzat a la versió 1.1 (Recomanació actual) i 1.2 (encara una Esborrany). La Recomanació SVG Mòbil introduïa dos perfils simplificats de SVG 1.1, SVG Basic i SVG Tiny (SVG Minúscul), pensat per a mecanismes amb capacitats computacionals i de representació a la pantalla reduïdes. SVG Tiny més tard es convertia una recomanació autònoma (versió 1.2 actual) i la base per a SVG 1.2. A més a més a aquestes variants i perfils, l'especificació SVG Print (encara un esborrany) conté 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 gràfics dinàmics a HTML. Però no té en compte els renders d'elements estàtics, i els elements dibuixats no són identificables d'una manera parescuda a la del DOM.

Impressió Mentre que és principalment designat com a llenguatge d'etiquetes de gràfics vectorial, l'especificació també està dissenyada amb les capacitats bàsiques d'un llenguatge de descripció de pàgina (PDL), com el PDF d'Adobe. Conté provisions per gràfics rics, i és també compatible amb CSS per definir l'estil. És, a diferència de XHTML i XSL-FO, el propòsit principal del qual és la comunicació de contingut, no presentació i, per tant, especifiquen objectes per ser mostrat però no on posar tals objectes. Al contrari, SVG és un PDL ideal per a usos orientats a la impressió, ja que conté tota la funcionalitat necessària per posar cada que posi cada glif i imatge en una localització escollida de la pàgina final. Un subconjunt de SVG molt més especialitzat cap a la impressió (SVG Print, creat per Canon, Hewlett-Packard, Adobe i Corel) és actualment un esborrany en procés de la W3C.

Scripting i animació Els dibuixos SVG poden ser dinàmics 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 explícitament recomana SMIL com l'estàndard per a l'animació en SVG. Un conjunt ric de manejadors d'events com onmouseover i onclick poden ser assignats a qualsevol objecte gràfic SVG.

Compressió Les imatges SVG, que són XML, contenen nombrosos fragments de text repetits i són així especialment aptes per a la compressió amb gzip, encara que altres mètodes de compressió es poden utilitzar eficaçment. Una vegada que una imatge de SVG ha estat comprimida per gzip, pot ser referida com a imatge "SVGZ", amb l'extensió corresponent de nom d'arxiu. L'arxiu resultant pot ser tan petit com un 20% de la mida original.

Història de desenvolupament SVG va ser desenvolupat pel grup de treball d'SVG del W3C començant el 1998, després 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 Recomanació de W3C el 4 de setembre de 2001. SVG 1.1 es convertia en una Recomanació de W3C el 14 de gener 2003. L'especificació de SVG 1.1 està modularized per deixar subconjunts ser definits com a perfils. A part d'això, hi ha molt poca diferència entre SVG 1.1 i SVG 1.0. SVG Tiny i SVG Basic (les descripcions SVG mòbils) es convertien en Recomanacions de W3C 14 de gener de 2003. Aquests es descriuen com perfils de SVG 1.1. SVG Tiny 1.2 es convertia una Recomanació de W3C el 22 de desembre 2008. SVG Full 1.2 és un Esborrany en progrés de W3C. SVG Tiny 1.2 era inicialment alliberat com a perfil, i més tard refactoritzat per ser una especificació completa, incloent-hi totes les parts necessitades de SVG 1.1 i SVG 1.2. SVG 1.2 Full afegeix mòduls al nucli de SVGT 1.2. SVG Print afegeix sintaxi per a documents de diverses pàgines i suport de gestió de color obligatori.

L'estandard MPEG-4 Part 20 - Lightweight Application Scene Representation (LASeR, en català "representador de escènes d'aplicacions lleuger") i el Simple Aggregation Format (SAF, en català "format d'agregació simple) estan basats en SVG Tiny. Va ser desenvolupat per MPEG (ISO/IEC JTC1/SC29/WG11) i publicat com SO/IEC 14496-20:2006. Les capacitats SVG són realçades en MPEG-4 Part 20 amb trets clau per a serveis mòbils, com a actualització dinàmica, codificació binària, i bona representació de les fonts. SVG va ser també acollit a MPEG-4 Part 11, en el format MPEG-4 Textual Extensible (XMT) - una representació textual del contingut multimèdia de MPEG-4, emprant XML.

A causa de demanda d'indústria, dos perfils mòbils s'introduïen amb SVG 1.1: SVG Tiny (SVGT) i SVG Basic (SVGB). Aquests són subconjunts de l'estàndard SVG sencer, principalment destinat a agents d'usuari amb capacitats limitades. En particular, SVG Tiny era definit per a mecanismes mòbils altament restringits com telèfons mòbils, i SVG Basic era definit per a mecanismes mòbils de més alt nivell, com PDAs.

El 2003, el 3GPP adoptava SVG Tiny com el format obligatori per a gràfics vectorials per als telèfons de nova generació. SVGT és el format de gràfics vectorial exigit i el suport de SVGB és opcional per a Servei de Missatgeria Multimèdia (MMS) i flux de commutació de paquets (PSS). Va ser més tard afegit com format exigit per a gràfics vectorials en 3GPP IP Multimedia Subsystem (IMS). Cap perfil mòbil inclou suport per al DOM sencer, mentre només SVG Basic té suport opcional per a scripting, però ja que són subconjunts plenament compatibles de l'estàndard la majoria dels gràfics de SVG encara poden ser renderitzats per mecanismes que només donen suport al profiles mòbils.

SVGT 1.2 afegeix un microDOM (μDOM), deixant totes les necessitats mòbils ser satisfetes amb un perfil únic.

Funcionalitat L'especificació de SVG 1.1 defineix 14 àrees funcionals importants o conjunts:

Camins (Paths)

Contorns de forma simple o composta dibuixats amb línies curves o rectes poden ser omplerts o perfilats (o ser emprats com a clipping path) i són expressades en un codi molt compacte en el cual, per exemple, M (de 'moure a') precedeix les coordenades inicials y L (línia a) precedirá el punt sequent cap al que la línia ha de ser dibuixada. Les altres lletres de comanda (C, S, Q, T i A) precedeixen dades que s'utilitzen per dibuixar diverses córbes Bézier i corbes el·líptiques. Z s'utilitza per tancar un camí. En tots els casos, les coordenades absolutes segueixen lletres majúscula i les coordenades relatives s'indiquen amb les respectives lletres en minúscula.

Formes Bàsiques

Línies rectes o camins fets amb una sèrie de segments connectats amb rectes (polilínies), així com polígons tancats, cercles y elipses poden ser dibuixats. Els rectangles i els "rectangles" arrodonits pels cantons són uns altres elements estàndards.

Text

El text de caràcters Unicode inclòs en un arxiu de SVG es expressat com dades de caràcter XML. Molts efectes visuals són possibles, i l'especificació de SVG automàticament maneja text bidireccional (com quan es vol compondre una combinació de text anglès i àrab, per exemple), text vertical (com el xinès era històricament escrit) i caràcters al llarg d'un camí 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 patró). Els 'fills' poden ser opacs o tenir diversos graus de transparència. "Els Marcadors" (markers) són decoracions de fi de línia, com puntes de fletxa, o símbols que poden aparèixer en els vèrtexs d'un polígon.

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%).

Gradents i Patrons

Es poden omplir formes SVG o perfilar-se amb colors sòlids 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 així com repeticions. També es poden especificar pendents d'opacitat. Els patrons es basen en objectes raster predefinits o objectes de gràfics vectorials, que es poden repetir en direccions de x i/o y. Els gradents i patrons es poden animar i ser escriptats.

Des de 2008, hi ha hagut discussions entre usuaris professionals de SVG sobre que les malles de gradent, o preferiblement les corbes de difusió es podrien útilment afegir a l'especificació de SVG. Es diu que una "representació simple [emprant les corbes de difusió] és capaç de representar efectets fins i tot molt subtils d'ombreig" i que "Les corbes de difusió són comparables tant en l'eficiència de qualitat i codificació amb xarxes de gredent, però són més simples de crear (segons uns quants artistes que han utilitzat les dues eines), i es poden captar des de bitmaps de forma totalment automàtica."

Retall, Emmascarament i Composició

Els elements gràfics, incloent-hi text, camins, formes bàsiques 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 màscares semitransparents són compostes junts per calcular el color i opacitat de tots els píxels de la imatge final, utilitzant l'alfa blending simple.

Efectes de filtre

Interactivitat