JavaScript SVG Examples with createElementNS and innerHTML

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 selection and event handling.

Where to run these snippets: document.createElementNS needs a browser (or a DOM library such as linkedom / jsdom). The string-only examples run in Node.js as written.

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.

javascript

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.

javascript

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):

text

svg-string: true

This is a quick way to verify markup shape before you inject it (always sanitize if the string comes from users).

Build reusable SVG markup

A reusable string is easy to inject into the DOM or store as a template.

javascript

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):

text

svg-length: true

This is useful when you need a quick, renderable SVG template string.

Summary

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. That gives you two practical SVG workflows depending on whether you need programmatic control or faster inline rendering.