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. Specifying Styles
  5. Shape Styles
  6. Viewport
  7. viewBox
  8. Coordinate Transformation
  9. Text Element
  10. Font Size
  11. Structure Elements
  12. Scripting SVG
  13. SVG Clock
  14. Animation
Liket it? 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. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog