SVG (Scalable Vector Graphics)

SVG, standardul web pentru descrierea graficelor bidimensionale. Folosit pentru a descrie obiecte bidimensionale (grafică sau animație).

SVG, standardul web pentru descrierea graficelor bidimensionale

SVG (Scalable Vector Graphics) este un standard web pentru descrierea graficelor bidimensionale.

Formatul de fișier SVG se bazează pe XML (Extensible Markup Language).

Acesta a fost publicat pentru prima dată de un grup de lucru al World Wide Web Consortium (W3C), în 2001.

Poate fi folosit pentru a descrie obiecte bidimensionale (grafică sau animație).

Acestea pot să fie scalate fără a se pierde din calitate.

La început, multe browsere au avut probleme la afișarea conținutului SVG.

În prezent, toate browserele de internet relevante sunt capabile să afișeze Scalable Vector Graphics.

Multe programe grafice consacrate (Adobe Illustrator sau Inkscape Illustrator) folosesc formatul.

Acesta face relativ ușoară descrierea unor grafice sau a unei animații vectoriale și afișarea într-un browser.

Fișierele sunt definite într-o structură „arbore” compusă din elemente individuale.

Similar unui fișier CSS, atributele sunt desemnate acestor elemente.

Se bazează pe sintaxa XML, astfel încât fiecare fișier SVG începe cu un XML și o declarație Doctype.

XML e un limbaj de marcare declarativă utilizat în a reprezenta date structurate ierarhic în format de fișier text.

Principalul avantaj al fișierelor XML este că pot fi citite atât de roboți cât și de oameni.

Crearea graficii SVG

Deoarece SVG este un format vectorial, utilizatorii creează astfel de elemente grafice în Adobe Illustrator.

Formatul SVG vă permite să utilizați cele mai multe efecte posibile cu Adobe Illustrator.

Cu toate acestea, pentru gradienți cu multe niveluri, trebuie să știți că unele culori pot fi afișate diferit în browser.

Este important să definiți fiecare cale în mod clar și precis.

Chiar și modificările minime pot duce la probleme vizibile de culoare în browsere.

Acest lucru este valabil în special pentru graficele SVG scalate.

SVG este, în primul rând, un format vectorial scalabil.

Ar trebui să acordați întotdeauna atenție grilei de pixeli atunci când creați aceste grafice în Adobe Illustrator.

Adobe Illustrator CC 2016 a introdus o nouă modalitate de aliniere la pixeli.

Acest lucru vă permite să ajustați modul în care elementele individuale se comportă când sunt scalate.

Astfel, se previn în mod eficient eventualele probleme legate de culorile nedorite.

În mod ideal, doriți să creați imaginea SVG de aceeași dimensiune pentru a fi utilizată mai târziu.

De exemplu, pentru un website. Dimensiunile graficului nu au influență directă asupra dimensiunii fișierului.

Această abordare duce, de obicei, la rezultate mai bune în browsere.

Articole recomandate:

Pentru a utiliza o grafică vectorială creată cu Adobe Illustrator extern (un website) trebuie mai întâi exportată.

Când exportă fișiere SVG, utilizatorii au două opțiuni diferite.

Grafica poate fi oferită atât în formatul fișierului, cât și sub formă de cod sursă.

Rezultă diferite opțiuni pentru integrarea SVG într-un website.

Cel mai simplu mod de a exporta grafică SVG cu Adobe Illustrator este să selectați elementele corespunzătoare.

Mai apoi, le copiați în clipboard prin „Editare>Copiere”.

Puteți apoi să lipiți codul SVG direct într-o pagină HTML.

Un alt mod ar fi exportul și salvarea fișierului în format SVG.

Puteți face acest lucru printr-un click pe opțiunea „File” și apoi pe „Export”.

Următorul meniu vă permite să selectați „Scalable Vector Graphic (.svg)” ca format de fișier.

Avantajele și motivele de utilizare

Formatul SVG oferă numeroase avantaje față de alte formate de imagine în dezvoltarea web modernă.

Este compact, bazat pe vector și chiar editabil prin intermediul editorilor de text datorită XML.

Deoarece SVG se bazează pe vectori, acesta poate fi scalat fără pierderi vizibile de calitate.

În special în web design receptiv, toate elementele unei pagini HTML sunt dimensionate diferit.

Acestea țin con de dimensiunea afișajului.

Cu formatele tradiționale de imagine (JPEG sau PNG) acest lucru este problematic la anumite rezoluții.

Conținutul de imagine ar putea deveni granulos.

Fotografiile de scalare dincolo de 100% nu sunt percepute ca iritante.

Cu toate acestea, logo-urile apar neclare și pixelate atunci când sunt scalate.

Pe de altă parte, graficele vectoriale scalabile sunt întotdeauna clare.

Un alt avantaj major al formatului este integrarea sa cu CSS Media Queries.

Aspectele dezvoltate ca parte a proiectării web receptive se adaptează automat la dimensiunea afișajului (viewport).

Acest proces are loc prin interogări CSS Media.

Grafica SVG poate fi integrată în elemente HTML și controlată prin interogări media.

Astfel, acestea se adaptează la lățimea ferestrei browserului.

Mai ales graficele vectoriale detaliate nu se pot derula în mod corespunzător pe ecranele mai mici.

În acest caz, designerii și dezvoltatorii au opțiunea de a ascunde pur și simplu detaliile inutile prin CSS.