In this blog entry we would like to bring up the topic about SVG file format, specify its main benefits and figure out why it isn’t being used by a lot of developers.
Reffering to W3.org, Scalable Vector Graphics (SVG) is defined as a markup language for describing two-dimensional graphics applications and images, and a set of related graphics script interfaces.
So it is a graphic format in which shapes are specified in XML language to define basic properties such as paths, shapes, fonts and colors, and more advanced features such as gradients, filters, scripting and animation. Basically, SVG images can be edited with any text editor, but they are usually created with drawing software. Today SVG is supported by all major modern web browsers (Google Chrome 4+, Mozilla Firefox 4+, Opera 9.5+, Safari 4+, Internet Explorer 9+) for desktops and mobiles.
SVG drawings can be dynamic and interactive, they are mostly used for vector-style illustrations, patterns, UI and navigation icons. The W3C strongly recommends to use SMIL markup language as the standard for animation in SVG.
The SVG format was developed in 1998 and continues to be maintained by W3C SVG Working Group. In 2011, it became a W3C Recommendation, but it is still considerably underused on the web. Though there are a lot of strong points in using SVG rather than bitmap, especially these days.
- SVG graphics have smaller file sizes than their PNG/JPEG equivalents;
- Using SVG graphics you can scale your image or animation to any screen resolution without the loss of quality, whether it is desktop or mobile devices;
- Reducing HTTP request explains by that SVG can be embedded directly into HTML document with svg tag, so the browser doesn’t need to do a request to serve the graphic;
- Text labels and descriptions can be indexed by search engines;
- SVG can be used as a platform upon which to build rich and vibrant applications and user interfaces;
- Ability to link to parts of an image.
Summing up all mentioned-above, there are significant benefits to create graphics in SVG rather than using other image formats. SVG enables developers and designers to create high quality, dynamic graphics and graphical applications with a great level of precision. So whether you are going to make a synchronised animation with audio, build an interaction map or some analytics, SVG format is the best way to bring it into life on the web. Some developers ignore this format because any SVG XML document looks visually archaic and complicated, so they don’t want to edit such type of file by hand, though they don’t realize that there are many great tools to customize SVG with ease.
To prove that SVG format can be widely used in various designs, we selected for you the following examples where it is used in different ways, so have a look and get a quick overview at the capabilities of SVG:
VelocityJS and SVG Moving Isoscape
SVG Animation Using CSS Keyframes
Animated Text with SVG Path and CSS3
Great overview of SVG and its advantages/benefits. Thanks!