Getting started


SVG.js assumes you have an HTML element with an id attribute created and ready to serve as the wrapper. Something like:

<!DOCTYPE html>
  <div id="drawing"></div>

Create an SVG document

Next, use the SVG() function to create an SVG document within the wrapper element:

var draw = SVG('drawing').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

The first argument can either be an id of the element or the selected element itself. This will generate the following output:

<div id="drawing">
  <svg xmlns="" version="1.1" xmlns:xlink="" width="300" height="300">
    <rect width="100" height="100" fill="#f06"></rect>

By default the svg drawing follows the dimensions of its parent, in this case #drawing:

var draw = SVG('drawing').size('100%', '100%')

Checking for SVG support

By default, SVG.js assumes the client's browser supports SVG. You can test support as follows:

if (SVG.supported) {
  var draw = SVG('drawing')
  var rect = draw.rect(100, 100)
} else {
  alert('SVG not supported')

Pure SVG

SVG.js also works outside of the HTML DOM, inside an SVG document for example:

<?xml version="1.0" encoding="utf-8" ?>
<svg id="drawing" xmlns="" xmlns:xlink="" version="1.1" >
  <script type="text/javascript" xlink:href="svg.min.js"></script>
  <script type="text/javascript">
      var draw = SVG('drawing')


Just to get you going, here is a basic setup. Everything is present to start fiddling.

Fork me on GitHub