SVG pentru dezvoltatori: înțelegerea elementelor de bază, beneficiilor și dezavantajelor

Grafica aduc expresii unice pe site-uri web și ajută dezvoltatorii să comunice fără efort utilizatorilor idei și concepte profunde. Este un element cheie pe internet și din 1999 a devenit scriptabil, ceea ce permite o prezentare mai complexă a imaginilor pe web.

Este posibil să fiți foarte familiarizat cu utilizarea diferitelor tipuri de fișiere de imagine raster: JPG, PNG și GIF. Să ne amintim puțin. Cu suport pentru 256 de culori (8 biți), GIF (Graphic Interchange Format) este un format remarcabil pentru animație și transparență, fără a include transparența alfa. Formatul PNG (Portable Network Graphic) este mult mai bun cu suport pentru peste 16 milioane de culori (24 de biți) și toate tipurile de transparență, cu condiția să nu aveți nevoie de animații.

Cel mai utilizat format de imagine pe web JPG sau JPEG (Joint Photographic Experts Group), în principal pentru că este compresibil, are suport pentru mai mult de 16 milioane de culori; 24 de biți sau 8 biți per pixel pentru tonuri de gri, dar fără suport pentru animație sau transparență. Prin urmare, JPG este principalul format grafic pe care dezvoltatorii îl folosesc pentru fotografiile statice. Nu am menționat Bitmap (BMP), deoarece de obicei nu este un format de imagine pentru web. BMP stochează date precise ale fiecărui pixel dintr-o imagine, ceea ce face fișierele cu adevărat mari (de peste 150 de ori dimensiunea JPG-urilor cu aceeași rezoluție) și neideale pentru grafica site-ului.

Aceste formate grafice dependente de rezoluție sunt grozave, mai ales atunci când sunt utilizate corespunzător. Cu toate acestea, toate au un neajuns comun, care a dus la introducerea SVG – singurul format de imagine vectorială pentru web.

Ce este SVG?

Grafica vectorială scalară (SVG) este un format de imagine bazat pe XML (Extensible Markup Language) care descrie elemente grafice bidimensionale, cum ar fi căi, linii, cercuri, modele, culori de text etc. Într-o definiție mai simplă, se referă la un format de imagine. cu suport pentru două dimensiuni, al cărui întreg comportament și existență sunt controlate de un fișier text XML.

O altă caracteristică interesantă este scalabilitatea sa; puteți lua imagini SVG la orice scară fără a le pierde rezoluția. Acest lucru se datorează faptului că SVG-urile redă imagini cu forme, numere și coordonate, nu cu pixeli, ca în formatele de imagine raster, care redă imagini prin definirea culorii pe care trebuie să picteze fiecare pixel.

Să vedem cum puteți crea imagini SVG și câteva dintre motivele pentru care ar trebui să luați în considerare utilizarea SVG în proiectele dvs.

Cum se creează imagini SVG

Puteți crea imagini SVG folosind orice editor de text, deși procesul este puțin tehnic și necesită anumite cunoștințe de design și matematică, mai ales dacă creați niște forme complexe. Imaginați-vă că desenați un avion pe o pânză folosind doar linii de coduri. Există o modalitate mai ușoară, totuși, dar haideți să o folosim pentru a înțelege conceptele de bază ale SVG.

Folosim elemente grafice SVG pentru a realiza imagini SVG într-un editor de text. Procesul este să inserați pur și simplu elementele dvs. grafice în interiorul etichetelor <svg> și </svg>, specificând coordonatele, dimensiunea, culoarea, etc. De exemplu, elementul <rect> poate fi folosit pentru a desena un dreptunghi așa cum se vede în următorul exemplu.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

Codul de mai sus va desena un dreptunghi albastru de 300x pe 300px în colțul din stânga sus al browserului, dacă este salvat ca fișier .svg și este deschis cu un browser. Acum, s-ar putea să vă întrebați de ce avem două înălțimi și lățimi în document. Să înțelegem întregul cod pentru a vedea de ce. După cum am menționat mai devreme, codul dvs. SVG trebuie să fie scris în elementul rădăcină (<svg> și </svg>) pentru a vă anunța browser-ul despre cum să interpreteze acele linii.

La fel ca în HTML, SVG necesită o declarație de spațiu de nume în elementul rădăcină. În exemplul de mai sus, am furnizat parametrul xmlns „http://www.w3.org/2000/svg” și W3C a recomandat versiunea SVG 1.1 în elementul rădăcină. Dimensiunea din interiorul elementului rădăcină se numește punct de vedere SVG, care este fereastra sau pânza prin care ar apărea imaginea SVG desenată în eticheta rădăcină. Punctul de vedere trebuie să aibă cel puțin aceeași dimensiune cu toate obiectele dvs. SVG înainte de a putea apărea în browser.

A doua linie este mai ușor de înțeles. Elementul <rect>, care este folosit pentru desenarea dreptunghiurilor, încorporează parametrii dreptunghiului propus începând cu dimensiunea. Lățimea stroke-ului descrie grosimea liniei, în timp ce cele două modele de culoare RGB informează browser-ul ce culoare trebuie să umple dreptunghiul și, respectiv, linia. E destul de simplu, nu?

Acum, putem muta dreptunghiul în interiorul paginii declarând o valoare pentru x și y astfel:

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

Desigur, nu vom uita să creștem dimensiunea punctului de vedere pentru a găzdui spațiul suplimentar pe care l-ar lua acest lucru.

Cel mai simplu mod de a crea imagini SVG este utilizarea instrumentelor de desen precum Adobe Illustrator, Inskape și Sketch. În loc să construiți de la zero, unele biblioteci JavaScript, cum ar fi Bonsai.js și D3.js, sunt surse bune pentru imagini SVG dacă căutați pictograme, forme complexe etc.

Adăugarea de imagini SVG

Unul dintre avantajele utilizării imaginilor SVG este ușurința de a le integra cu designul dvs. Pur și simplu le faceți referire în atributul src al unei etichete img. Acesta ar trebui să se refere la fișierul .svg salvat în folderul site-ului dvs. web astfel:

<img src='example.svg'>

Alternativ, puteți insera codurile SVG în documentul dvs. HTML, cu etichetele <svg></svg> începând și terminând codul așa cum sa menționat deja mai devreme.

De asemenea, puteți consulta imaginea SVG din CSS pentru imaginea de fundal, astfel:

.main-header {
background-image: url(example.svg);
}

Beneficiile utilizării SVG pentru dezvoltatori

Nevoia de SVG în proiectele dvs. web ulterioare nu poate fi subliniată prea mult având în vedere cerințele grafice actuale ale internetului. Pe lângă numărul nenumărate de dispozitive noi cu rezoluție puternică și dimensiuni de ecran, site-urile web oferă acum atât de multă interactivitate încât, fără a avea control total asupra graficii, ar putea fi dificil să oferi site-uri web de calitate profesională.

Câteva dintre beneficii includ:

Scalabilitate și capacitate de răspuns

Ca format de imagine care nu depinde de rezoluție, SVG-urile pot fi scalate la nesfârșit, fără a deveni pixelate. Acest lucru vă permite, în calitate de dezvoltator, să oferiți imagini grafice de top fiecărui utilizator, indiferent de puterea rezoluției și dimensiunea ecranului dispozitivelor lor. Puteți combina diferite căi, forme și elemente de text pentru a crea imagini uimitoare, care vor fi clare și clare la toate dimensiunile.

Acest lucru nu este disponibil în niciunul dintre formatele de imagine raster cu dimensiuni fixe, pur și simplu pentru că nu ar avea niciodată suficiente date pentru a umple fiecare spațiu atunci când sunt extrem de mărite. SVG calculează distanța dintre puncte pentru a menține căile conectate în mod constant, astfel încât imaginea să rămână clară la orice scară.

Extrem de flexibil și acceptă animația

Spre deosebire de imaginile raster, care oferă copia finală a unei imagini, imaginile SVG sunt complet editabile prin ajustarea codurilor folosind un editor de text sau instrumente speciale de desen. Folosind nume de clasă sau ID-uri ale elementelor dvs. SVG, vă puteți stila sau anima imaginile SVG folosind CSS. Animația imaginilor SVG este posibilă și cu Web Animation API, SMIL sau WebGL.

Cel mai important, vă puteți integra imaginile SVG cu alte tehnologii și documente proeminente ale platformei Web deschise. SVG-urile pot fi scriptate cu JavaScript și stilate cu CSS, cum ar fi HTML.

Compatibil cu SEO și fișier de dimensiune mică

Exista într-un format text, imaginile SVG îmbunătățesc accesibilitatea unui site web, ceea ce este un atu excelent în clasarea paginilor. În plus, motoarele de căutare pot indexa textul elementului SVG, ceea ce permite utilizatorilor să găsească site-ul dvs. web folosind cuvinte cheie din fișierul dvs. SVG.

SVG se încarcă mult mai repede, deoarece nu are un fișier de descărcat și fără a fi nevoie de o solicitare HTTP. Îmbunătățirea rezoluției unui fișier imagine raster înseamnă creșterea numărului de puncte (pixeli). Acest lucru va crește dimensiunea imaginii, ceea ce va trage timpul de încărcare a site-ului dvs. Acest lucru este departe de cazul când utilizați SVG. Ca imagine creată folosind un set de instrucțiuni și coordonate, dimensiunile fișierelor SVG sunt incredibil de mici (când sunt optimizate) în comparație cu orice alt tip de fișier imagine. Acest lucru are ca rezultat un timp de încărcare mai rapid, o performanță crescută a paginii, o poziție mai ridicată în motorul de căutare, îmbunătățind în același timp experiența utilizatorului. Pentru mai multe informații despre aceasta, vizitați Consultant SEO Londra

SVG are propriul model de obiect document

SVG există ca un document separat, considerat a avea propria sa structură și poziționat în interiorul DOM-ului normal. Această reputație este crucială pentru atributul viewBox, care ne permite să creăm un punct de vedere de orice dimensiune, să desenăm imagini pe diferite dimensiuni de pânză și să le afișam fără a actualiza proprietățile SVG.

SVG este formatul de fișier imagine al viitorului

Fără apariția unor dispozitive mai puternice, cu o rezoluție a ecranului nebunește de magnifică, dezvoltatorii nu ar trebui să facă față durerilor de cap copleșitoare ale optimizării imaginilor pentru diferite dispozitive. Dar acest lucru nu va deveni mai ușor în câțiva ani de acum înainte, împreună cu foamea crescândă de interactivitate sporită de pe site-uri web.

Cumva gestionarea acestor provocări prin difuzarea de imagini diferite pentru a se potrivi cu dimensiunea punctului de vedere al utilizatorilor nu este rentabilă. Și de dragul sustenabilității afacerii prin economisirea lățimii de bandă, bani și îmbunătățirea experienței utilizatorului, eforturile de a trece la formatul de imagine SVG devin inevitabil o prioritate de vârf. Există o comunitate în creștere de susținători SVG.

Înainte de introducerea de către W3C a SVG 1.1 (Ediția a doua) pe 16 august 2011, care este potențial în curs de revizuire pentru o versiune mai nouă, SVG 1.0 și 1.1 (Prima ediție) schimbau deja modul în care gestionăm imaginile pe internet. Aceasta este o promisiune a ceva care valorează mai mult decât formatul obișnuit de imagine raster, care este încă foarte util în starea noastră actuală de programare web. SVG nu este cel mai bun format de imagine în toate cazurile. Versiunile ulterioare ale SVG sunt de așteptat să abordeze unele dintre dezavantajele SVG; vor fi discutate mai târziu în acest articol.

Când să utilizați formatul de imagine SVG

Desigur, formatele de imagine dependente de rezoluție sunt încă cele mai bune pentru fotografii și alte imagini bine detaliate. Iată o listă a cazurilor comune în care formatele de imagine SVG sunt cele mai bune.

1. Logo-uri și icoane
2. Imagini interactive precum diagrame, grafice, hărți, infografice
3. Animații
4. Interfețele aplicației
5. Diagrame simple și ilustrații
6. Efecte speciale, cum ar fi lipiciul sau transformarea formei
7. Lucrări de artă de intensitate scăzută și grafică simplă

Dezavantajele SVG pentru dezvoltatori

SVG nu este acceptat de toate browserele: browserele vechi tratează SVG-urile în același mod în care un Windows XP învechit ar trata unitățile flash sau Canon EOS 5DSr atunci când încercați să le conectați. Pe scurt, SVG nu funcționează pe browsere mai vechi; IE8 și mai mici. Cu toate acestea, având în vedere că browserele vechi nu fac cu adevărat parte din nicio cauză viitoare, împreună cu faptul că doar o mână de persoane le mai folosesc, nu este un motiv major pentru a nu folosi SVG-urile.

SVG nu acceptă atât de multe detalii: fiind un amestec de căi și puncte, SVG nu are cadrul pentru a afișa la fel de multe detalii ca și formatele de imagini raster bazate pe pixeli. SVG nu funcționează cu nimic capturat cu o cameră. Prin urmare, fotografiile și alte forme de grafică cu atât de multe detalii sunt cel mai bine afișate folosind formate de imagine raster datorită suportului lor pentru o densitate mai mare de culori.

Înțelegerea codului SVG: deși dezvoltatorii pot fi socotiți pentru că știu să folosească mai multe limbaje de programare web, creșterea acestei sarcini s-a dovedit a fi o provocare. Modelul de cod SVG nu este de fapt dificil sau total diferit de limbajele de programare web. Dar crearea sau manipularea imaginilor atrăgătoare necesită un efort. Acest lucru nu este ceea ce orice dezvoltator ar dori să investească mult timp când imaginile bitmap sunt la îndemână și nu necesită efort pentru a le încorpora.

Concluzie

Comportamentul graficii de pe un site web ca răspuns la gama sa largă de utilizatori este un aspect important al dezvoltării web în prezent. Iar formatul de imagine SVG este soluția excelentă, în loc să redeze mai multe dimensiuni de imagine, așa cum se vede de obicei în design-urile noastre actuale. Acest lucru se datorează faptului că browserele calculează modul în care imaginea ar trebui să fie redată folosind un set de instrucțiuni care asigură imagini clare și clare la orice scară.

Imaginile bitmap rămân cele mai bune pentru imagini foarte detaliate, cum ar fi fotografii, în timp ce imaginile SVG sunt folosite pentru imagini mai puțin detaliate, cum ar fi pictograme, logo-uri, diagrame, infografice etc. Vă sfătuiesc să rămâneți cu instrumente de desen precum Illustrator sau Sketch pentru crearea de imagini SVG și biblioteci online pentru pictograme și forme populare. Codarea ar trebui să fie necesară numai atunci când doriți să vă manipulați imaginile SVG.

Vă rugăm să ne spuneți cum folosiți SVG și despre alte sfaturi cool care nu sunt distribuite aici.