Creating SVG from JavaScript
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: WebAudio CCC-pattern.
Now go make some!
Attribution
The W3C SVG Logo including a link: