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 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()
;

}

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 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 );

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:

SVG tutorial

  1. SVG Basics
  2. Path
  3. Path Elliptical Arc
  4. Circle Arc
  5. Specifying Styles
  6. Shape Styles
  7. Viewport
  8. viewBox
  9. ViewBox Unit Size
  10. Coordinate Transformation
  11. Text Element
  12. Font Size
  13. Structure Elements
  14. Scripting SVG
  15. SVG Clock
  16. Animation

Canvas Intro

  1. Canvas vs SVG
  2. Canvas intro
  3. Demo: Halma
  4. Demo: Raycaster
Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

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

Web Dev Tutorials

  1. HTML
  2. CSS
  3. JavaScript
  4. JS Obj Ref
  5. DOM
  6. SVG
  7. Blog