Create svg element based on string via javascript

Question

Is there an easy way to convert an string to svg element in vanilla javascript (no libraries)? Like:

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>';

//convert this string to a DOM element

Update

I solved that by using the DOMParser API https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>';

function createSVGElement(data) {
  var parser = new DOMParser();
  var doc = parser.parseFromString(data, "image/svg+xml");
  document.body.appendChild(doc.lastChild);
}

It worked really well, and I don' have to use a div.

tymeJV · Accepted Answer · 2016-12-13 20:45:06Z

6

You can create a placeholder element, set the innerHTML, then get the firstChild

var placeholder = document.createElement('div');
placeholder.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>';
var elem = placeholder.firstChild;

answered Dec 13, 2016 at 20:45

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Gomez · Accepted Answer · 2016-12-13 20:45:25Z

2

You can use this:

var div = document.createElement('div')
document.body.appendChild(div)
div.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>'

answered Dec 13, 2016 at 20:45

David Gomez

2,7822 gold badges21 silver badges28 bronze badges

Collectives™ on Stack Overflow

Create svg element based on string via javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related