JS: Scripting SVG

By Xah Lee. Date: . Last updated: .

This page is a tutorial on creating SVG using JavaScript.

Here's a SVG image, created by JavaScript.

Here's the HTML code:

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

Here's JavaScript:

const f = (() => {

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

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

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

    // attach it to the container
    svg_box.appendChild(my_circle);

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

});

f();

Create SVG Element

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

Here's a example with viewBox:

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

After you create a SVG element, you need to attach it to a element on the web page.

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

const e1 = document.getElementById ('x43865');
e1 . appendChild ( svg1 );

Create SVG Shape

Any SVG element is created like this:

const cir = document.createElementNS("http://www.w3.org/2000/svg", "circle");
cir.setAttribute("cx", 0 );
cir.setAttribute("cy", 0 );
cir.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 );

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's what you need to do.

  1. Use “createElementNS” to create a SVG element.
  2. Use “createElementNS” to create SVG shape elements (For example, 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:

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.