What is SVG and why should you use it?


svg - scalable vector graphics

I bet you already heard some cool things about SVG files and where can you use them, if no – don’t worry! I will tell you. SVG stands for Scalable Vector Graphics and it represents an image drawn only with mathematical equations. The most important property of this type of vector is the scalability, without loosing any bit of information.

The SVG images, unlike raster files, are simple XML text files that can be written or edited in any text editor. It contains information about the dots, the lines, or any geometric figure and tells your browser how to draw them properly to the screen.

 

Advantages

  • SVG images can be created and edited with any text editor
  • SVG images can be searched, indexed, scripted, and compressed
  • SVG images are scalable
  • SVG images can be printed with high quality at any resolution
  • SVG images are zoomable (and the image can be zoomed without degradation)
  • SVG is an open standard
  • SVG files are pure XML

W3SchoolsSVG Tutorial

The SVG will become a standard in web and mobile app development because it can reproduce really complicated drawings or complex animations with the little help of a very small in size instructions file. I tried to make a simple test, between a 100px by 100px rectangular saved as JPG and the same object, drawn by code and saved as a SVG file. Just follow the calculations below…

 

[JPEG size = img width * img height * color depth]

so…

JPEG size = 100 * 100 * 8 bits = 80.000 bits

(9,76KB disk space);
meanwhile…

SVG size = 100-150 characters = 100-150 bits

 

So… what can you really do with SVG?

 

Cool SVG animation examples

 

SVG tutorials

Leave a Reply

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.