JSFiddle - React, Tailwind, and code Playground

by denisz

HTML

<html>
SVG
<svg height="200" width="200">
  <style>
    polygon { fill: black }

    div {
      color: white;
      font:18px serif;
      height: 100%;
      overflow: auto;
    }
  </style>
  <polygon points="5,5 195,10 185,185 10,195" />
  <foreignObject x="0" y="0" width="160" height="160">
    <div xmlns="http://www.w3.org/1999/xhtml">
    - Смолчал хозяин, да и то, что мог сказать
    - Мне невдомёк, но во владениях чертога
    Поможет дом срубить да судьбы вам связать.
    Не веришь ежли - испроси у Бога...
    </div>
  </foreignObject>
</svg><br/>

IMAGE 
<img/><br/>
   
CANVAS 
<canvas></canvas><br/>
</html>

CSS

svg, img, canvas {
  display: block;
}

JavaScript

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

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(unescape(encodeURIComponent(xml)));
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.onload = function() {
    // draw the image onto the canvas
    canvas.getContext('2d').drawImage(img, 0, 0);
}
img.src = image64;