SVG can be created and manipulated with JavaScript when you need scalable graphics that stay sharp at any size. The two common approaches are DOM creation with createElementNS() and building SVG markup as a string.
This is useful for icons, charts, and interactive graphics. If you later need to mix SVG with UI state, the same pattern often appears alongside DOM selectors and addEventListener for clicks and hover.
Tested on: Node.js v20.18.2 for string-only snippets;
createElementNSblocks use{run=false}unless you provide a DOM.
Create SVG with createElementNS()
createElementNS() builds SVG nodes in the SVG namespace. Run this in a browser console or bundle; it is not a standalone Node one-liner without a document.
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "200");
svg.setAttribute("height", "200");
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", "50");
rect.setAttribute("y", "50");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "red");
svg.appendChild(rect);
console.log("svg-create-element:", svg.tagName === "svg");In the browser: logs svg-create-element: true once the <svg> root exists and appendChild completed.
Create SVG with innerHTML
A string can be inserted into a container to produce SVG markup.
const svgCode = '<svg width="200" height="200"><rect x="50" y="50" width="100" height="100" fill="red"/></svg>';
console.log("svg-string:", svgCode.includes("<rect"));Tested output (Node or browser):
You should see one line logging svg-string: true.
This is a quick way to verify markup shape before you inject it. Always sanitize user-controlled strings — the textContent guide explains why innerHTML assignment is an XSS surface even for SVG tags.
Build reusable SVG markup
A reusable string is easy to inject into the DOM or store as a template.
const svgMarkup = '<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="blue"/></svg>';
console.log("svg-length:", svgMarkup.length > 0);Tested output (Node or browser):
You should see one line logging svg-length: true.
This is useful when you need a quick, renderable SVG template string.
Summary
createElementNS is for live DOM SVG trees; string templates are fine for static markup—sanitize anything user-controlled.
To create SVG with JavaScript, use createElementNS() when you want DOM-based control and use SVG strings or innerHTML when you want quick markup-style output. The DOM approach is safer and easier to extend for interactive graphics, while the string approach is compact for templates, icons, and simple charts. After nodes are in the document, measure layout with getBoundingClientRect on SVGElement instances when you need viewport coordinates.
