Draw with SVG

How to draw with SVG? There are two common ways getting something dynamic on the stage, direct draw or import a SVG file. Direct draw allows you to easily draw simple shapes like squares, circles, lines etc.. To draw more complex shapes you need to create them in a Vector drawing application like Illustrator or Inkscape.


direct draw

We starting off with direct draw, since it is the most basic way to draw with SVG. First, we prepare a simple html file called index.html.

<!doctype html>

<html lang="en">
  <meta charset="utf-8">

  <title>SVG direct draw</title>
  <meta name="description" content="SVG direct draw">

<body onload="init()">
    <!-- SVG main element -->
    <svg id="SVG_scene" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
    function init()
        var svg = document.getElementById("SVG_scene"); //GET MAIN SVG ELEMENT
        var svgNS = "http://www.w3.org/2000/svg";   //DEFINE THE namespaceURI

        var myCircle = document.createElementNS(svgNS,"circle"); //CREATE BASIC SVG ELEMENT(RECT, CIRCLE, ELLIPSE, LINE, POLYLINE, POLYGON)
            myCircle.setAttributeNS(null,"id","Circle"); //ID OF THE CIRCLE, OBJECT CAN BE MODIFIED VIA CSS
            myCircle.setAttributeNS(null,"class","circle"); //CLASS OF THE CIRCLE, OBJECT CAN BE MODIFIED VIA CSS
            myCircle.setAttributeNS(null,"cx",100); //CENTER OF THE CIRCLE X
            myCircle.setAttributeNS(null,"cy",100); //CENTER OF THE CIRCLE Y
            myCircle.setAttributeNS(null,"r",50);   //RADIUS OF THE CIRCLE
            myCircle.setAttributeNS(null,"fill","black");   //FILLCOLOR
            myCircle.setAttributeNS(null,"stroke","none");  //OUTLINE COLOR

            svg.appendChild(myCircle); //ADD CIRCLE TO THE MAIN SVG ELEMENT

The result is a circle. It is also possible to draw other shapes like a rectangle, ellipse, line, polyline and a polygon.

Some have different attributes then others. See http://www.w3.org/TR/SVG/shapes.html
The ‘rect’ element defines a rectangle which is axis-aligned with the current user coordinate system. Rounded rectangles can be achieved by setting appropriate values for attributes ‘rx’ and ‘ry’.
The ‘circle’ element defines a circle based on a center point and a radius.
The ‘ellipse’ element defines an ellipse which is axis-aligned with the current user coordinate system based on a center point and two radii.
The ‘line’ element defines a line segment that starts at one point and ends at another.
The ‘polyline’ element defines a set of connected straight line segments. Typically, ‘polyline’ elements define open shapes.
The ‘polygon’ element defines a closed shape consisting of a set of connected straight line segments.
To keep thing simple we didn’t animate any of the values. But you can see how easy you can change all the attributes on the fly. It is possible to animate any SVG object via Css, Js or an animation attribute.

SVG import

Direct draw into SVG can be handy under certain circumstances, but most often we need to import graphic assets. How to load and append SVG files to the scene? First we need to create a SVG file, it has not to be a piece of art, just something to import and see the process happening. We will use Inkscape for the job, but any other vector drawing application should do the job as well. Inkscape is a free and open source vector drawing application(link at the bottom).

You can set unique identifiers for later access via Javascript or Css. You can also group objects directly in Inkscape. Working with a Vector drawing application provides a really fast workflow.


Save the file as Optimized SVG. We call it optimized.svg.


Now we have an SVG file which we will import into a html5 SVG scene.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="1052.362205" width="744.0944882" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
 <metadata id="metadata7">
   <cc:Work rdf:about="">
    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
 <g id="layer1" stroke-linejoin="miter" stroke-dashoffset="0" stroke="#000" stroke-linecap="butt" stroke-dasharray="none" stroke-miterlimit="4" stroke-width="1">
  <path id="circle_2" fill="#ff004b" d="M415.71429,212.36218c4.90816,132.72606-143.06066,236.63542-266.54833,189.26002-122.362831-36.304-177.663691-199.59056-101.126422-302.188514,71.167942-111.877016,251.875662-115.567736,327.619392-6.765939,25.83858,34.174353,40.15438,76.849343,40.05536,119.694433z"/>
  <path id="circle_1" fill="#0FF" d="m374.28571,284.50505c1.21769,29.31872-18.59767,56.36638-44.49704,68.60211-18.98939,9.443-41.85961,10.96418-61.65727,3.07653-39.37693-12.44551-61.30295-61.04754-46.15028-99.1191,8.12558-19.44694,23.86005-36.06404,43.89854-43.28524,31.16075-12.00491,70.53363-4.03332,91.34223,23.04479,10.82706,13.39583,17.15197,30.40879,17.06382,47.68091z"/>

As you can see it is just an XML file with the informations about the drawing. In this simple case there are two object with the identifiers, “circle_1” and “circle_2”. They are in a group with the id “layer1”.

<!doctype html>

<html lang="en">
  <meta charset="utf-8">

  <title>SVG import</title>
  <meta name="description" content="SVG import">

<body onload="init()">

        function init()
            load_SVG("svg/optimized.svg"); //URL TO THE FILE TO LOAD

        function load_SVG(url) //Dynamic load Svg File

            var xhr = new XMLHttpRequest(); //NEW XML REQUEST
                xhr.onload = function(e)    //FILE LOADED
                xhr.onerror = function(e) {console.log("Error while getting XML.")}//ERROR MESSAGE 
                xhr.open("GET", url); //START REQUEST
To import this into our html5 environment we start with a plane html5 index.html file. We add a simple XML request to the Javascript to keep track of the loading process. After the file is loaded we append it to the document, but it is also a good idea to store each element in an Array for later access.
The Objects can be animated like any other object.


It is really easy to get something onto the stage with SVG. Working with additional software like Inkscape highly increases the workflow. Once we have all the assets ready and loaded we can move on and start animate them.