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.
Brief Overview
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.
Main advantages:
- 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;
- With the help of JavaScript and CSS, you can animate the individual components of an SVG graphic at run-time;
- 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.
Best Examples
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
Wobbly Slideshow Effect with SVG and JavaScript
Conclusion
As you can see, there are a number of different designs in which SVG format is rather successfully implemented. SVG usage is very much a possibility, and browser support and performance will only improve in future. Recently W3.org announced that in August 2015 the Graphical Web will showcase SVG as well as related technologies like Canvas, WebGL, CSS, Javascript, and HTML5 video and audio. The event will be of interest to a broad range of attendees, so if you want to know more about this conference, you can visit W3.org website.
Great overview of SVG and its advantages/benefits. Thanks!