Creating SVG from JavaScript

Nov ’20

Introduction

A small example on how to create SVG-graphics in JavaScript.

The code

The HTML is simple:

<svg class="image">
</svg>

Add some JavaScript:

// create
const NS = 'http://www.w3.org/2000/svg'
const svg = document.querySelector('.image')
const circle = document.createElementNS(NS, 'circle')

// configure
circle.setAttribute('cx', 50)
circle.setAttribute('cy', 75)
circle.setAttribute('r', 50)

// connect
svg.append(circle)

A simple SVG appears:

Notes

You can create the SVG-element itself by code too: svg = document.createElementNS(NS, 'svg')

I used the create-configure-connect pattern here which I introduced in: A code pattern for Web Audio.

Now go make some!

Attribution

The W3C SVG Logo including a link: