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>
- Scale them to any size without losing quality( VGA screen, Retina screen etc), the holy grail of responsive design approach.
- Easy to create using human readable syntax and advanced tools ( Illustrator)
- Smaller file sizes compared to raster graphics.
- SVGs can be manipulated using scripting, which allows animating individual sections of a graphic without using many pictures.
Where I can use SVG,
- Graphs – Because SVG”s number 1 strength is basic vector shapes
- Maps – Road maps are built of hard lines and exact shapes.
- UI Elements – which can be responsive
- Logos – Most logos are vector-based graphics
- Simple Games and animations
