SVG (Scalable Vector Graphics) se impune drept unul dintre cele mai importante trenduri din domeniul web designului pentru anul 2014. Este recomandat de W3C (World Wide Web Consortium) încă din 2003, dar nu a fost foarte folosit, nefiind suportat în totalitate pe browser-e cum ar fi pe Internet Explorer. Însă lucrurile au început să se schimbe...
În articolul meu, voi prezenta pe scurt conceptul SVG și voi discuta despre avantajele practice care recomandă utilizarea SVG în web design.
SVG reprezintă prescurtarea pentru Scalable Vector Graphics, este un format pentru imagini de tip vectorial, bazat pe XML fiind utilizat pentru grafică 2D, care permite interactivitatea și animația. Timp de zece ani, SVG nu a fost folosit la potențialul maxim deoarece nu a beneficiat de suport complet pe Internet Explorer.
Lucrurile însă s-au schimbat mult în ultimul timp, iar elemente de SVG sunt folosite acum din ce în ce mai mult, în special pe browser-ele care susțin HTML5.
Astăzi, aproape toate browser-ele importante suportă SVG:
SVG-urile se pot crea folosind meta-limbajul XML, care utilizează tag-uri asemănătoare cu cele HTML. De exemplu, codul următor generează un cerc alb cu contur negru:
<svg height="100" width="100">
<circle cx="100" cy="100" r="50" stroke-width="4" stroke="#000" fill="#fff" />
</svg>Explicarea codului:
<svg>...</svg>. Atributele de înălțime și lățime ale elementului <svg> definesc înălțimea și lățimea SVG-ului.cx și cy definesc coordonatele x și y ale centrului cercului. Dacă cx și cy sunt omise, centrul cercului este automat poziționat pe coordonatele (0,0)r definește raza cercului.stroke și stroke-width controlează modul în care apare forma figurii pe care vrem să o desenăm.fill (umplere) se referă la culoarea din interiorul cercului.Este important de reținut că XML este mult mai strict decât HTML, de aceea omiterea unui tag de încheiere ar putea duce la nevalidarea întregului fișier sau la eroare în generarea SVG-ului.
Specificația W3C SVG1.1 definește 14 caracteristici principale:
fill și stroke sunt definite folosind valorile standard hex sau rgb de 3 sau 6 cifre.O altă modalitate de a crea SVG-uri este prin a le desena folosind un editor vectorial de grafică , metodă care este de preferat în cazul celor care nu cunosc bine XML sau al celor care vor să creeze elemente de grafică mai complexe. Ne vom referi la aceste instrumente în următoarele rânduri.
Acum însă să ne vom concentra asupra motivelor principale pentru care un web designer ar trebui să ia în considerare folosirea SVG-urilor.
Cel mai mare avantaj al graficii vectoriale este posibilitatea de a scala imaginile la orice dimensiune fără să pierdem din calitate (exemplificare în imaginea de mai jos). Acesta este motivul principal pentru care SVG este ideal pentru crearea de logo-uri de companii sau alte elemente grafice care necesită multe redimensionări. Orice designer trebuie să acorde atenție capacității de scalabilitate a produsului finit.
Totodată, independența rezoluției în cazul graficii scalabile este un factor foarte important în prezent, deoarece display-urile de mare rezoluție sunt din ce în ce mai des folosite, iar livrarea unui conținut responsive este de dorit.
Crearea de elemente grafice simple cu XML este foarte ușoară. Însă ce se întâmplă dacă trebuie să creăm elemente grafice mai complexe? Sunt destul de multe editoare de grafică vectorială user-friendly, care ar putea fi folosite pentru a crea grafică SVG: Adobe Illustrator, Macromedia Freehand, Corel Draw. Există de asemenea și câteva instrumente gratuite, cum ar fi Inkscape, OpenOffice, LibreOffice Draw și svg-edit (instrument online).
SVG-urile sunt ușor de editat, fapt care le conferă un mare avantaj față de grafica rasterizată.. Dacă vrem să facem schimbări în grafica vectorială, avem nevoie de un editor de text sau, și mai ușor, putem folosi un instrument de editare grafică vectorială.Important de reținut: componentele în grafica vectorială pot fi manipulate individual, prin urmare, în momentul editării, nu e nevoie să construim totul de la zero. Schimbarea unor caracteristici de bază cum ar fi culoarea sau conturul se poate face simplu și rapid.
Dimensiunea mai mică a fișierelor face ca transferul și încărcarea graficii să fie mult mai rapide. Din acest motiv, mulți preferă să folosească grafica vectorială: imaginea se încarcă mai repede, fără să fie nevoie să aștepțăm până când se încarcă imaginea completă.Chiar dacă dimensiunea imaginii este foarte mare, de obicei vom obține o dimensiune de fișier mult mai mică față de o imagine similară rasterizată.
De vreme ce vectorii folosesc linii, este mult mai ușor să se creeze o grafică extrem de detaliată. Totodată, ilustrațiile vor apărea mai clare decât pozele de mare rezoluție indiferent unde sunt folosite, de aceea sunt mai ușor de înțeles și arată mai bine și pe hârtie.
Imaginile vectoriale sunt fișiere de mici dimensiuni care depind de complexitatea imaginii, de cât de complicate sunt liniile și cât de complexe sunt punctele. Mărimea acestor grafice nu se bazează pe adâncimea de culoare.
SVG-urile au un DOM, fapt care deschide numeroase posibilități de a controla imaginea și comportamentul graficii. Este foarte ușor să atașăm event-handlers și să manipulăm elementele așa cum am face-o în cazul unor blocuri HTML. Tot din acest motiv putem inspecta cu ușurință elementele SVG în browser așa cum am face cu oricare alte elemente HTML. Mulțumită accesibilității DOM, putem stiliza elementele grafice în CSS și să le facem interactive cu JavaScript.
API-ul bazat pe DOM al SVG oferă și posibilitatea de a crea imagini SVG bazate pe documente server-side.
Există multe biblioteci JS pe web pentru a controla elementele SVG: D3.js, Raphael, Snap.svg, Processing.js, JSDrawing, PlotKit, SVGWeb și Paper.js.
Dacă SVG-urile sunt incluse direct într-un document HTML cu tag-ul <svg>, browserul nu trebuie să facă un request pentru a afișa grafica, ca în cazul în care se folosesc imagini cu tag-ul <img>. Acest fapt are ca rezultat o performanță mult mai bună în ceea ce privește încărcarea conținutului pe web.
Spre deosebire de imaginile de tip bitmap, XML prin natura sa poate fi citit automat, prin urmare fișierele SVG pot fi citite, analizate și indexate de către bot-urile din motoarele de căutare. Google a început indexarea conținuturilor SVG din august 2010 iar rezultatele pot fi găsite în sistemele standard și în căutarea de imagini.
Nu ar fi corect să nu amintim aici și câteva dezavantaje pe care le implică utilizarea de SVG. Din fericire, sunt puține cele care trebuie amintite:
Codul SVG care este structurat prin XML poate fi destul de lung și de complex, dificil de corectat.
În cazul folosirii multor animații complexe, motorul WebKit poate deveni considerabil mai lent.
Există însă și soluții prin care se poate extinde suportul oferit de browsere, cum ar fi Raphael.js sau folosirea tehnicii de înlocuire a SVG-urilor cu imagini statice pentru browserele mai vechi.
Să vedem cîteva aplicații practice ale SVG.
Deoarece avantajul principal al SVG-urilor este reprezentarea de forme vectoriale de bază, funcționează foarte bine când sunt utilizate pentru crearea de grafice și infographics-uri. Se pretează atât la crearea de grafice statice pornind de la anumite valori date, cât și graficele "live", alimentate în mod dinamic de către request-uri AJAX, input-ul utilizatorilor sau date generate în mod aleatoriu.
Hărțile sunt formate din linii și forme exacte. Aceste forme pot fi foarte ușor reprezentate cu ajutorul graficii vectoriale și se pretează acțiunilor precum zoom-ul pentru mai multe detalii.
Uneori trebuie să creăm un element UI mai complex, care e format din mai multe forme de bază, având în vedere în același timp și ca ele să fie responsive. Crearea lor cu ajutorul HTML și CSS ar putea cauza multe probleme (poziționare, masking, layering și probleme legate de stil).
O soluție mult mai bună ar fi să desenăm elementele într-un editor grafic și să îl salvăm sub formă de fișier SVG. Acest fapt ne-ar permite să avem un singur element scalabil și să nu ne facem griji în privința controlării mai multor div-uri.
Majoritatea logo-urilor sunt grafice bazate pe vectori. Prin urmare, de ce nu am putea defini un document SVG ca logo-ul nostru și să îl plasăm oriunde, scalându-l ușor la orice dimensiune e nevoie, fără să compromitem calitatea și salvând în același timp și lățimea de bandă?
Chiar dacă CANVAS este mai potrivit pentru redarea de jocuri (jocuri care folosesc grafică și animație bazate pe pixeli), SVG ar putea fi o alternativă viabilă pentru jocurile simple, care necesită mai puțină animație pentru personaje și mai mult spațiu pentru afișarea de informațiii ( de exemplu Sudoku).
Conținutul AD-ului ar ocupa spațiul oferit de document și, luând în considerare că CSS și JavaScript-ul sunt permise, majoritatea acțiunii ar fi limitată la un singur fișier SVG pe AD