The benefits of Scalable Vector Graphics (SVG)

According to awwwards.com, Scalable Vector Graphics (SVG) and Responsive Techniques are among the web design trends for 2014. They have been evolving and become more widespread. On a visual level we’ll see trends like the ones coming up in the next point.

SVG specification is an open standard developed by the World Wide Web Consortium (W3C). It is an XML-based vector image format for 2D graphics that has support for interactivity and animation. In 2003 it became a W3C recommendation, but at that time it was not fully supported by some major browsers especially, Internet Explorer (IE). For over a decade SVG has been underused. But things are changing today. SVG is going to be used more and more with browsers that support HTML5.

Today major browsers for SGV support are as the following:

• Internet Explorer 9+
• Firefox 4+
• Chrome 4+
• Safari 4+
• Opera 9.5+

Why is SVG a deal now? What are the benefits for using SVG today? Nowadays, people access the Internet from different devices with different screen size and resolution. Meaning scalability and responsive techniques are more important in web design. Because SVG is vector graphic base, it can scale any size to fit web pages.

Secondly, SVG is defined by XML format. Unlike bitmap image formats such as JPG or PNG, it does not consist of a fixed set of dots, but of shapes and their attributes, so it can be saved as the smallest size possible. No matter how large the graphic gets, the XML that describes the graphic is the only thing transmitted to the client. It can be bandwidth friendly.

There are other benefits like text labels, descriptions that can be searched by search engines, and also scripting control for custom interactive events and animation.

In short, as you can see there are a lot of advantages of SVG: scalability, SEO friendly, editing ability, and resolution independence. The SVG format of font and icons is especially advantageous; we should implement them in daily web design. The future of SVG seems bright and the trends of SVG usage will be continues to increase.

Here is an SVG code example:

SVG in CSS

Inline Style Sheet

<svg>
    <rect x="203" width="200" height="200" style="fill:slategrey; stroke:black; stroke-width:3; -webkit-transform: rotate(45deg);"/>
</svg>

Internal Style Sheet

<style type="text/css" media="screen">
#internal rect {
   fill: slategrey;
   stroke: black;
   stroke-width: 3;
   -webkit-transition: all 350ms;
}
#internal rect:hover {
   fill: red;
}
</style>

SVG In HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
  style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
  <linearGradient id="gradient">
    <stop class="begin" offset="0%"/>
    <stop class="end" offset="100%"/>
  </linearGradient>
  <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
  <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
</svg>

SVG embedded inline in XHTML

<svg:svg version="1.1" baseProfile="full" width="300px" height="200px">
    <svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px">
</svg:svg>

Referencing a font

<font>
  <font-face font-family="Super Sans" />
  <!-- and so on -->
</font>

<text font-family="Super Sans">My text uses Super Sans</text>

Option: Use CSS @font-face

<font id="Super_Sans">
  <!-- and so on -->
</font>

<style type="text/css">
@font-face {
  font-family: "Super Sans";
  src: url(#Super_Sans);
}
</style>
<text font-family="Super Sans">My text uses Super Sans</text>

If you want to dive right in and explore the world of SVG for web design, here are some references that I collected from my research.
SVG Tutorial
Resolution Independence With SVG
Using SVG
Using SVG with HTML5 tutorial
SVG animations, CSS Animations, CSS Transitions
SVG - Super Vector Graphics