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">
<head>
<meta charset="utf-8">
<title>SVG direct draw</title>
<meta name="description" content="SVG direct draw">
</head>
<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>
<script>
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.
- rect
- 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’.
- circle
- The ‘circle’ element defines a circle based on a center point and a radius.
- ellipse
- The ‘ellipse’ element defines an ellipse which is axis-aligned with the current user coordinate system based on a center point and two radii.
- line
- The ‘line’ element defines a line segment that starts at one point and ends at another.
- polyline
- The ‘polyline’ element defines a set of connected straight line segments. Typically, ‘polyline’ elements define open shapes.
- polygon
- The ‘polygon’ element defines a closed shape consisting of a set of connected straight line segments.
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">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<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"/>
</g>
</svg>
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">
<head>
<meta charset="utf-8">
<title>SVG import</title>
<meta name="description" content="SVG import">
</head>
<body onload="init()">
<script>
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
{
//APPEND ELEMENT OR STORE IT IN AN ARRAY OR WHAT EVER....
document.body.appendChild(xhr.responseXML.documentElement);
}
xhr.onerror = function(e) {console.log("Error while getting XML.")}//ERROR MESSAGE
xhr.open("GET", url); //START REQUEST
xhr.send();
}
</script>
</body>
</html>
The Objects can be animated like any other object.
conclusion
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.
tools
