Grafică vectorială scalabilă

Un exemplu de utilizare a formatului SVG.

Grafică vectorială scalabilă (format în .svg ), indică un anumit format care este capabil să afișeze obiecte grafice vectoriale și, prin urmare, să salveze imagini, astfel încât să poată fi mărite și reduse după bunul plac, fără a pierde rezoluția grafică .

În special, formatul svg funcționează în XML , adică o aplicație a limbajului metalic bazată pe dezvoltările web de către consorțiul W3C , care are ca scop descrierea figurilor bidimensionale statice și animate.

Situatie

SVG a devenit o recomandare (standard) a World Wide Web Consortium în septembrie 2001, după un proces destul de mixt. La W3C Macromedia și Microsoft au introdus Vector Markup Language ( VML ), în timp ce Adobe și Sun Microsystems au propus un format concurent numit PGML : a fost necesară o muncă de compromis pentru a ajunge la recomandare. SVG este suportat în mod nativ de browserul web / editorul web Amaya , de Opera și de Mozilla Firefox de la versiunea 1.5. Alte browsere pentru vizualizarea imaginilor SVG necesită adăugarea unui plugin , cum ar fi Adobe SVG Viewer sau Corel SVG Viewer .

Imaginile SVG pot fi vizualizate și de editori și spectatori independenți. O versiune specială a Mozilla , numită „Croczilla”, acceptă acum unele părți ale standardului SVG, dar o mare parte din performanță nu este încă realizabilă: în perspectivă, totuși, imaginile SVG ar trebui să fie vizibile fără a adăuga niciun plug-in. De asemenea, browserul web Konqueror al proiectului KDE are în prezent o implementare destul de completă a SVG numit ksvg și este de așteptat ca în viitor acest suport să fie adaptat browserului web Safari al Apple Inc. Browser-ul Opera acceptă SVG de la versiunea 8.5.

Programele scrise în Java pot controla afișarea, generarea și manipularea graficelor SVG folosind Batik SVG Toolkit .

Caracteristici

Este posibil să rezumăm ceea ce este cuprins în Prezentarea generală a SVG a consorțiului W3C.

SVG vă permite să gestionați trei tipuri de obiecte grafice:

• forme geometrice , adică linii formate din segmente drepte și curbate și zone delimitate de linii închise;
• imagini grafice raster și imagini digitale ;
• texte explicative, eventual clicabile.

Obiectele grafice pot fi grupate în obiecte mai cuprinzătoare, echipate cu atribute de stil și adăugate la obiectele grafice construite și afișate anterior. Un text poate face parte din orice spațiu de nume XML care poate fi trimis unei aplicații; această capacitate mărește căutarea și accesibilitatea imaginilor SVG. Repertoriul de operații fezabile include transformări imbricate, trasee de tăiere , măști alfa , efecte de filtrare , obiecte șablon și extensibilitate .

Cifrele exprimate folosind SVG pot fi dinamice și interactive. Modelul de obiect document (DOM) pentru SVG, care include DOM XML complet, permite animația grafică vectorială directă și eficientă prin limbile ECMAScript și SMIL . Obiectelor grafice SVG li se pot atribui gestionari de evenimente extrase dintr-un repertoriu larg: două exemple cu un rol ușor de înțeles sunt onmouseover și onclick . Datorită compatibilității SVG cu alte standarde web și datorită sprijinului reciproc al acestor mecanisme, elementele SVG și alte elemente XML ale unei pagini web pot fi echipate cu performanțe precum scripturi obținute simultan din diferite spații de nume .

Sistemul SVG a rivalizat cu Adobe Flash (declarat învechit la 31 decembrie 2020 ^[1] ) în ceea ce privește potențialul și eficiența. Pentru o primă comparație, trebuie remarcat faptul că, spre deosebire de Flash, SVG este un standard deschis .

Utilizare

Majoritatea produselor software de desen, cum ar fi Adobe Illustrator și Corel Draw în versiunile mai noi, pot exporta imagini descrise în SVG. Pachetul OpenOffice.org Draw din versiunea 1.1 poate exporta și fișiere SVG.

Două programe de grafică vectorială open source și multiplatăforme care utilizează nativ formatul SVG sunt Inkscape și Sodipodi .

Grafică vectorială scalabilă

Potențialul graficelor vectoriale scalabile este remarcabil:

• geometria fiecărui element grafic este definită matematic (în termeni de vectori), mai degrabă decât tratată de pătrate rigide ale pixelilor ;
• orice element grafic poate fi redimensionat după dorință, păstrându-și în același timp calitatea. Mai precis, atunci când vizualizați un anumit obiect grafic pe diferite tipuri de suport ( tipărit , video , plotter , ecranul telefonului mobil etc.), este sigur că veți obține întotdeauna cea mai înaltă calitate pe care acele suporturi le pot oferi.

Acest potențial afectează practic toate aplicațiile grafice care nu sunt pur raster , adică bazate pe hărți de pixeli (în practică imagini de la camere sau scanări ).

Pe de altă parte, „greutatea” de calcul a unei imagini vectoriale este în general mai mare decât cea a graficelor raster, întrucât procesorul computerului trebuie să regenereze în mod esențial imaginea de la zero de fiecare dată când afișajul este redimensionat.

Avantajul SVG față de alte formate de grafică vectorială constă în natura sa de standard deschis: astfel, în principiu, oricine știe că este capabil să creeze pagini SVG fără a fi nevoie de un mediu dedicat de dezvoltare comercială.

Fiind un format derivat din XML , el moștenește de la el ușurința generării cu mijloace automate și prin limbaje de programare.

În cele din urmă, din partea clientului este posibil să se opereze pe modelul obiect al documentului ( DOM ) folosind codul ECMAScript (standardizarea JavaScript definită de ECMA ).

Programe pentru crearea svg

Iată o listă parțială de programe pentru generarea de fișiere svg:

• Adobe Illustrator
• Designer de afinitate
• Gravit Designer
• Macromedia FreeHand
• Corel Draw
• Xara Xtreme
• Inkscape (open source)
• desenez
• Editor online Janvas

HTML5

Același subiect în detaliu: HTML5 .

Cu standardul HTML5, formatul SVG a devenit parte a limbajului HTML. Un svg poate fi inserat ca imagine (format ".svg") sau prin cod. Din punctul de vedere al utilizatorului, la nivel estetic este același lucru. Următoarele trei linii de cod produc același rezultat estetic (un cerc alb cu o margine verde), dar cu trei tehnici diferite:

Imagine SVG

< img
    src = "circle.svg"
    alt = "cerc"
    înălțime = "200"
    width = "200" />

Cod SVG

< svg width = "100" height = "100" >
  < cerc cx = "200" cy = "200" r = "93"
  stroke = "# 66CC01" stroke-width = "4" fill = "E2FFC6" />
Ne pare rău, browserul dvs. nu acceptă SVG inline.
</ svg >

Cod pânză

function draw () {
    // desenează regiunea colorată
    mainContext.beginPath ();
    mainContext.arc (200, 200, 93, 0, 2 * Math.PI, adevărat);
    mainContext.fillStyle = "# E2FFC6";
    mainContext.fill ();
 
    // desenează cursa
    mainContext.lineWidth = 20;
    mainContext.strokeStyle = "# 66CC01";
    mainContext.stroke ();
}

Diferențe între SVG și Canvas

SVG este un limbaj pentru descrierea graficelor 2D în XML ^[2] . Canvas desenează grafică 2D, din mers (cu JavaScript) ^[3] .

Compararea logo-ului CSS3 creat cu CSS, cu SVG și cu HTML5 Canvas. Uneori este posibil să se obțină același rezultat cu tehnici diferite.

SVG este bazat pe XML, ceea ce înseamnă că fiecare element este disponibil în SVG DOM. Puteți atașa gestionare de evenimente JavaScript pentru un element.

În SVG, fiecare formă desenată este „amintită” ca obiect. Dacă atributele unui obiect SVG sunt modificate, browserul poate reda automat forma.

Pânza (de asemenea, un element HTML5) este redată pixel cu pixel. Odată ce grafica a fost desenată, pânza este „uitată” de browser. Dacă poziția sa trebuie schimbată, întreaga scenă trebuie redesenată, inclusiv obiecte care ar fi putut fi acoperite de grafică ^[4] .

Canvas este potrivit pentru aplicații dinamice, cum ar fi jocuri și animații, datorită încărcării sale mai rapide și independente de DOM.

Imaginile create în SVG sunt adăugate în DOM și editabile prin JavaScript și CSS , chiar și cu evenimente prezente pe celelalte elemente ale documentului ^[5] .

Personaje

La fel ca în HTML și CSS, textul în SVG se poate referi la fișiere de fonturi externe, cum ar fi fonturile de sistem. Dacă fișierele de fonturi necesare nu există pe mașina pe care este redat fișierul SVG, este posibil ca textul să nu apară așa cum era de așteptat. Pentru a depăși această limitare, textul poate fi afișat într-un font SVG , unde glifele necesare sunt definite în SVG ca un font care este apoi descris de elementul <text> ^[7] .

În ceea ce privește SEO , SVG-urile sunt mai accesibile, deoarece acceptă textul ^[8] care, cu excepția cazului în care este convertit în căi, poate fi selectat de utilizator într-o pagină HTML și poate fi citit de motoarele de căutare ^[9] .

Conexiuni

Imaginile SVG pot conține hyperlinkuri către alte documente, folosind XLink. Prin utilizarea elementului <view> sau a unui identificator de fragment, adresele URL se pot conecta la fișiere SVG care modifică zona vizibilă a documentului. Acest lucru vă permite să creați stări de afișare specifice care sunt utilizate pentru a mări / micșora o anumită zonă sau pentru a limita vizualizarea la un anumit element. Acest lucru este util atunci când creați sprite . Suportul XLink în combinație cu elementul <use> permite, de asemenea, conectarea și reutilizarea elementelor interne și externe. Acest lucru permite programatorilor să facă mai mult cu mai puțină marcare și face codul mai curat ^[10] .

Scripting și animație

Înainte de sosirea HTML5, utilizarea Adobe Flash (învechită la 31 decembrie 2020) era singura modalitate de a crea animații vectoriale și, în general, imagini vectoriale pentru web ^[11] .

Proiectele SVG pot fi dinamice și interactive. Modificările bazate pe animație pot fi descrise în SMIL sau pot fi programate într-un limbaj de scriptare (de exemplu, ECMAScript sau JavaScript). W3C recomandă în mod explicit SMIL ca standard pentru animația SVG.

SVG poate fi animat și cu CSS3 ^[12] și ECMAScript .

Un set bogat de gestionare de evenimente, cum ar fi „ onmouseover” și „ onclick”, poate fi atribuit oricărui obiect grafic SVG pentru a aplica acțiuni și evenimente ^[13] .

Animație SVG folosind SMIL

 < animateTransform
   attributeName = "transforma"
   attributeType = "XML"
   tip = "rotire"
   din = "0"
   to = "360"
   begin = "0s"
   dur = "1s"
   repeatCount = "nedefinit" />

Animație SVG folosind CSS3

 < style type = "text / css" >
  @ keyframes rot_kf {
    din { transform : rotire ( 0 grade ); }
    a { transforma : roti ( 360 grade ); }
  }
  . rot { animație : rot_kf 1 s liniar infinit ; }
 </ style >

Animație SVG folosind ECMAScript

 < script type = "text / ecmascript" >
  funcție rotire ( evt ) {
   var obiect = evt . țintă . proprietarDocument . getElementById ( 'putregai' );
   setInterval ( function () {
     var acum = data nouă ();
     var milisecunde = acum . getTime () % 1000 ;
     var grade = milisecunde * 0,36 ; 
     obiect . setAttribute ( 'transformare' , 'rotire (' + grade + ')' );
    }, 20 );
  }
 < / script>

Date Exif

În SVG este posibilă inserarea metadatelor Exif ^[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 >

Imagini raster în SVG

În codul svg puteți încorpora sau lega imagini raster (sau bitmap) precum jpg, png sau gif.

Imagine legată:

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

Imagine încorporată:

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

Utilizarea CSS

Puteți utiliza CSS pentru a modifica stilurile SVG. Exemplu:

 svg {
  culoare de fundal : bej ;
}

Browsere care acceptă formatul svg și svgz

Iată o listă de browsere care acceptă cel puțin din cea mai recentă versiune disponibilă, cel puțin parțial, formatul svg și svgz (svg comprimat);

• Amaya
• Curajos
• Șemineu
• Gecko
• Google Chrome
• Turmă
• Internet Explorer (începând cu versiunea 9)
• Margine
• Konqueror (a fost primul browser care a acceptat formatul svg)
• Mozilla Firefox
• Operă
• Maimuta de mare
• Safari

Suportul pentru acest format este în continuă evoluție și odată cu succesiunea noilor versiuni ale noilor browsere, compatibilitatea este în continuă extindere.

Notă

Elemente conexe

• Grafică pe computer
• GXL
• XML
• ShockWave Flash

Alte proiecte

• Wikimedia Commons conține imagini sau alte fișiere pe grafică vectorială scalabilă

linkuri externe

• Pagina oficială W3C SVG la w3.org .
• Tutorial SVG de Altsoft , la alt-soft.com .
• Ghid SVG - HTML.it Aflați cum să utilizați standardul SVG. construirea de imagini, bare de navigare și elemente grafice tipice unei pagini web
• Vizualizator online gratuit , la sharecad.org .

Portal internet : accesați intrările Wikipedia care se ocupă de internet