JSFiddle - React, Tailwind, and code Playground

by Rogier

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
          <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="#fefefe"></ellipse>
</svg>

CSS

/*  improve the contrast ;-)  */
body {
  background: black;
}

/*  colors help to identify the different elements  */
svg {
  outline: 1px solid red;
}

img {
  outline: 1px solid green;
}

canvas {
  outline: 1px solid blue;
}

JavaScript

var svg = document.querySelector('svg'),
    img = document.createElement('img'),
		canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

//  using the found svg, we use it to the image source
img.src = 'data:image/svg+xml;utf8,' + svg.outerHTML;

//  not needed, but it helps to visualize our steps
//  add the image to the <body>
document.body.appendChild(img);

//  now that we have the SVG nicely embedded in an image, we can
//  use the image to size the canvas
canvas.width = img.width;
canvas.height = img.height;

//  and draw the image onto the canvas (in the top/left corder) 
//  using the context 
ctx.drawImage(img, 0, 0);

//  not need, but again, it helps to visualize
//  add the canvas to the <body>
document.body.appendChild(canvas);