Ce este un fișier SVG (și cum îl utilizați)?

Publicat: 2020-08-18

O grafică vectorială scalabilă (SVG) este un tip unic de format de imagine. Spre deosebire de alte soiuri, SVG-urile nu se bazează pe pixeli unici pentru a compune imaginile pe care le vedeți. În schimb, ei folosesc date „vectoriale”.

Prin utilizarea SVG-urilor, veți obține imagini care pot ajunge la orice rezoluție, ceea ce este util pentru designul web, printre multe alte cazuri de utilizare. În acest articol, vom pune întrebarea: Ce este un fișier SVG? Vă vom învăța apoi cum să utilizați formatul.

Să ajungem la asta!

Abonați-vă la canalul nostru Youtube

Ce este un fișier SVG?

SVG-urile sunt elemente grafice construite folosind vectori. Pentru cei neinițiați, un vector este un element cu o magnitudine și o direcție specifice. În teorie, puteți genera aproape orice tip de grafică doriți folosind o colecție de vectori. Luați această imagine a unui dreptunghi albastru cu o margine și o umbră negre, de exemplu:

Un pătrat albastru în format PNG.

Acesta este un alt tip de fișier de imagine numit Portable Network Graphic (PNG), utilizat pentru ilustrații și desene. Dacă doriți să reproduceți ceva similar folosind grafică vectorială, ar trebui să îl generați cu cod XML (același lucru folosit pentru sitemap-uri.) Următorul cod ar putea obține același rezultat: 

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>

În teorie, dacă luați acest cod și îl introduceți într-un fișier HTML, veți vedea un set similar de dreptunghiuri cu PNG - adică, atâta timp cât browserul pe care îl utilizați acceptă fișiere SVG. Deși ambele imagini arată la fel, fișierele SVG oferă o serie întreagă de avantaje pe care alte formate nu le au. De exemplu, SVG-urile sunt capabile să păstreze calitatea imaginii pe măsură ce cresc în sus sau în jos.

Dacă continuați să măriți dreptunghiul PNG, veți observa că calitatea acestuia începe să scadă la un moment dat. Cu o grafică bazată pe pixeli mai complexă, degradarea devine evidentă mult mai rapidă. Cu toate acestea, SVG-urile arată bine practic la orice rezoluție.

De ce să folosiți un fișier SVG?

Multe site-uri web folosesc formate precum PNG și JPEG aproape interschimbabil. Totuși, SVG-urile nu sunt la fel de versatile. Dacă încercați să recreați o fotografie complexă folosind vectori, veți ajunge de obicei cu fișiere SVG masive și inutilizabile.

Formatul SVG este o opțiune fantastică pentru un set întreg de alte scenarii, totuși:

  • Design logo-uri. Deoarece probabil veți reutiliza logo-urile pe site-uri web și pe rețelele de socializare, utilizarea SVG rezolvă orice potențiale probleme de scalabilitate.
  • Diagrame. SVG-urile se potrivesc perfect pentru diagrame și orice alt tip de ilustrație care se bazează pe linii simple.
  • Elemente animate. Puteți utiliza CSS pentru a anima SVG-uri, ceea ce le face o componentă utilă în proiectarea site-ului, în special pentru microinteracțiuni.
  • Diagramele și graficele. Puteți utiliza SVG-uri pentru a crea grafice și diagrame scalabile care acceptă animații.

Deoarece SVG-urile folosesc formatul XML, acest lucru le face și căutabile și indexabile. Cititoarele de ecran pot interpreta fișierele SVG atâta timp cât utilizați etichetele de accesibilitate corecte.

În cele din urmă, fișierele SVG tind să fie mult mai mici decât echivalentele de înaltă rezoluție din alte formate. Pe hârtie, acest lucru înseamnă că este posibil să puteți reduce unele dintre dimensiunile paginii dvs. și să reduceți timpul de încărcare. Cu toate acestea, dacă nu intenționați să convertiți majoritatea imaginilor dvs. în SVG-uri, creșterea performanței va fi probabil minimă.

Cum se creează un fișier SVG (2 moduri)

Există două abordări pe care le puteți lua atunci când vine vorba de fișiere SVG. Puteți să le creați de la zero sau să luați o imagine existentă și să o convertiți. Să începem cu metoda manuală.

1. Creați manual un fișier SVG

Crearea unui fișier SVG nu implică de obicei introducerea informațiilor vectoriale așa cum am făcut mai devreme. Acesta a fost doar un exemplu pentru a arăta conceptul. În schimb, creați SVG-uri ca orice altă grafică - utilizând un program de proiectare și salvând fișierul ca SVG. Multe instrumente moderne de design grafic acceptă SVG-urile. Unele opțiuni de top includ:

  • Adobe Illustrator, Photoshop, Animate și InDesign
  • Microsoft Visio
  • Inkscape
  • GIMP

Ultimele două opțiuni din această listă sunt soluții open-source. Acest lucru le face o opțiune excelentă de a experimenta crearea de SVG-uri fără a plăti pentru software premium. De fapt, ele pot fi tot ce ai nevoie.

Dacă nu aveți nicio experiență cu designul grafic, crearea propriilor sigle sau alte elemente pentru site-ul dvs. web va fi o provocare. În acest caz, cel mai bun pariu va fi să luați imagini existente și să le convertiți în SVG-uri.

2. Convertiți imaginile existente în SVG-uri

Există o mulțime de instrumente gratuite pe care le puteți utiliza pentru a converti imagini din alte formate în SVG-uri. Majoritatea software-urilor menționate în ultima secțiune vă permit să vă deschideți imaginile și să le salvați ca fișiere SVG.

Dacă nu doriți să descărcați niciun software, puteți utiliza și instrumente de conversie online - și există o mulțime de servicii la care puteți apela. Un exemplu este Vector Magic, pe care îl puteți utiliza pentru a converti toate tipurile de fișiere în SVG-uri:

Pagina de pornire Vector Magic.

Ne place acest instrument special, deoarece vă arată o previzualizare a fișierului dvs. SVG înainte de al descărca. De asemenea, puteți utiliza un editor încorporat pentru a face mici modificări și corecții înainte de a descărca fișierul:

Editarea unui fișier SVG.

Desigur, aceasta este doar o opțiune. Alte servicii de convertor PNG și JPG în SVG includ Convertio și Img2Go. Veți dori să faceți câteva cercetări pentru a găsi cea mai potrivită soluție pentru nevoile dvs.

Din experiența noastră, majoritatea convertoarelor SVG oferă rezultate de o calitate similară. Pentru cele mai bune rezultate posibile, convertorul pe care îl utilizați nu contează la fel de mult ca imaginile pe care le selectați.

De regulă, este logic să folosiți formatul SVG pentru imagini „simple” - adică imagini cu margini definite și linii curate. Cu cât imaginea este mai complexă, cu atât este mai probabil că veți ajunge cu un fișier SVG masiv, o corvoadă de editat manual sau animat.

Cum se folosește un fișier SVG (în și în afara WordPress)

SVG-urile nu sunt atât de greu de utilizat. Adăugarea unui fișier SVG pe site-ul dvs. web este la fel de ușor ca preluarea codului său și lipirea acestuia într-un document HTML oriunde doriți să treacă imaginea.

Dacă dvs. și vizitatorii site-ului dvs. utilizați browsere care acceptă fișiere SVG (și majoritatea o fac în aceste zile), vor putea vedea elementul. Animarea SVG-urilor este, desigur, mai complicată, deoarece necesită utilizarea CSS.

Totuși, procesul se schimbă dacă utilizați WordPress. Sistemul de gestionare a conținutului (CMS) nu acceptă SVG-urile din cutie. Dacă doriți să activați suportul SVG, astfel încât să puteți încărca fișiere direct pe site-ul dvs. web, veți dori să utilizați un plugin cum ar fi Safe SVG:

Pluginul Safe SVG.

De asemenea, este posibil să activați manual suportul SVG în WordPress, dar procesul este mult mai implicat. În acest caz, utilizarea unui plugin este opțiunea mai sigură.

Concluzie

Adaptarea site-ului dvs. pentru a utiliza fișiere SVG este mult mai ușoară decât v-ați putea imagina. Adevărata provocare constă în proiectarea SVG-urilor de la zero sau alegerea imaginilor potrivite pentru a le converti în format. Din fericire, există o mulțime de instrumente pe care le puteți folosi pentru a face ambele.

Unele opțiuni excelente includ Adobe Illustrator, InDesign și GIMP. Folosind aceste instrumente, puteți crea și converti imaginile existente în SVG-uri. Dacă utilizați WordPress, puteți încărca acele SVG utilizând pluginul Safe SVG, apoi distrați-vă animându-le.

Aveți întrebări despre cum să utilizați fișiere SVG? Să vorbim despre ele în secțiunea de comentarii de mai jos!

Miniatură imagine articol de VectorsMarket / shutterstock.com