SVG Format Main Advantages and Best Examples

SVG Format: Main Advantages and Best Examples

1 comments
  • Pin It

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.

SVG icon

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.

SVG 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:

SVG Animation

SVG Animation


SVG Dialog Effects

SVG Dialog Effects


Ampersand with SVG

Ampersand with SVG


Responsive Interactive SVG

Responsive Interactive SVG


VelocityJS and SVG Moving Isoscape

VelocityJS and SVG Moving Isoscape


SVG Animation Using CSS Keyframes

SVG Animation Using CSS Keyframes


First Stab at SVG Animations

First Stab at SVG Animations


SVG Animation Using CSS

SVG Animation Using CSS


Rain-Bros Don’t Like JS

Rain-Bros Don't Like JS


Animated Text with SVG Path and CSS3

Animated Text with SVG Path and CSS3


Wobbly Slideshow Effect with SVG and JavaScript

Wobbly Slideshow Effect with SVG and JavaScript


VelocityJS

VelocityJS


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.

About the Author
Being involved in this diverse world of web design, I enjoy writing various blog entries regarding WordPress and all around topics, starting from its functionality and capabilities to the latest news and updates. Also I’m always ready to share some useful materials and free stuff that can be really helpful for your website maintenance.

  • Pin It

1 Comments:

  1. Christopher Jan Benitez Reply

    Great overview of SVG and its advantages/benefits. Thanks!

Leave a Comment!

Your email address will not be published. Required fields are marked *