Nov 24 19

Ce este SVG?

Ce este SVG?

SVG (Scalable Vector Graphics)

Deși a fost conceput la sfârșitul anilor 90, SVG este, în multe privințe, formatul de fișier “dificil” care a crescut pentru a deveni preferatul multor designeri. Având un suport slab și ignorat în mare parte majoritatea anilor 2000, în 2017 toate browserele web moderne pot reda SVG – iar majoritatea programelor de desenare vectorială îl exportă.

Se dovedește că SVG a fost singurul format grafic care răspunde cel mai îndeaproape cerințelor actuale de dezvoltare web de scalabilitate, receptivitate, interactivitate, programabilitate, performanță și accesibilitate.

Ce este SVG si de ce ar trebui sa-l utilizati?

SVG este un format grafic vectorial – bazat pe XML și este utilizat pentru a afișa o varietate de elemente grafice pe Web și în alte medii.

In amănunt, documentele SVG nu sunt altceva decât fișiere cu text simplu care descriu linii, curbe, forme, culori și text. Deoarece poate fi citit de om, ușor de înțeles și de modificat, codul SVG poate fi manipulat prin CSS sau JavaScript. Acest lucru oferă fișierelor SVG o flexibilitate și versatilitate care nu pot fi niciodată egalate de formatele PNG, GIF sau JPG-urile tradiționale.

SVG este un standard W3C, ceea ce înseamnă că poate interopera ușor cu alte limbaje și tehnologii standard deschise, inclusiv JavaScript, DOM, CSS și HTML. Atâta timp cât W3C stabilește standardele globale ale industriei, se pare că acesta va continua să fie standardul de facto pentru graficele vectoriale din browser.

Adevărata valoare a SVG consta in faptul că rezolvă multe dintre cele mai complicate probleme în dezvoltarea web modernă. Să vedem care sunt:

Scalabilitate si receptivitate

In esență, SVG folosește forme, numere și coordonate – mai degrabă decât o grilă de pixeli – pentru a reda grafică în browser, ceea ce o face independentă de rezoluție și scalabilă infinit. Dacă vă gândiți la asta, instrucțiunile pentru crearea unui cerc sunt aceleași, indiferent dacă utilizați un stilou sau un plotter – doar scara se modifică.

Cu SVG, puteți combina diferite forme, căi și elemente de text pentru a crea tot felul de imagini și pentru a vă asigura că vor arăta clar la orice dimensiune.

În schimb, formatele bazate pe raster, cum ar fi GIF, JPG și PNG, au dimensiuni fixe, ceea ce face ca acestea să fie pixelate atunci când sunt marite. Deși diverse tehnici de imagine responsive s-au dovedit valoroase pentru grafica cu pixeli, ele nu vor putea niciodată să concureze cu adevărat cu abilitatea SVG de a scala nelimitat.

Programabilitate si interactivitate

SVG este complet modificabil și scriptabil. La un desen pot fi adăugate tot felul de animații și interacțiuni prin CSS și / sau JavaScript.

Accesibilitate

Fișierele SVG sunt bazate pe text și pot fi căutate și indexate. Acest lucru le face lizibile de cititoarele de ecran, motoarele de căutare și alte dispozitive.

Performanta

Unul dintre cele mai importante aspecte care afectează performanța web este dimensiunea fișierelor utilizate pe o pagină web. Grafica SVG are dimensiuni de fișier de rutină mai mici în comparație cu grafica raster.

Cazuri de utilizare obisnuite si suport pentru browser

SVG are o avalanșă de cazuri de utilizare practică. Să explorăm cele mai semnificative dintre ele.

Ilustratii si diagrame simple

Orice desen tradițional care ar fi fost produs cu pixuri și creioane ar trebui să se traduce perfect în formatul SVG.

Logouri si pictograme

Logourile și pictogramele trebuie să fie clare la orice dimensiune – de la buton la panou publicitar – ceea ce le face un candidat ideal pentru SVG. Pictogramele SVG sunt mai accesibile și sunt mult mai ușor de poziționat. Pentru mai multe detalii, consultați Fonturi de linie SVG și fonturi de simboluri

Animatii

Puteți crea animații atrăgătoare și chiar tipuri speciale de animație, inclusiv desene liniare in format SVG. Acest format poate interacționa cu animația CSS, precum și cu propria sa capacitate de animație SMIL încorporată.

Interactivitate (diagrame, grafice, infografie, hărti)

SVG poate fi utilizat pentru a vizualiza date și pentru a le actualiza dinamic pe baza acțiunilor utilizatorului sau a unor evenimente – Infografica SVG interactivă, hartă rutieră interactivă SVG.

Efecte speciale

Multe efecte atractive pot fi obținute folosind SVG, inclusiv modificarea formei sau diferite efecte speciale.

Construirea de interfete si aplicatii

SVG vă permite să creați interfețe provocatoare și să le încorporați cu HTML5, aplicații bazate pe web și aplicații Internet bogate (RIA).

Si multe altele…

După cum vedeți, SVG este utilizat aproape peste tot și în nenumărate situații. Vestea bună despre toate acestea este că suportul browserelor pentru SVG-uri este din ce în ce mai bun. În acest moment, majoritatea browserelor web moderne acceptă cele mai importante și fundamentale caracteristici ale SVG. Pe caniuse.com puteți verifica singur suportul SVG actual.

Cele mai recente lucrari