De ce folosim SVG?

Sectorul dezvoltării web crește într-un ritm rapid, iar imaginile SVG (grafică vectorială scalabilă) devin din ce în ce mai populare. Ca imagini vectoriale, SVG-urile sunt compuse din ecuații matematice care definesc poziționarea și culoarea liniilor și curbelor care alcătuiesc forme grafice și text în format XML. SVG-urile sunt utilizate pentru pictograme, sigle, desene grafice și fonturi.

Utilizarea SVG-urilor este o alegere ușoară odată ce ați luat în considerare avantajele pe care le oferă. Pentru un client, veți obține o calitate superbă pe orice dispozitiv. Pentru noi, ca dezvoltatori, există și mai multe motive pentru a utiliza SVG.

Să discutăm acum câteva dintre beneficiile SVG.

1. Format bazat pe text

Elementele SVG conțin text, ceea ce îmbunătățește foarte mult accesibilitatea unui site web. Dar principalul avantaj este că acest text este indexat de motoarele de căutare. Și un utilizator poate găsi un fișier SVG prin Google.

2. Scalabilitate

Calitatea imaginilor SVG nu depinde de rezoluție. Spre deosebire de imaginile din alte formate sau fonturi de pictograme, SVG-urile arată perfect clar pe orice dispozitiv cu orice dimensiune a ecranului. Scalabilitatea înseamnă, de asemenea, că, dacă utilizați aceeași imagine pe tot site-ul, dar în dimensiuni diferite, utilizați un singur SVG. Nu trebuie să creați mai multe copii ale acestuia, ca în cazul PNG. În schimb, încorporați aceeași imagine și definiți dimensiunea acesteia direct în cod SVG.

Scalabilitate

3. Performanță ridicată

Dacă acordați prioritate performanței, ar trebui să utilizați SVG. Cu SVG, nu este nevoie de o solicitare HTTP pentru a încărca într-un fișier imagine. Pagina se încarcă mai repede, deoarece nu are fișiere de descărcat. Timpul de încărcare mai rapid se traduce printr-o performanță mai bună a paginii web și o clasare mai bună a motorului de căutare. La rândul său, îmbunătățește experiența utilizatorului.

4. Dimensiune mică a fișierului

Dimensiunea fișierelor SVG simple este definită de culorile, straturile, gradientele, efectele și măștile pe care le conține. Dimensiunea unui PNG sau a oricărui alt fișier grafic raster este definită de numărul de pixeli din care este format. Cu cât este mai mare o imagine PNG, cu atât are o dimensiune mai mare. Totuși, nu este cazul pictogramelor SVG. De asemenea, SVG-urile pot fi optimizate și vă voi spune cum mai târziu în acest articol.

Dimensiunea fișierului SVG

5. Numeroase oportunități de editare și animare

Spre deosebire de imaginile raster, imaginile vectoriale pot fi editate atât în ​​programe speciale de desenare vectorială, cât și direct într-un editor de text. De asemenea, puteți edita culorile sau dimensiunile pictogramelor SVG direct prin CSS. În ceea ce privește animarea SVG-urilor, se poate face cu ajutorul animațiilor SMIL, Web Animations API, WebGL sau CSS. Derulați în jos pentru a afla mai multe despre animația CSS a imaginilor SVG.

6. Integrare cu HTML, XHTML și CSS

SVG a fost conceput „pentru a se integra și extinde alte tehnologii proeminente de platformă web deschisă, cum ar fi X / HTML, CSS și Javascript”, conform W3C. Deci, spre deosebire de diferite formate de imagine, acest format poate fi ușor integrat cu alte documente și tehnologii.

7. Suport W3C Document Object Model

Există un sprijin comunitar în creștere pentru SVG. Consorțiul World Wide Web (W3C) a susținut întotdeauna că Internetul nu se poate descurca fără imagini vectoriale. Această organizație practic a creat formatul SVGși o susțin activ în zilele noastre.

Care sunt inconvenientele SVG?

Numărul mare de piese mici face ca utilizarea formatului SVG să fie irațională. Cu cât o imagine constă în mai multe părți, cu atât crește în greutate.

De exemplu, aici sunt două hărți SVG ale Statelor Unite. Al doilea este puțin mai detaliat decât primul. Dar nivelul mai ridicat de detalii a costat aproape o creștere de cinci ori a dimensiunii fișierului – 33 KB comparativ cu 147 KB. Dacă această hartă nu ar fi monocromatică, creșterea ar fi mult mai mare.

Hărți SVG

Dacă imaginea este liniară și conține câteva culori – SVG este o soluție. Cu toate acestea, dacă detaliile contează și există multe dintre ele, PNG sau JPEG pot fi mai potrivite.

De asemenea, rețineți că SVG nu poate fi utilizat pentru fotografii. Dacă utilizați o fotografie pe site-ul dvs., SVG nu este cea mai bună opțiune. Cu siguranță ar trebui să mergeți cu un format de imagine raster.

Cum să optimizați imaginile SVG

Când redăm un format vectorial, trebuie să scriem un cod SVG suplimentar. Rezultatul final ar trebui optimizat folosind diferite servicii. Cel mai adesea, pentru optimizarea SVG, folosesc un Node.js instrument SVGO. Este destul de ușor de utilizat și nu este nevoie să încărcați imaginile pe alte site-uri web.

Exemplu de optimizare SVG folosind SVGO
Exemplu de optimizare SVG folosind SVGO

Cum să animați SVG

Grafica SVG de pe web poate fi animată în mai multe moduri:

  1. SMIL, care este specificația nativă de animație SVG
  2. Web Animations API, care este un API JavaScript nativ care vă permite să creați animații secvențiale mai complexe fără a încărca scripturi externe
  3. WebGL
  4. Animație CSS

Să luăm în considerare ultima.

Animație CSS este folosit pentru a evita supraîncărcarea serviciului cu biblioteci mari pentru animarea icoanelor și încărcătoarelor.

Pentru a vedea exemplul SVG verificați gălbenuș animat, al cărui design grafic a fost inițial desenat în Sketch.

Gif SVG

După cum puteți vedea aici, folosesc Keyframe Animation Syntax pentru animație. Acesta este implementat prin setarea poziției inițiale a unui element după id (0%), tranziție (50%) și poziția finală (100%). Pentru a realiza o animație lină, valorile inițiale și finale sunt egale.

Aici sunt câteva beneficii a utilizării abordării CSS pentru animația SVG:

  1. Nu aveți nevoie de o bibliotecă externă.
  2. Preprocesatoarele (cum ar fi Sass sau Less) vă permit să creați variabile.
  3. Puteți utiliza onAnimationEnd și alte cârlige de animație cu JavaScript nativ.
  4. Această abordare este ușor de utilizat pentru dezvoltarea de design web receptiv, deoarece vă puteți modifica animația cu interogări media.

dezavantaje de utilizare a animației CSS sunt următoarele:

  1. Nu puteți produce unele efecte fizice complexe, care ar face animația mai realistă.
  2. O mulțime de recalculare trebuie făcută dacă reglați calendarul.
  3. Grafica CSS și SVG de pe mobil necesită uneori hack-uri ciudate.

De exemplu

Totuși, putem realiza câteva proiecte interesante cu ajutorul animației CSS simple și triviale. De exemplu, am realizat un joc video simplu folosind HTML, CSS și un pic de JavaScript. Toate SVG-urile au fost desenate în Sketch. Obiectivul acestui joc este de a salva prințesa. În orice situație, trebuie doar să faceți clic. Puteți găsi proiectul la mine GitHub.

Pentru a încheia

SVG-urile sunt un format excelent de imagine. Sunt scalabile, ușoare, bazate pe text și eficiente. Acestea sunt ușor de editat, animat și integrat. Important, acestea sunt acceptate de aproape orice browser, cu excepția Internet Explorer 8 și Android 2.3.

În timp ce învățați să lucrați cu imagini grafice vectoriale scalabile vă poate lua ceva timp, este o investiție care va da roade având în vedere beneficiile SVG.

Ai o idee pentru un proiect software?

Compania mea KeenEthics este o echipă cu experiență dezvoltatori de aplicații web. În cazul în care aveți nevoie de o estimare gratuită a unui proiect similar, nu ezitați Intrați în legătură.

Puteți citi mai multe articole similare pe blogul meu Keen. Permiteți-mi să vă sugerez să citiți Valoarea testării utilizatorilor sau 7 cazuri când nu ar trebui să utilizați Docker.

PS

De asemenea, aș dori să spun „mulțumesc” pentru Maryna Yanul pentru coautorarea acestui articol, precum și pentru cititori pentru a ajunge la final!

Articolul original postat pe blogul KeenEthics poate fi găsit aici: O perspectivă nouă despre De ce, când și cum să utilizați SVG.