JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
  

    <linearGradient y2="1" x2="1" id="g" spreadMethod="reflect">
    <stop stop-color="#F00" offset="0"/>
    <stop stop-color="#F0F" offset="1"/>
    </linearGradient>

    
    
    
    <g id="group" stroke="#009900" stroke-width="0.1" fill="url(#g)">
    
    <path d="M33.437,13.872C30.938,9.97,41.322,4.599,34.753,0.46c-1.508-0.944-3.168,1.32-1.572,2.322
            c3.627,2.279-5.914,6.629-1.999,12.745C32.181,17.08,34.434,15.431,33.437,13.872z"/>
    <path d="M40.748,13.872c-2.507-3.914,7.894-9.268,1.314-13.412c-0.802-0.504-1.909-0.041-2.162,0.841
            c-0.652,2.274,3.575,0.756-0.135,5.835c-1.995,2.729-3.094,5.551-1.275,8.392C39.503,17.089,41.732,15.412,40.748,13.872z"/>
    <path d="M26.086,13.872C23.578,9.955,33.99,4.608,27.401,0.46c-1.503-0.946-3.17,1.319-1.572,2.322
            c3.601,2.263-5.892,6.665-1.999,12.745C24.833,17.08,27.08,15.434,26.086,13.872z"/>
    <path d="M31.563,33.913c15.729,0,24.001-4.011,24.001-7.331c0-3.832-10.432-7.489-23.49-7.322
            c-13.082-0.168-23.489,3.5-23.489,7.322C8.585,30.123,17.818,33.913,31.563,33.913z M31.87,21.226c0.048,0,0.096,0,0.145,0.002
            v0.001c0.02,0,0.04-0.001,0.06-0.001c0.021,0,0.04,0.001,0.06,0.001v-0.001c0.049-0.001,0.097-0.002,0.145-0.002
            c9.891,0,19.903,1.744,19.903,5.075c0,4.3-15.53,5.176-20.048,5.074v-0.001c0,0-0.118,0-0.119,0v0.001
            c-4.641,0.106-20.046-0.805-20.046-5.074C11.969,22.969,21.979,21.226,31.87,21.226z"/>
    <path d="M17.636,28.765l0.08-4.949c-2.973,0.763-4.62,1.697-4.62,2.484C13.096,27.081,14.714,28.006,17.636,28.765z"/>
    <path...

CSS

.c { margin:20px; border:1px solid #000; text-align:center; padding:10px; float:left;}

JavaScript

$(document).ready(function()
{
    $('#remove').click(function()
    {
        $('#group').attr('fill', '');
    });
    $('#set').click(function()
    {
        $('#group').attr('fill', 'url(#g)');      
    });
});