JSFiddle - React, Tailwind, and code Playground

by Manawe

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <rect width="100" height="100" fill="yellow" />
  <circle cx="40" cy="60" r="30" fill="#900" stroke="#000" stroke-width="5" />
</svg>

<img src="http://phrogz.net/tmp/bad.gif" />

CSS

svg {
        width: 100%;
        height: 100%;
        margin: 0 0 0 0;
}

JavaScript

var svg = document.querySelector('svg'),
    img = document.querySelector('img');

setImageToSVG(img,svg);

function setImageToSVG(img,svg){
  var xml = (new XMLSerializer).serializeToString(svg);
  img.src = "data:image/svg+xml;charset=utf-8,"+xml;
}