CODEWITHSUNDEEP
jqueryhtmldomsvg
Don P
Don P

Reputation: 63597

Insert contents of a .SVG file into an HTML element

I have an SVG element in a file my_ui_element.svg. I want to insert this SVG into an HTML element in index.html. How can I do this?

HTML before insert:

<div class="Container">
  <!-- Insert SVG here -->
</div>

HTML after insert:

<div class="Container">
  <svg>...</svg>
</div>

Note: Using <img src="my_ui_element.svg"> is not an acceptable answer since it does not add the SVG element to the DOM.

Upvotes: 3

Views: 1107

Answers (1)

Don P
Don P

Reputation: 63597

This turned out to be trivial. An SVG file is valid HTML.

Here is a jquery answer:

$('.Container').load('my_ui_element.svg');

Upvotes: 6

Related Questions