ENTER THE SVG – What is Scalable Vector Graphics!

You might have heard about SVGs already, those alien species called web designers always refers them when you ask them for an icon design or a abstract background image. So what is this SVG and why is it becoming popular each day ?

SVG stands for Scalable Vector Graphics! Yes, they are graphics made out of lines and paths. SVG file contains instructions for the browser to draw a graphic using paths and lines in plain text ( Plain English too, no alien language used here)

Example SVG Code.

Following code will draw a red filled circle with black line. So as you can see SVG is a human readable language.

<svg height=”100″ width=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”black” stroke-width=”3″ fill=”red” />
Sorry, your browser does not support inline SVG.
</svg>

Download complete source code for below example.
More advanced example of SVG :
http://www.creativebloq.com/design/examples-svg-7112785
What are the benefits of using SVG graphics over other formats?
  1. Scale them to any size without losing quality( VGA screen, Retina screen etc), the holy grail of responsive design approach.
  2. Easy to create using human readable syntax and advanced tools ( Illustrator)
  3. Smaller file sizes compared to raster graphics.
  4. SVGs can be manipulated using scripting, which allows animating individual sections of a graphic without using many pictures.

 

Where I can use SVG, 

  1. Graphs – Because SVG”s number 1 strength is basic vector shapes
  2. Maps – Road maps are built of hard lines and exact shapes.
  3. UI Elements – which can be responsive
  4. Logos – Most logos are vector-based graphics
  5. Simple Games and animations
 
 
What are the supported browsers ? 
According to http://caniuse.com/ its well supported by modern browsers versions.
See the chart below for more details.

Tags :

Picture of Written by: Rocken
Written by: Rocken

Natoque viverra porttitor volutpat penatibus himenaeos. Vehicula commodo si hendrerit.

Latest Post

Categories

The designs you will crave for

Lorem ipsum dolor sit amet consectetur.