Add SVG element to existing SVG using DOM

javascript

svg-manipulation

dom-nesting

browser-compatibility

byNikita Barsukov·Jan 16, 2025

To append an SVG element like a rectangle to the SVG already on your page:

// SVG namespace akin to "I solemnly swear that I am up to SVG"
var svgNS = "http://www.w3.org/2000/svg"; 

// Create SVG equivalent of rectangle-shaped playdoh
var rect = document.createElementNS(svgNS, "rect");
// Time to give it some properties. Remember, size matters!
rect.setAttribute("width", "10");
rect.setAttribute("height", "10");
// Now, let's put it somewhere on our SVG canvas, x marks the spot!
rect.setAttribute("x", "10");
rect.setAttribute("y", "10");

// Time to throw our little rectangle on the SVG wall! 
document.querySelector("#existing-svg").appendChild(rect);

Ensure your target SVG is identified as "existing-svg" or adjust the selector as needed. This snippet injects a 10x10 rectangle directly into your SVG.

The method behind the SVG madness

When we're painting SVGs on the DOM, understanding a few web world rules can ensure our art stays on the wall.

createElementNS: The SVG element factory

document.createElementNS is the SVG element factory. Unlike document.createElement, it requires a namespace (a sort of passport confirming it's part of SVG land).

setAttribute: The SVG element stylist

After creating our SVG element, it's time to style it! setAttribute serves as our SVG element stylist, assigning attractive attributes like width, height, x, y, or even custom data attributes for the fashion-forward SVG.

DOM's SVG nesting technique

Once we've crafted and styled our SVG element, it's time to introduce it to the parent SVG. We find the parent SVG container - through getElementById or querySelector - and with appendChild, gently nestle in our new SVG element.

d3.js: The SVG whisperer

For heavier SVG lifting or if you frequently manipulate SVGs, you might want to recruit d3.js. This SVG whisperer simplifies element selection (d3.select) and the addition of new elements (d3.append), among other features specifically forged for data-driven transformations in SVG.

Common pitfalls and the browser compatibility mambo

Juggling SVG and DOM can come with few real-world challenges:

Browser inconsistencies

Despite most modern browsers cheering for SVG manipulation through the DOM, performances differ and bugs exist. Testing across browsers ensures your SVG keeps its shape.

Speed bumps

The more elements you summon and juggle in the DOM, the greater the potential impact on performance. Be mindful, particularly for SVGs that are complex or interactive.

Accessibility matters

Remember, not all traffic on the web highway are cars – motorcycles (like screen readers), too! Ensure that your dynamically added SVG content stays friendly for all types of web travelers by adding ARIA attributes and proper semantic tags.

Cosmetics, clones and direct modifications

Directly modify attributes

setAttribute is fine, but for a performance boost, consider directly modifying element properties:

// Height and weight matter, but performance does too!
rect.width.baseVal.value = 10;
rect.height.baseVal.value = 10;

Multiplying elements with cloneNode

When high-quality clones are cool:

var clone = existingElement.cloneNode();
// Remember, no two snowflakes (or SVG elements) are the same!
clone.setAttribute("x", "20"); 
svgContainer.appendChild(clone);