JAVASCRIPT

create svg element javascript

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute('style', 'border: 1px solid black');
    svg.setAttribute('width', '600');
    svg.setAttribute('height', '250');
    svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
    document.body.appendChild(svg);
 Run code snippet

generate svg from javascript

// SVG.js
var draw = SVG().addTo('#drawing')
  , rect = draw.rect(100, 100).fill('#f06')

interactive svg javascript

<svg viewBox="0 0 100 100">
  
  <circle cx="50" cy="50" r="50" />
  
  <script>
    document.querySelector('circle').addEventListener('click', e => {
      e.target.style.fill = "red";
    });
  </script>
  
</svg>

interactive svg javascript

<path id="algeria" onmouseover="displayName('Algeria')" d="..." />

interactive svg javascript

<script type="text/javascript"><![CDATA[
function displayName(name) {
    document.getElementById('country-name').firstChild.data = name;
}
]]></script>