Gràfics vectorials escalables

Un exemple d’ús del format SVG.

Gràfics vectorials escalables (format en .svg ), indica un format concret que és capaç de mostrar objectes de gràfics vectorials i, per tant, de desar imatges perquè es puguin ampliar i reduir a voluntat sense perdre la resolució dels gràfics .

En particular, el format svg funciona en XML , és a dir, una aplicació del metalenguatge basada en els desenvolupaments de la web del consorci W3C , que té com a objectiu descriure figures bidimensionals estàtiques i animades.

Situació

SVG es va convertir en una recomanació (estàndard) del World Wide Web Consortium el setembre del 2001 després d'un procés bastant mixt. A W3C, Macromedia i Microsoft havien introduït el llenguatge de marcatge vectorial ( VML ), mentre que Adobe i Sun Microsystems proposaven un format de la competència anomenat PGML : calia fer una mica de compromís per arribar a la recomanació. SVG és compatible amb el navegador web / editor web Amaya , Opera i Mozilla Firefox des de la versió 1.5. Altres navegadors per veure imatges SVG requereixen l’addició d’un complement , com ara Adobe SVG Viewer o Corel SVG Viewer .

Les imatges SVG també poden ser vistes per editors i espectadors independents. Una versió particular de Mozilla , anomenada "Croczilla", ara admet algunes parts de l'estàndard SVG, però gran part del rendiment encara no es pot assolir: en perspectiva, però, les imatges SVG haurien de ser visibles sense afegir cap complement. El navegador web Konqueror del projecte KDE també té actualment una implementació bastant completa de SVG anomenada ksvg i és d'esperar que en el futur aquest suport s'adapti al navegador web Safari d' Apple Inc. El navegador Opera admet SVG des de la versió 8.5.

Els programes escrits en Java poden controlar la visualització, generació i manipulació de gràfics SVG mitjançant el Batik SVG Toolkit .

Característiques

És possible resumir el contingut de la Visió general de SVG del consorci W3C.

SVG us permet tractar tres tipus d'objectes gràfics:

• formes geomètriques , és a dir, línies consistents en segments rectes i corbats i àrees delimitades per línies tancades;
• imatges gràfiques ràster i imatges digitals ;
• textos explicatius, possiblement clicables.

Els objectes gràfics es poden agrupar en objectes més complets, equipats amb atributs d'estil i afegits a objectes gràfics construïts i mostrats prèviament. Un text pot formar part de qualsevol espai de noms XML que es pugui enviar a una aplicació; aquesta capacitat augmenta la cerca i l' accessibilitat de les imatges SVG. El repertori d’operacions factibles inclou transformacions imbricades, camins de retall , màscares alfa , efectes de filtre , objectes de plantilla i extensibilitat .

Les xifres expressades mitjançant SVG poden ser dinàmiques i interactives. El Model d’objectes de document (DOM) per a SVG, que inclou el DOM XML complet, permet l’animació directa i eficient de gràfics vectorials a través dels llenguatges ECMAScript i SMIL . Als objectes gràfics SVG se'ls poden assignar gestors d'esdeveniments extrets d'un ampli repertori: dos exemples amb un paper fàcil d'entendre són onmouseover i onclick . Gràcies a la compatibilitat de SVG amb altres estàndards web i gràcies al suport mutu d’aquests mecanismes, els elements SVG i altres elements XML d’una pàgina web es poden equipar amb actuacions com ara seqüències d’ordres obtingudes simultàniament des de diferents espais de noms .

El sistema SVG rivalitzava amb Adobe Flash (declarat obsolet al 31 de desembre de 2020 ^[1] ) en termes de potencial i eficiència. Per a una primera comparació, cal tenir en compte que, a diferència de Flash, SVG és un estàndard obert .

Ús

La majoria de productes de programari de dibuix com Adobe Illustrator i Corel Draw en versions més recents poden exportar imatges descrites en SVG. El paquet OpenOffice.org Draw de la versió 1.1 també pot exportar fitxers SVG.

Dos programes de gràfics vectorials de codi obert i multiplataforma que fan servir el format SVG de forma nativa són Inkscape i Sodipodi .

Gràfics vectorials escalables

El potencial dels gràfics vectorials escalables és notable:

• la geometria de cada element gràfic es defineix matemàticament (en termes de vectors), en lloc de ser tractada per quadrats rígids de píxels ;
• es pot canviar la mida de qualsevol element gràfic segons es desitgi, mantenint la seva qualitat. Més concretament, quan es visualitza un determinat objecte gràfic en diferents tipus de suports ( imprès , vídeo , traçador , pantalla del telèfon mòbil , etc.), segur que sempre s’obtindrà la màxima qualitat que aquests suports poden proporcionar.

Aquest potencial afecta pràcticament totes les aplicacions gràfiques que no són purament ràster , és a dir, basades en mapes de píxels (a la pràctica imatges de càmeres o exploracions ).

D'altra banda, el "pes" computacional d'una imatge vectorial és generalment superior al dels gràfics ràster, ja que el processador de l'ordinador ha de regenerar essencialment la imatge des de zero cada vegada que es redimensiona la pantalla.

L’avantatge de SVG respecte a altres formats de gràfics vectorials rau en la seva naturalesa com a estàndard obert: d’aquesta manera, en principi, qualsevol persona que ho sàpiga és capaç de crear pàgines SVG sense la necessitat d’un entorn de desenvolupament comercial dedicat.

En ser un format derivat de XML , n’hereta la facilitat de generació amb mitjans automàtics i mitjançant llenguatges de programació.

Finalment, al costat del client és possible operar amb el model d’objectes del document (el DOM ) mitjançant el codi ECMAScript (l’estandardització de JavaScript definida per ECMA ).

Programes per crear svg

Aquí hi ha una llista parcial de programes per generar fitxers svg:

• Adobe Illustrator
• Dissenyador d’afinitat
• Dissenyador de Gravit
• Macromedia FreeHand
• Corel Draw
• Xara Xtreme
• Inkscape (codi obert)
• Dibuixo
• Editor en línia de Janvas

HTML5

El mateix tema en detall: HTML5 .

Amb l'estàndard HTML5, el format SVG ha passat a formar part del llenguatge HTML. Es pot inserir un svg com a imatge (format ".svg") o mitjançant codi. Des del punt de vista de l'usuari, a nivell estètic és el mateix. Les tres línies de codi següents generen el mateix resultat estètic (un cercle blanc amb una vora verda), però amb tres tècniques diferents:

Imatge SVG

< img
    src = "circle.svg"
    alt = "cercle"
    altura = "200"
    width = "200" />

Codi SVG

< svg width = "100" height = "100" >
  < cercle cx = "200" cy = "200" r = "93"
  stroke = "# 66CC01" stroke-width = "4" fill = "E2FFC6" />
Ho sentim, el vostre navegador no admet SVG en línia.
</ svg >

Codi de lona

funció draw () {
    // dibuixa la regió de colors
    mainContext.beginPath ();
    mainContext.arc (200, 200, 93, 0, 2 * Math.PI, cert);
    mainContext.fillStyle = "# E2FFC6";
    mainContext.fill ();
 
    // dibuixar el traç
    mainContext.lineWidth = 20;
    mainContext.strokeStyle = "# 66CC01";
    mainContext.stroke ();
}

Diferències entre SVG i Canvas

SVG és un llenguatge per descriure gràfics 2D en XML ^[2] . Canvas dibuixa gràfics 2D sobre la marxa (amb JavaScript) ^[3] .

Comparació del logotip CSS3 creat amb CSS, amb SVG i amb HTML5 Canvas. De vegades és possible aconseguir el mateix resultat amb tècniques diferents.

SVG es basa en XML, cosa que significa que tots els elements estan disponibles a SVG DOM. Podeu adjuntar gestors d'esdeveniments JavaScript per a un element.

En SVG, cada forma dibuixada es "recorda" com un objecte. Si es canvien els atributs d’un objecte SVG, el navegador pot tornar a representar la forma automàticament.

El llenç (també un element HTML5) es representa píxel per píxel. Un cop dibuixat el gràfic, el llenç queda "oblidat" pel navegador. Si s’ha de canviar la seva posició, s’ha de tornar a dibuixar tota l’escena, inclosos els objectes que poden haver estat coberts pels gràfics ^[4] .

El Canvas és adequat per a aplicacions dinàmiques com ara jocs i animacions, a causa de la seva càrrega més ràpida i independent del DOM.

Les imatges creades en SVG s’afegeixen al DOM i s’editen mitjançant JavaScript i Css , fins i tot amb esdeveniments presents a la resta d’elements del document ^[5] .

Personatges

Com passa amb HTML i CSS, el text en SVG pot referir-se a fitxers de tipus de lletra externs, com ara els tipus de lletra del sistema. Si els fitxers de tipus de lletra necessaris no existeixen a la màquina on es representa el fitxer SVG, és possible que el text no aparegui com s'esperava. Per superar aquesta limitació, el text es pot mostrar en una font SVG , on els glifos necessaris es defineixen en SVG com una font que després es descriu amb l'element <text> ^[7] .

Pel que fa a SEO , els SVG són més accessibles perquè admeten text ^[8] que, tret que es converteixi en camins, és seleccionable per l'usuari en una pàgina HTML i llegible pels motors de cerca ^[9] .

Connexions

Les imatges SVG poden contenir hipervincles a altres documents mitjançant XLink. Mitjançant l'ús de l'element <view> o d'un identificador de fragment, els URL poden enllaçar a fitxers SVG que canvien l'àrea visible del document. Això us permet crear estats de visualització específics que s’utilitzen per apropar / reduir una àrea específica o limitar la vista a un element específic. Això és útil quan es creen sprites . El suport XLink en combinació amb l'element <use> també permet la connexió i la reutilització d'elements interns i externs. Això permet als programadors fer més amb menys marcatge i fa que el codi sigui més net ^[10] .

Guió i animació

Abans de l'arribada d'HTML5, l'ús d' Adobe Flash (obsolet al 31 de desembre del 2020) era l'única manera de crear animacions vectorials i, en general, imatges vectorials per al web ^[11] .

Els dissenys SVG poden ser dinàmics i interactius. Els canvis basats en animacions es poden descriure en SMIL o es poden programar en un llenguatge de seqüències d’ordres (per exemple, ECMAScript o JavaScript). El W3C recomana explícitament SMIL com a estàndard per a l'animació SVG.

El SVG també es pot animar amb CSS3 ^[12] i ECMAScript .

Es pot assignar un conjunt ric de gestors d'esdeveniments com " onmouseover" i " onclick" a qualsevol objecte gràfic SVG per aplicar accions i esdeveniments ^[13] .

Animació SVG mitjançant SMIL

 < animateTransform
   attributeName = "transformar"
   attributeType = "XML"
   type = "rotar"
   de = "0"
   a = "360"
   begin = "0s"
   dur = "1 s"
   repeatCount = "indefinit" />

Animació SVG mitjançant CSS3

 < style type = "text / css" >
  @ keyframes rot_kf {
    de { transformar : girar ( 0 graus ); }
    per { transformar : girar ( 360 graus ); }
  }
  . rot { animation : rot_kf 1 s lineal infinit ; }
 </ style >

Animació SVG mitjançant ECMAScript

 < script type = "text / ecmascript" >
  funció de rotació ( evt ) {
   var objecte = evt . objectiu . propietariDocument . getElementById ( 'rot' );
   setInterval ( function () {
     var ara = data nova ();
     var mil·lisegons = ara . getTime () % 1000 ;
     var graus = milisegons * 0,36 ; 
     objecte . setAttribute ( 'transformar' , 'rotar (' + graus + ')' );
    }, 20 );
  }
 < / script>

Dades Exif

En SVG és possible inserir metadadesExif ^[14] .

< svg xmlns = "http://www.w3.org/2000/svg" xmlns: sol = "https://inkscape.org/it/" >
  < circle cx = "10" cy = "40" sol: country = "Italy" r = "10" />
</ svg >

Imatges ràster en SVG

Al codi svg podeu incrustar o enllaçar imatges ràster (o mapa de bits) com jpg, png o gif.

Imatge enllaçada:

 < svg ... >
  < image xlink: href = "/path/to/image.jpg" width = "100%" height = "100%" x = "0" y = "0" />
</ svg >

Imatge incrustada:

 < svg >
< imatge
       y = "130.35181"
       x = "47.050488"
       id = "image6820"
       xlink: href = "data: image / jpeg; base64, / 9j / 4AAQSkZJRgABAQEAlgCWAAD / 2 ../ >
</ svg >

Ús de CSS

Podeu utilitzar CSS per modificar estils SVG. Exemple:

 svg {
  color de fons : beix ;
}

Navegadors que admeten format svg i svgz

Aquí hi ha una llista de navegadors que, com a mínim, suporten la versió més recent disponible, almenys en part, en el format svg i svgz (svg comprimit);

• Amaya
• Valent
• Xemeneia
• Gecko
• Google Chrome
• Ramat
• Internet Explorer (a partir de la versió 9)
• Edge
• Konqueror (va ser el primer navegador que va donar suport al format svg)
• Mozilla Firefox
• Operapera
• SeaMonkey
• Safari

El suport d’aquest format està en constant evolució i, amb la successió de noves versions dels nous navegadors, la compatibilitat s’amplia constantment.

Nota

Articles relacionats

• Grafics d'ordinador
• GXL
• XML
• ShockWave Flash

Altres projectes

• Wikimedia Commons conté imatges o altres fitxers sobre gràfics vectorials escalables

Enllaços externs

• Pàgina oficial del W3C SVG a w3.org .
• Tutorial SVG d'Altsoft , a alt-soft.com .
• Guia SVG - HTML.it Apreneu a utilitzar l'estàndard SVG. construcció d'imatges, barres de navegació i elements gràfics propis d'una pàgina web
• Visor en línia gratuït , a sharecad.org .

Portal d'Internet : accediu a les entrades de Viquipèdia relacionades amb Internet