How to Design, Code, and Animate SVGs

What is SVG?

SVG stands for Scalable Vector Graphics. Think of it more as responsive graphics. It is an XML based format that allows you to create an image by using defined tags and attributes. Your code will render an image while at the same time it can be edited in any text editor, Sublime Text for instance.

This is a sample SVG. Notice that this is just made up of tags and attributes, just like HTML document. The whole thing is contained inside <svg> tag. There is a <rect> tag with black stroke and white fill and an ellipse (almost like a circle, notice the ry and rx attributes) which is filled with red color.

We can use SVG on the web in two ways. We can use the SVG files as the src attribute of <img> tags. So, you can have <img src="japan.svg"> like you would do with PNG and JPEGs. But, the more interesting case (in case you have noticed the tags have an id attribute like HTML) is that we can directly paste the source of the SVG in a <div> inside our HTML and style individual building block or even groups of blocks of a SVG the way we want, apply CSS or animations or even add interactivity using JavaScript. This is what makes SVGs one of the most versatile and hottest element right now in HTML. SVGs are infinitely scalable, responsive, have smaller file size, are future-proof for next-generation bazillion-pixel dense screens and can be styled, animated and interacted with known web technologies, namely CSS and JavaScript. Notice that these all things were previously possible only with a Flash embed, which required a flash player and lots of specialized work (and no one loves Flash!).

Vector vs Raster images

Raster images are made up of pixels to form a complete image. JPEGs, GIFs and PNGs are common raster image types. Almost all of the photos found on the web are raster images.

Raster images consist of a fixed number of pixels, so resizing them without effecting their resolution is not possible. You must have noticed that sometimes resizing an image gives it grainy and blury look, that is because the pixels are not flexible. Hence, a raster file of a particular size cannot be zoomed as per convenience.

A raster image on zooming in -

Vector images on the other hand are flexible and resolution independent. They are constructed using geometrical shapes or a sequence of commands. Shapes may consist of lines, rectangles, curves, and shapes with editable attributes such as color, fill, and outline. A common use case for vector images on the web is icons or small animations that appear crisp even on the highest density displays, like the upcoming 4k smartphones. Vector image files are easier to modify than raster image files.

A vector image on zooming in -

SVG tags

<svg>

The <svg> tag embeds an SVG document inside the current document, HTML for instance. The tag has its own x and y coordinates, height and width specified and its own unique id.

Example of <svg> tag

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">  
<g>

The <g> tag groups the elements together, it acts like a container that contains all the relative graphic elements together. A <g> element can contain other <g> elements nested in it.

Example of <g> tag

 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
<rect>

The <rect> element is an SVG basic shape representing a rectangle. The element can have various attributes, like coordinates, height, width, fill color, stroke color and sharp or rounded corners.

Example of <rect> tag

<rect id="svg_1" height="253" width="373" y="59" x="107.5" stroke-width="1.5" stroke="#000" fill="#fff"/>  
<use>

The <use> element allows you to clone and reuse the graphical SVG elements including other elements like <g> <rect> as well as other <use> elements.

Example of <use> tag

  <text y="15">black</text>
  <use x="50" y="10" xlink:href="#Port" />
  <text y="35">red</text>
  <use x="50" y="30" xlink:href="#Port"/>
  <text y="55">blue</text>
  <use x="50" y="50" xlink:href="#Port" style="fill:blue"/
<path>

The <path> element defines a path of coordinates for a shape. The code for path tag might seem cryptic, but it really is super easy to understand. The following example code can be read like this:
1. “M150 o” — Move to (150,0)
2.”L75 200" — Draw a line to (75,200) from last position (which was (150,0)
3. “L255 200” — Draw a line to (225,200) from last position (which was (75,200)
4. “Z” — Close the loop (draw to starting point)
You would never need to learn this, the code for path can be generated in any SVG editor, but it is good to know.

Example of <path> tag

<svg height="210" width="400">  
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>  
<symbol>

The <symbol> element defines symbols that are reusable, these symbols can only be rendered when called by the <use> element.

Example of <symbol> tag

<svg>  
<symbol id="sym01" viewBox="0 0 150 110">  
  <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
  <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
</symbol>

<use xlink:href="#sym01"  
     x="0" y="0" width="100" height="50"/>
<use xlink:href="#sym01"  
     x="0" y="50" width="75" height="38"/>
<use xlink:href="#sym01"  
     x="0" y="100" width="50" height="25"/>
</svg>  

Creating SVGs

Creating a SVG is easy, there are plenty of SVG editors available, like Adobe Illustrator, Inkscape etc. You could also hand-code a SVG since it is just a plain-text XML file, but it is generally done with a tool like Illustrator and then styled with hand.

For this example I'll use a simple online editor so that you can do it yourself without having to install anything.

1.I created a circle

2.Next I added more circles and saved the source code

Animating SVGs

CSS3 animations

SVGs can be animated easily by adding an id or a class to the SVG path in the code and then styling it in CSS3 like any other document. Below is an example of how SVGs can be animated.

See the Pen circles.svg by Surbhi Oberoi (@surbhioberoi) on CodePen.

CSS3 animation offers a variety of animation types that one can chose from. Line animation is another cool attribute of SVG. Here in the next example, I wrote the text "Hi, I am Surbhi" using pen in the editor.

And then I used CSS3 keyframes again to animate the stroke. Notice that each path has an unique id. That is because the delay in the animation is important when animating a stroke with more than a single word.

See the Pen name svg by Surbhi Oberoi (@surbhioberoi) on CodePen.

The <animate> tag animations

<animate> is an animation tag built into the SVG element itself. It defines how the attribute of an element changes from the initial value to the end value in the specified animation duration. This is used to animate properties that cannot be animated by CSS alone. The common elements of the animate tag are color, motion and transform. The animate tag is nested inside the shape tag of the object that has to be animated. It does not work on the path coordinates, but only inside the object tags. Notice the additive attribute, it signifies that the animations do not override each other but work together at the same time.

Here is an example for animating a SVG using HTML5 animate tag

See the Pen animate-star by Surbhi Oberoi (@surbhioberoi) on CodePen.

JavaScript based animations and interactivity

Since SVG is simply a document with tags, we can also use JavaScript to interact with individual elements of the SVGs by getting hold of their selectors (id/class etc.) Apart from vanilla JS, there are various JavaScript libraries available for animating and interacting with SVGs like Vivus.js, Snap.svg, RaphaelJS, Velocity.js etc. In the following example, I have used the Vivus.js library along with jQurey to reach the line stroke animation.

See the Pen javascript svg by Surbhi Oberoi (@surbhioberoi) on CodePen.

Can SVG work for all images on the web?

No. SVGs are mostly suited for images that can be constructed with few geometrical shapes and formulas. Though in-principle, you can convert anything like your photograph to SVG, the size of the image would be massive running in several MBs, thus defeating the purpose of using SVGs. You would be better off using SVGs for icons, logos and small animations.

Here is something I created while I was learning about SVGs, using CSS and SVG without any libraries. (Don't Judge!) https://github.com/surbhioberoi/surbhi.me