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.