Add Svg Element to Existing Svg Using Dom

Add SVG element to existing SVG using DOM

If you want to create an HTML element, use document.createElement function. SVG uses namespace, that's why you have to use document.createElementNS function.

var svg = document.getElementsByTagName('svg')[0]; //Get svg element
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path'); //Create a path in SVG's namespace
newElement.setAttribute("d","M 0 0 L 10 10"); //Set path's data
newElement.style.stroke = "#000"; //Set stroke colour
newElement.style.strokeWidth = "5px"; //Set stroke width
svg.appendChild(newElement);

This code will produce something like this:

<svg>
 <path d="M 0 0 L 10 10" style="stroke: #000; stroke-width: 5px;" />
</svg>

createElement:
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

createElementNS:
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

How to add svg using javascript?

Use

var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');

to create your SVG. Use it for elements as well.

var circle = document.createElementNS("http://www.w3.org/2000/svg",'circle');

The work just like regular elements.

Is it possible to insert an SVG image into an existing SVG element already rendered on the page?

You can use d3.xml to import the SVG document as an XML document and insert the content of the XML in a DOM element.

// Create the SVG Element with D3
var div = d3.select('#example'),
    svg = div.append('svg')
     .attr('width', 200)
     .attr('height', 200);

var g = svg.append('g')
   .attr('class', 'svg-container');

var url = 'http://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg';

// Load the XML data
d3.xml(url, 'image/svg+xml', function(error, xml) {

    // Insert the SVG image as a DOM node
    g.node().appendChild(document.importNode(xml.documentElement, true));

    // Acess and manipulate the iamge
    var svgImage = g.select('svg');

    svgImage
        .attr('width', 50)
        .attr('height', 50);
});

A working jsBin is available. Regards,

How to add svg in html, using JavaScript DOM?

this might help, as you can simply add svg using IMG tag:

var studentDetails = document.getElementById('studentDetails');
var favouriteStudent = 
  contacts[parseInt(e.currentTarget.id)].favourite ? 'favourite' : '';
  studentDetails.innerHTML =
  "<span id='close-details'><img src='assets/close.svg'></span>" +
  "<span id='favourite' class='" +
  favouriteStudent +
  "'>*</span>" +
  '<div>' +
  contacts[parseInt(e.currentTarget.id)].name +
  '</div>' +
  '<div>' +
  contacts[parseInt(e.currentTarget.id)].email +
  '</div>';

i have made an edit in line 5 as you see i replaced X with the image tag..

how to append a <svg> element with vanilla JavaScript?

SVG elements must be created in the SVG namespace.

var text="";text=text+"<defs>"text=text+"<filter id='Matrix' filterUnits='objectBoundingBox' x='0%' y='0%' width='100%' height='100%'>"text=text+"<feColorMatrix type='matrix' in='SourceGraphic' values='0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0'/>"text=text+"</filter>"text=text+"</defs>"
var tag;tag = document.createElementNS("http://www.w3.org/2000/svg", "svg");document.body.appendChild(tag);tag.innerHTML=text;tag = document.createElementNS("http://www.w3.org/2000/svg", "style");document.body.appendChild(tag);tag.innerHTML="img.free {filter:url('#Matrix')}";

<head></head>
<body>  <img class="free" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/500px-Google_2015_logo.svg.png"></body>

Add Svg Element to Existing Svg Using Dom