Formatul SVG – imagini responsive pe site-ul tău web

Responsivitatea – adică ajustarea site-ului la dimensiunile ecranului, oferă utilizatorilor o experiență superioară.

Oamenii doresc să aibă o navigare comodă pe site-ul tău, atât pe desktop, cât și pe telefon mobil și au nevoie de o calitate sigură a fiecărui element, inclusiv a elementelor grafice.

Unele imagini pot părea la prima vedere de calitate bună, dar atunci când utilizatorul le va mări, pot apărea dubii dacă ceea ce vede este rezultatul ochelarilor nepotriviți sau un neajuns al site-ului ;).

În ajutorul nostru vine formatul grafic SVG – care deși deține specificarea W3C din 2001, actualizată în 2011, încă nu a obținut faima pe care o merită.

Atunci când alegem imaginile pentru site-ul nostru avem de a face cu două tipuri de imagini: de tip raster și de tip vector. Imaginile de tip raster sunt poze obișnuite, au o rezoluție setată, sunt compuse din pixeli.

La mărire, imaginea pierde din calitatea sa și poate deveni ”pixelată”. Imaginea vectorială este creată cu ajutorul punctelor, formelor și a liniilor. Mărirea lor nu determină pierderea calității.

Imaginile vector pot include un număr limitat de detalii. Din această cauză sunt foarte eficiente atunci când sunt folosite pentru elemente tipografice, logouri, pictograme, ilustrații. Formatul SVG, care desigur aparține categoriei doi, devine din ce în ce mai important în proiectarea site-urilor web.

Se preconizează că în viitorul apropiat formatul SVG poate atinge popularitatea extensiilor tradiționale: JPG, PGN sau GIF.

SVG, sau Scalable Vector Graphics – definiție

Fișierul SVG, sau fișierul grafic vectorial scalabil, este un format simplu grafic bazat pe XML, care folosește trei tipuri de elemente pentru definirea graficii: imagini, text și forme vectoriale (linii, căi, linii de contur, linii curbe, poligoane).

Fiece program care poate citi formatul XML – de exemplu un browser, poate afișa imagini utilizând informația care este inclusă în fișierul SVG. Formatul descris prin limbaj de tip text grafic, este folosit mai întâi de toate pentru definirea imaginilor plane, caracterizate de două dimensiuni, dar poate proiecta și interacțiuni, efecte de animație și script-uri.

Cele mai importante avantaje ale fișierului SVG

Imaginile SVG sunt deservite de majoritatea browserelor pentru desktop și smartphone. Mai jos vom prezenta câteva motive pentru care formatul SVG se potrivește perfect pentru proiectarea site-urilor web.

Posibilități avansate de scalare

Prima și cea mai importantă caracteristică care diferențiază formatul SVG de celelalte extensii tradiționale, este posibilitatea de a fi scalat – acest tip de fișier nu este limitat de parametrul rezoluției.

Fișierele SVG păstrează aceeași calitate a imaginii independent de mărimea ecranului pe care sunt afișate. Practic vorbind, imaginea de tip raster mărită poate arăta ștearsă, chiar ”pixelată”, dacă nu deține o rezoluție corespunzătoare și pixelii imaginii trebuie să se mărească peste dimensiunile sale inițiale.

În schimb specificul formatului SVG determină, ca fișierele să nu depindă de numărul de pixeli, și datorită acestui fapt imaginile să fie mereu clare.

Dimensiunile mici ale fișierelor

Cea mai mare problemă a elementelor grafice pe site-urile responsive (optimizate pentru telefoane mobile) este dimensiunea fișierelor. Imaginile de tip raster nu se scalează în același mod ca și imaginile vectoriale. Din această cauză pentru o imagine clară afișată pe un ecran de dimensiuni mari este nevoie de o rezoluție cât mai mare.

Desigur putem amplasa pe site o imagine cu o rezoluție ”destul” de mare, dar în acest caz apare riscul ca utilizatorul să fie nevoit să descarce un fișier mai mare de cât cel necesar pentru dispozitivul/ecranul său. Acest fapt va influența negativ asupra vitezei de încărcare a paginii noastre web și a experienței utilizatorului.

În cazul extensiei SVG mărimea fișierului este mereu aceeași, independent de dimensiunile pentru care este afișată imaginea. Dimensiunea fișierului SVG depinde de numărul de detalii de exemplu: straturi, gradient, animații, efecte.

Dimensiunile practic nu influențează mărimea fișierului, din această cauză SVG se potrivește perfect pentru logotipuri, fonturi, reprezentarea datelor statistice cu ajutorul graficelor. Desigur putem de exemplu crea o imagine vectorială a Palatului Parlamentului cu mii de detalii, dar acest fișier va deveni foarte ”greu”. Din această cauză pentru fotografii se potrivesc cel mai bine extensiile JPEG și PNG.

Viteza de încărcare a site-ului

Aici nu este vorba doar de dimensiunea redusă a fișierului SVG care desigur influențează în mod direct viteza de încărcare a site-ului. Fișierul de tip SVG se încarcă uimitor de repede atunci când este adăugat direct la codul HTML.

În baza codului textual, browserul ”desenează” elementul grafic fără necesitatea descărcării acestuia. Introducerea SVG în codul HTML, numită ”inline SVG” elimină cererile HTTP necesare pentru încărcarea elementelor grafice și accelerează funcționarea site-ului.

SEO și accesibilitatea

De obicei imaginile nu includ conținut care poate fi indexat de motoarele de căutare – este nevoie să setăm etichetele ALT și TITLE pentru imaginile noastre. Imaginile SVG sunt definite cu ajutorul fișierelor XML și datorită acestui fapt este foarte ușor să amplasăm cuvinte cheie în aceste imagini, care mai apoi vor fi identificate de roboții motoarelor de căutare.

Pe lângă aceasta – formatul textual permite recunoașterea textului și a imaginilor de cititoarele de ecran pentru utilizatorii nevăzători – ceea ce îmbunătățește suplimentar și accesibilitatea site-ului nostru.

Animații

Fișierele SVG pot fi stilizate și animate, printre altele, cu ajutorul limbajelor CSS și JavaScript. Efectele acestor transformări pe care le folosim pentru elementele HTML, pot fi la fel utilizate și pentru fișierele SVG.

Desigur așa ceva necesită cunoștințe corespunzătoare ale limbajelor de programare, dar posibilitățile sunt imense. De exemplu putem crea o pictogramă ”ușoară”, care se va modifica în dependență de dimensiunile ecranului, densitatea pixelilor și alți factori.

Editarea

Fișierele SVG sunt uimitoare deoarece pot fi editate cu ajutorul programelor de editare a fișierelor grafice vectoriale (ca de exemplu Adobe Illustrator i Xd, Corel Draw sau Sketch) dar la fel și în programele de editare textuale.

În cel de al doilea caz putem modifica direct coordonatele, expresii specifice și reguli CSS, JavaScript.

Fișiere SVG gratuite și crearea site-urilor în WebWave

Pentru a crea o pagină web cu fișiere SVG puteți folosi programul WebWave (Vezi aici o recenzie detaliată a programului). Lucrul cu imaginile SVG este simplificat și mai mult de baza de pictograme gratuite pe care le putem folosi gratuit.

Printre pictogramele și alte elemente grafice accesibile în WebWave fiecare va găsi ceea de ce are nevoie. Ține minte că formatul SVG îți va ajuta să păstrezi claritatea și calitatea imaginii pe orice dimensiune a ecranului.

Concluzie

Calitatea ecranelor pe care le folosim permanent crește. Din această cauză trebuie să avem grijă de elementele grafice de pe site-ul nostru.

Din cauză că fișierele SVG pot fi responsive, animate și complexe, nu există nici un motiv de rezervă pentru folosirea lor pe site-urile noastre.

Desigur că pentru fotografii este de dorit să rămânem la extensiile imaginilor de tip raster, pentru a putea reda toate detaliile și culorile necesare. Însă pentru elemente gen logo, pictograme, fonturi sau grafice, fișierele vectoriale se potrivesc perfect.

Fișierele SVG sunt ”citite” de majoritatea browserelor din ziua de azi (cu excepția Internet Explorer 8 și versiunile precedente și Android).

Scalabilitatea infinită determină ca imaginile SVG să rămână clare și frumoase pe orice dispozitive, chiar și pe cele mai performante.