<div id="stage"></div>
import { SvJs } from 'https://cdn.jsdelivr.net/npm/svjs@latest/dist/svjs.min.js';

const div = document.getElementById('stage');
const svg = new SvJs().set({ width: '150px', height: '150px' }).addTo(div);
svg.create('rect').set({ x: 0, y: 0, width: 150, height: 150, fill: 'cornflowerblue' });

/* Below (commented out) is the same code without SvJs
const div = document.getElementById('stage');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '150px');
svg.setAttribute('height', '150px');
div.appendChild(svg);
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', '0');
rect.setAttribute('y', '0');
rect.setAttribute('width', '150');
rect.setAttribute('height', '150');
rect.setAttribute('fill', 'cornflowerblue');
svg.appendChild(rect);
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.