ABONAMENTE VIDEO REDACȚIA
RO
EN
NOU
Numărul 150
Numărul 149 Numărul 148 Numărul 147 Numărul 146 Numărul 145 Numărul 144 Numărul 143 Numărul 142 Numărul 141 Numărul 140 Numărul 139 Numărul 138 Numărul 137 Numărul 136 Numărul 135 Numărul 134 Numărul 133 Numărul 132 Numărul 131 Numărul 130 Numărul 129 Numărul 128 Numărul 127 Numărul 126 Numărul 125 Numărul 124 Numărul 123 Numărul 122 Numărul 121 Numărul 120 Numărul 119 Numărul 118 Numărul 117 Numărul 116 Numărul 115 Numărul 114 Numărul 113 Numărul 112 Numărul 111 Numărul 110 Numărul 109 Numărul 108 Numărul 107 Numărul 106 Numărul 105 Numărul 104 Numărul 103 Numărul 102 Numărul 101 Numărul 100 Numărul 99 Numărul 98 Numărul 97 Numărul 96 Numărul 95 Numărul 94 Numărul 93 Numărul 92 Numărul 91 Numărul 90 Numărul 89 Numărul 88 Numărul 87 Numărul 86 Numărul 85 Numărul 84 Numărul 83 Numărul 82 Numărul 81 Numărul 80 Numărul 79 Numărul 78 Numărul 77 Numărul 76 Numărul 75 Numărul 74 Numărul 73 Numărul 72 Numărul 71 Numărul 70 Numărul 69 Numărul 68 Numărul 67 Numărul 66 Numărul 65 Numărul 64 Numărul 63 Numărul 62 Numărul 61 Numărul 60 Numărul 59 Numărul 58 Numărul 57 Numărul 56 Numărul 55 Numărul 54 Numărul 53 Numărul 52 Numărul 51 Numărul 50 Numărul 49 Numărul 48 Numărul 47 Numărul 46 Numărul 45 Numărul 44 Numărul 43 Numărul 42 Numărul 41 Numărul 40 Numărul 39 Numărul 38 Numărul 37 Numărul 36 Numărul 35 Numărul 34 Numărul 33 Numărul 32 Numărul 31 Numărul 30 Numărul 29 Numărul 28 Numărul 27 Numărul 26 Numărul 25 Numărul 24 Numărul 23 Numărul 22 Numărul 21 Numărul 20 Numărul 19 Numărul 18 Numărul 17 Numărul 16 Numărul 15 Numărul 14 Numărul 13 Numărul 12 Numărul 11 Numărul 10 Numărul 9 Numărul 8 Numărul 7 Numărul 6 Numărul 5 Numărul 4 Numărul 3 Numărul 2 Numărul 1
×
▼ LISTĂ EDIȚII ▼
Numărul 27
Abonament PDF

Avantajele folosirii SVG (Scalable Vector Graphics)

Peter Krejcik
Web Designer
@Yardi România



DIVERSE

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.

Ce este SVG?

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:

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:

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.

Avantajele folosirii SVG-urilor

Sunt scalabile

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.

Ușor de creat

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

Ușor de editat

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.

Dimensiuni mai reduse

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ă.

Mai multe detalii

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.

Dimensiunea fișierului în funcție de complexitate

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.

API bazat pe un DOM accesibil

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.

Request-uri HTTP reduse

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.

SVG-urile pot fi folosite pentru SEO

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.

Câteva dezavantaje...

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:

Dezvoltare complexă

Codul SVG care este structurat prin XML poate fi destul de lung și de complex, dificil de corectat.

Probleme de performanță

În cazul folosirii multor animații complexe, motorul WebKit poate deveni considerabil mai lent.

Nu este suportat complet de browsere mai vechi (Internet Explorer 8 și versiuni mai vechi)

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.

Utilitatea SVG

Să vedem cîteva aplicații practice ale SVG.

Grafice

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ți

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.

Elemente UI complexe

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.

Logo-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ă?

Jocuri ușoare

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

AD-uri responsive

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

Linkuri utile

NUMĂRUL 149 - Development with AI

Sponsori

  • Accenture
  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • BoatyardX
  • .msg systems
  • P3 group
  • Ing Hubs
  • Cognizant Softvision
  • Colors in projects