JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Original</h3>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg/170px-Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg" alt="Original Image">


<h3>Base64 code including the Filter</h3>
<object id="result-img" data=""  
  type="image/svg+xml"></object>
<div>
<a target="_blank" href="" id="results">Right click --> 'Open in new tab'</a>
</div>


<h3>SVG with the Filter</h3>
<svg id="test" height="218px">
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <image xlink:href='https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg/170px-Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg' height="218px" filter="url(#sepium-filter)"/>
  <filter id="sepium-filter">
            <feColorMatrix type="matrix" values="1.3 -0.3 1.1 0 0 0 1.3 0.2 0 0 0 0 0.8 0.2 0 0 0 0 1 0"></feColorMatrix>
        </filter>
</svg>

CSS

#test{
  display: inline-block;
      height: 218px;
    width: 178px;
}

JavaScript

var svg = document.getElementById('test');

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

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

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

// set it as the source of the img element
$('#results').attr('href', image64).append('\n' + image64);
$('#result-img').attr('data', image64);