Scripting SVG

By Xah Lee. Date: . Last updated: .

This page is a tutorial on creating SVG using JavaScript.

Here is a SVG image, created by JavaScript.

Here is the HTML code:

<div id="svg54583"></div>

Here is JavaScript:

{
  const f = (() => {
    // create the svg element
    const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");

    // set width and height
    svg1.setAttribute("width", "100");
    svg1.setAttribute("height", "100");

    // create a circle
    const cir1 = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "circle",
    );
    cir1.setAttribute("cx", "80");
    cir1.setAttribute("cy", "80");
    cir1.setAttribute("r", "30");
    cir1.setAttribute("fill", "red");

    // attach it to the container
    svg1.appendChild(cir1);

    // attach container to document
    document.getElementById("svg54583").appendChild(svg1);
  });

  f();
}

Here's explanation how the code works, and in general, how to use JavaScript to script SVG.

Create SVG Element

First, you need to create a SVG element. 

const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg1. setAttribute ("width", "100" );
svg1. setAttribute ("height", "100" );

Here is a example with viewBox:

const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg1. setAttribute ("viewBox", "0 0 300 300" );

Create SVG Shape

Any SVG element is created like this:

const cir1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
cir1.setAttribute("cx", 0 );
cir1.setAttribute("cy", 0 );
cir1.setAttribute("r", 50);

To create other shapes, the code is similar. You create the shape tag, then set its attributes.

After you created a shape, you need to attach it to the SVG element. Here's example:

// create svg element
const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg1. setAttribute ("width", "100" );
svg1. setAttribute ("height", "100" );

// create a shape
const cir1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
cir1.setAttribute("cx", 0 );
cir1.setAttribute("cy", 0 );
cir1.setAttribute("r", 50);

// attach the shape to svg
svg1 . appendChild ( cir1 );

// attach the svg to a element on page
document.getElementById ('x77738'). appendChild ( svg1 );

Attach SVG Element to Web Page

You need to attach the SVG element to a element on the web page.

const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");

// code for adding shapes ...

// attach the svg to a element on the web page
const e1 = document.getElementById ('x43865');
e1 . appendChild ( svg1 );

This should be done last.

How to Script SVG?

Rememer that SVG is just XML. (and XML is like HTML but with more strict syntax) So, to script SVG, you don't have to do anything special. Just use JavaScript to script normal XML.

Here is what you need to do.

  1. Use “createElementNS” to create a SVG element.
  2. Use “createElementNS” to create SVG shape elements (e.g. circle, rect, path, ….).
  3. Attach shape elements to the SVG element.
  4. Attach the SVG element to the document.

You need to know what are the available shape elements, their tag names and attributes. For a basic intro, see: SVG: Basic Examples .

You also need to have a basic experience of JavaScript and DOM, see: