Ce este SVG si ce anume poate face?
Poate că ai auzit deja multe chestii faine despre SVG și cam ce poate face el, iar dacă nu, vei afla acum. SVG e abrevierea de la Scalable Vector Graphics și reprezintă exact ce-i spune și numele: un vector grafic. Cea mai importantă proprietate a acestui vector este scalabilitatea până la infinit fără a pierde din calitate, începând să câștige din ce în ce mai mult teren în sfera digitală.
Imaginile SVG sunt compuse din expresii matematice definite într-un fișier XML, ceea ce, spre deosebire de imaginile raster, le dă respectivul avantaj al scalabilității. Mai pe scurt, sunt un set de instrucțiuni pe care browserul tău le folosește pentru a desena puncte, linii, sau figuri geometrice.
Avantaje
- SVG-urile pot fi create și editate în orice editor de text;
- Imaginile SVG pot fi căutate, indexate, incluse în script-uri și comprimate;
- Ele pot fi redimensionate și printate la orice rezoluție;
- Sunt doar un set de instrucțiuni compus din text și cifre;
- Oricare element din interiorul unui SVG poate fi animat.
Toate indiciile arată că SVG devine noul trend în domeniul dezvoltării de site-uri web, dar și în aplicațiile mobile. Datorită faptului că poate reproduce desene, respectiv animații complexe cu ajutorul unui conținut redus de informație, în scurt timp va fi modul preferat al designerilor de a folosi elemente SVG, în detrimentul .png sau mai rău: .jpg.
Din curiozitate, am dorit să aflu care este diferența între reprezentarea unui pătrat cu latura de 100px salvat ca o imagine cu compresie jpg și una svg, folosind următorul calcul:
[JPEG size = img width * img height * color depth]
deci…
JPEG size = 100 * 100 * 8 bits = 80.000 biti
(9,76KB spațiu pe disk);
pe când…
SVG size = 100-150 caractere = 100-150 biti
Ce poți face cu SVG?
Alte exemple mișto de animații SVG