Scalable Vector graphics is getting more popularity in online world as more and more browsers support svg now. Most images we see on web (.png, .jpg, .gif etc.) are Raster or bitmap images.
Here is the definition of SVG on Wikipedia
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
Raster graphics image
In computer graphics, a raster graphics image, or bitmap, is a dot matrix data structure representing a generally rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other display medium. Raster images are stored in image files with varying formats.
Since SVG file contains a set of mathematical instructions, it can be converted to any size image as opposite to bitmap images. Bitmap images when resized to higher size, may not look good. Not all browser currently support SVG format but most modern browsers like Chrome, Firefox, and Internet Explore (9+) have some support fo svg format. So svg is still not used widely to serve images.
SVG is slower to render as compared to bitmap. SVG files are compact in most cases.
Where is SVG used
- Many web sites owners create their logo and other images in svg format and then convert it to various sizes bitmap images. So in case you are getting your logo designed, ask for svg format from the designer.
- Adobe illustrator Inkscape are two very popular tools to create and edit svg file. They also allow you to export svg files to bitmap format.
- Since svg only contains instructions to draw graphics, they can be used to create interactive graphics on web. It can be useful for HTML5 based games and apps in future.
- It can be used to automatically create images using scripting languages like python and perl based on predefined templates.
How does SVG format look like?
Svg format for drawing a rectangle looks like:
<rect width="80" height="80" style="fill:#006fba;" />
This will produce a rectangle as shown below:
You can try out online svg editing and how it renders at this SVG Sandbox which creates a small square icon with a background color and a text field.
