0

I have my SVG definitions in a separate file. I can embed them into the HTML like so:

<svg class="icon icon-close"><use xlink:href="/icons/symbol-defs.svg#icon-close"></use></svg>

How can I embed these icons from this separate file with javascript?

I have tried writing the SVG string to the DOM with the following:

var icon = '<svg class="icon icon-close"><use xlink:href="/icons/symbol-defs.svg#icon-close"></use></svg>';
$('#myDiv').append(icon);

But the icon does not appear.

I have looked at answers like this, which tells me that SVG elements are different to normal DOM elements (as I need to use .createElementNS). However as all my definitions are in this separate file, I don't want to have to duplicate the SVG definitions inside the javascript.

Is there a way of getting Javascript to read from my symbol-defs.svg file and create an SVG and place it dynamically into the DOM?

Community
  • 1
  • 1
Jimmery
  • 9,783
  • 25
  • 83
  • 157
  • There are a lot of ways. Maybe you want to generate this markup with DOM manipulation APIs ? In this case, a few failed attempts could be a plus for your question. (Basically, you'll need `createElementNS` and `setAttributeNS` methods.) – Kaiido Feb 20 '17 at 11:28
  • 1
    using `img` tag? I don't understand the exact problem! – sabithpocker Feb 20 '17 at 11:29
  • if i just write the `` string to the DOM, the icon doesnt appear - I would like to have the icon appear – Jimmery Feb 20 '17 at 11:34
  • Write it how? Where's the code you wrote to do that? Please add it to the question. – Robert Longson Feb 20 '17 at 11:36
  • Is myDiv existent when you try to append the icon to it? Can you try console.log($("#myDiv").length) there? What is the result? – Lajos Arpad Feb 20 '17 at 11:44
  • `#myDiv` exists - if i do `$('#myDiv').append('

    hi

    ');` then that `H1` tag appears fine - the SVG does not however     – Jimmery Feb 20 '17 at 11:45
  • @sabithpocker I have tried `` but I just get a broken image. – Jimmery Feb 20 '17 at 11:51
  • @RobertLongson this is not a duplicate of that, as they are defining the SVGs in the javascript code itself. My SVG definitions are in the `symbol-defs.svg` file - how do I take the definitions from that file and add it to the DOM with javascript? – Jimmery Feb 20 '17 at 11:53
  • You use something other than jquery to do it as per the duplicate and its answer. – Robert Longson Feb 20 '17 at 11:55
  • @RobertLongson that question and none of the answers deal with a situation where there is an equivalent of the `` tag inside the `` tag - unless I am missing something can you point me in the direction of a question or answer that is the same as my situation? My SVGs are not defined in the HTML, they are defined in a separate file (hence the title of my question), and I want to write these into the DOM with Javascript? Sorry if I am not explaining myself well here, but I am certain this is not a duplicate of that question – Jimmery Feb 20 '17 at 11:57
  • According to your question you are calling $('#myDiv').append(icon); This does not work. It does not matter where the data is coming from, you cannot use .append with svg elements. If it's not a duplicate please explain what you are using instead of jquery's append. – Robert Longson Feb 20 '17 at 12:01

0 Answers0