A Look Into: Scalable Vector Graphics (SVG) Animation

By . in Coding. Updated on .

Vector graphics have been widely applied in print media. In a website, we can also add vector graphics with SVG or Scalable Vector Graphic. Citing from the official spec at W3.org, SVG is described as:

A language for describing two-dimensional graphics in XML. SVG allows for three types of ßgraphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text.

It has actually been around since 1999 and as of 16 August 2011, it became a W3C Recommendation. Yet, SVG is still considerably underused, whereas there are a lot of advantages in using Vector rather than Bitmap to serve graphic or image on a website.

SVG Advantages

In term of serving graphics on websites, SVG offers a few advantages over Bitmap, some of which include:

Resolution Independent

Bitmap/raster graphic is resolution dependent – it is built upon pixels. Graphics served will looked pixelated when it is resized at a certain zoom level. That doesn’t happen to vector graphic, which is resolution independent in nature, as the graphic is expressed with a mathematical equation which makes it scalable at any zoom level while maintaining quality, even at Retina Display.

Reducing HTTP Request

SVG can be embedded directly into an HTML document with svg tag, so the browser does not need to do a request to serve the graphic. This also results in better load performance for the website.

Styling and Scripting

Embedding directly with svg tag will also allow us to style the graphic easily through CSS. We can change object properties such as background color, opacity, borders, etc the same way we do with regular HTML tag. Similarly, we can also manipulate the graphic via JavaScript.

Can be animated and Edited

SVG object can be animated when it uses the animation element or through JavaScript Library like jQuery. The SVG object can also be edited with any text code editor or a graphic software like Inkscape (which is free) or Adobe Illustrator.

Smaller File Size

SVG has a smaller file size compared to Bitmap, that has a similar graphic presentation.

Drawing Basic Shapes with SVG

According to the spec, we can draw some basic shapes like the rectangle, circle, line, ellipse, polyline and polygon with SVG and in order for the browser to render the SVG graphic, all those graphic elements need to be inserted within the <svg> ... </svg> tag. Let’s see the examples below for more details:

Line

To draw a line in SVG we can use the <line> element. This element is used to draw a single straight line, so it will only consist of two points, start and end.

 <svg>
 <line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>
 </svg>

As you can see above, the line start point coordinate is expressed with the first two attributes x1 and x2, while the line’s end point coordinate is expressed with y1 and y2.

There are also two other attributes, the stroke and stroke-width which are used to define the border’s color and border’s width, respectively. Alternatively, we can also define these attributes within an inline style, like so:

 style="stroke-width:1; stroke:rgb(0,0,0);"

it eventually just does the same.

Polyline

It’s almost similar to the <line>, but with the <polyline> element we can draw multiple lines instead of just one. Here is an example:

 <svg>
 <polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/>
 </svg>

<polyline> element has points attributes that store all the coordinates that form the lines.

Rectangle

Drawing a rectangle is also simple with this <rect> element. We only need to specify the width and height, like so:

 <svg>
 <rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
 </svg>

Circle

We can also draw a circle with the <circle> element. In the following example, we will create a circle with 100 radius which is defined with r attribute:

 <svg>
 <circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
 </svg>

The first two attributes, cx and cy are defining the circle’s center coordinate. In the above example, we have set 102 both for the x and y coordinate, if these attributes are not specified, 0 will be taken as the default value.

Ellipse

We can draw an ellipse with <ellipse>. It works quite similar to the circle, but this time we can control specifically the x line radius and y line radius with rx and ry attribute;

 <svg>
 <ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
 </svg>

Polygon

With the <polygon> element, we can draw multiple sides of shapes like a triangle, hexagon and even a rectangle. Here is an example:

 <svg>
 <polygon points="70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
 </svg>

Using Vector Graphic Editor

As you can see, drawing simple objects with SVG in HTML is quite easy. However, when the object gets more complex, that practice is no longer ideal and will give you a headache.

Fortunately, as we’ve mentioned above, we can use a vector graphic editor like Adobe Illustrator or Inkscape to do the job. If you are familiar with these software, it is surely a lot easier to draw objects with their GUI rather than to code the graphic yourself in HTML tag.

If you are working with Inkscape, you can save your vector graphic as plain SVG, and then open it in text code editor. Now, you should find the SVG codes in the file. Copy all the codes and paste them inside your HTML document.

Or, you can also embed the .svg file through one of these elements; embed, iframe and object, for instance;

 <object data="images/ipod.svg" type="image/svg+xml"></object>

The results will eventually be the same.

In this example, I use this Apple iPod from OpenClipArt.org.

Browser Support

Regarding browser support, SVG has been very well supported in all major browsers, except in IE8 and earlier. But this matter can be solved with this JavaScript Library, called Raphael.js. In order to make things easier we will use this tool, ReadySetRaphael.com to convert our SVG code into Raphael-supported format. Here’s how.

First of all, download and include the Raphael.js library to your HTML document. Then, upload the .svg file to the site, copy and paste the generated code inside the following load function;

 window.onload=function() { 
 //the Raphael code goes here
 }

Inside the body tag, put the following div with rsr id attribute;

 <div id="rsr"></div>

That’s it, you’re done. Check out the example from the link below.

Final Thoughts

So that’s the basics with SVG. We hope now you have a fair understanding of this subject. It is the best way to optimize your site for any screen resolution, even for use on Retina display.

As always, if you are an adventurous person, here we have put a few more references and discussion to dig deeper into this subject.

Thanks for reading and we hope you enjoyed this post.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail