CODEWITHSUNDEEP
javascripthtmlsvg
Florian Müller
Florian Müller

Reputation: 7785

Editing external SVG graphic via JavaScript

I've got a normal HTML page just like this sample:

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <img src='test.svg' id='myImage' />
  </body>
</html>

Is it somehow possible to edit the SVG image contained in the ´img´-Tag? I'd like to add elements like circle or animate or something.

Thanks for help.

Upvotes: 1

Views: 174

Answers (1)

&#196;rsam
&#196;rsam

Reputation: 26

You should rather use svg in html directly to be able to easily manipulate the svg. If you have an external file, you can load it via ajax to avoid duplicate code (or just include it on the server). My experience is that svg in html is much easier to handle then using the src attribute. 

<html>
 <body>

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black"
   stroke-width="2" fill="red"/>
 </svg>

 </body>
 </html>

Upvotes: 1

Related Questions