SVG gradientUnits="userSpaceOnUse" is not working with path - html

In the snippet below, you'll see 2 SVGs, one with circles and one with paths, both without using gradientUnits="userSpaceOnUse". And the output is what you'd expect.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</linearGradient>
</defs>
<g fill="url(#grad1)">
<circle cx="24" cy="24" r="24"/>
<circle cx="72" cy="24" r="24"/>
<circle cx="72" cy="72" r="24"/>
<circle cx="24" cy="72" r="24"/>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</linearGradient>
</defs>
<g fill="url(#grad1)">
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2)" />
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 0)" />
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 21)" />
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(0, 21)" />
</g>
</svg>
But when using gradientUnits="userSpaceOnUse" with the SVGs above, the SVG with the circles is showing usual behavior and the gradient can be seen across it as a whole, while the SVG with the paths shows a solid color across it as you can see below:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</linearGradient>
</defs>
<g fill="url(#grad1)">
<circle cx="24" cy="24" r="24"/>
<circle cx="72" cy="24" r="24"/>
<circle cx="72" cy="72" r="24"/>
<circle cx="24" cy="72" r="24"/>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</linearGradient>
</defs>
<g fill="url(#grad1)">
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2)" />
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 0)" />
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 21)" />
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(0, 21)" />
</g>
</svg>


You're transforming the shapes in the userSpaceOnUse case. The gradient is applied to the untransformed paths which are all at the top of the page and therefore red.
you're duplicating id values. That's invalid.
Here's one way of getting the gradient working.
I've removed the translates and reconstructed the paths not to require them. To do that more simply I've made the paths relative rather than absolute.
I've added a gradientTransform to counteract the path scaling.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse" gradientTransform="scale(0.45)">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</linearGradient>
</defs>
<g fill="url(#grad2)">
<path d="M12,21.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z" transform="scale(2.2)"/>
<path d="M33,21.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z" transform="scale(2.2)"/>
<path d="M33,42.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z" transform="scale(2.2)"/>
<path d="M12,42.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z" transform="scale(2.2)"/>
</g>
</svg>

Related

SVG gradient passes gradient color to the next SVG

I have an issue with SVG icons. The first SVG icon passes its color to the next one like that:
The second icon should have red gradient.
Here's a snippet example:
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/>
<path d="M31.7628 63.2679L59.7926 85.5881L98.3475 34.6986" stroke="white" stroke-width="18"/>
<defs>
<linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#26A212" stop-opacity="0.4"/>
<stop offset="0.0001" stop-color="#26A212" stop-opacity="0.47"/>
<stop offset="1" stop-color="#26A212"/>
</linearGradient>
</defs>
</svg>
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/>
<line x1="35.636" y1="92.636" x2="92.636" y2="35.636" stroke="white" stroke-width="18"/>
<line x1="35.364" y1="35.636" x2="92.364" y2="92.636" stroke="white" stroke-width="18"/>
<defs>
<linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#26A212" stop-opacity="0.4"/>
<stop offset="0.0001" stop-color="#B81818" stop-opacity="0.47"/>
<stop offset="1" stop-color="#B81818"/>
</linearGradient>
</defs>
</svg>
When I remove the first icon, color of failure icon is red as expected:
Here's a snippet example:
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/>
<line x1="35.636" y1="92.636" x2="92.636" y2="35.636" stroke="white" stroke-width="18"/>
<line x1="35.364" y1="35.636" x2="92.364" y2="92.636" stroke="white" stroke-width="18"/>
<defs>
<linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#26A212" stop-opacity="0.4"/>
<stop offset="0.0001" stop-color="#B81818" stop-opacity="0.47"/>
<stop offset="1" stop-color="#B81818"/>
</linearGradient>
</defs>
</svg>
I use https://figma.com for creating icons and I export these icons as SVG. Do you have any idea what's wrong with this?

As per Danny '365CSI' Engelman. The id's was the same when we give each element this own unique id this is the result. Thanx Danny i also overlooked the id.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
</style>
</head>
<body>
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/>
<path d="M31.7628 63.2679L59.7926 85.5881L98.3475 34.6986" stroke="white" stroke-width="18"/>
<defs>
<linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#26A212" stop-opacity="0.4"/>
<stop offset="0.0001" stop-color="#26A212" stop-opacity="0.47"/>
<stop offset="1" stop-color="#26A212"/>
</linearGradient>
</defs>
</svg>
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="64" cy="64" r="64" fill="url(#paint01_linear)"/>
<line x1="35.636" y1="92.636" x2="92.636" y2="35.636" stroke="white" stroke-width="18"/>
<line x1="35.364" y1="35.636" x2="92.364" y2="92.636" stroke="white" stroke-width="18"/>
<defs>
<linearGradient id="paint01_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
<stop stop-color="red" stop-opacity="0.4"/>
<stop offset="0.0001" stop-color="red" stop-opacity="0.47"/>
<stop offset="1" stop-color="red"/>
</linearGradient>
</defs>
</svg>
</body>
</html>

How to force SVG to be bounded by container element?

How can I make this svg stay within the bounds of the container element?
Here without any CSS, when the viewport is made wide the svg overflows in the y dimension.
.container {
height: 200px;
background-color: gray;
}
<div class="container">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="588px" height="588px" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588" xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856
c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182
c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258
c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333
c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257
C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076
C318.275,104.286,316.275,104.257,314.268,104.257z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.1" style="stop-color:#E62725"/>
<stop offset="0.3093" style="stop-color:#ED1C24"/>
<stop offset="1" style="stop-color:#1C1B1C"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197
c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0
c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756
c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999
c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098
c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/>
<path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794
c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523
c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013
c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41
c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359
c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041
c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825
c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999
c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756
c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285
c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01
C172.146,368.001,208.125,346.119,249.646,334.825z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.6047" style="stop-color:#006838"/>
<stop offset="1" style="stop-color:#538B2E"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756
c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267
c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485
c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933
c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765
c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141
C481.337,683.61,606.767,554.849,606.767,396.756z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513
c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772
c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803
C384.745,370.298,382.664,352.115,378.772,334.793z"/>
</g>
</svg>
</div>
Here I have tried some positioning magic, but that doesn't work either. I have tried some different things but am out of ideas.
.container {
height: 200px;
background-color: gray;
position: relative;
}
svg {
position: absolute;
left: 0;
top: 0;
right: 100%;
bottom: 100%;
}
<div class="container">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="588px" height="588px" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588" xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856
c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182
c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258
c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333
c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257
C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076
C318.275,104.286,316.275,104.257,314.268,104.257z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.1" style="stop-color:#E62725"/>
<stop offset="0.3093" style="stop-color:#ED1C24"/>
<stop offset="1" style="stop-color:#1C1B1C"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197
c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0
c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756
c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999
c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098
c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/>
<path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794
c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523
c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013
c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41
c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359
c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041
c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825
c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999
c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756
c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285
c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01
C172.146,368.001,208.125,346.119,249.646,334.825z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.6047" style="stop-color:#006838"/>
<stop offset="1" style="stop-color:#538B2E"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756
c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267
c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485
c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933
c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765
c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141
C481.337,683.61,606.767,554.849,606.767,396.756z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513
c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772
c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803
C384.745,370.298,382.664,352.115,378.772,334.793z"/>
</g>
</svg>
</div>

I know this is not what you asked for, but it could help, it's simple, and it will fit perfectly.
.container {
height:100px;
width:100px;
background-color:grey;
}
svg {
height:100px;
width:100px;
}

It depends on what you mean. If you want the SVG to be clipped off at the edges of the container, you can just add overflow: hidden to the container.
.container {
height: 200px;
background-color: gray;
position: relative;
overflow: hidden;
}
svg {
position: absolute;
left: 0;
top: 0;
right: 100%;
bottom: 100%;
}
<div class="container">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="588px" height="588px" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588" xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856
c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182
c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258
c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333
c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257
C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076
C318.275,104.286,316.275,104.257,314.268,104.257z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.1" style="stop-color:#E62725"/>
<stop offset="0.3093" style="stop-color:#ED1C24"/>
<stop offset="1" style="stop-color:#1C1B1C"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197
c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0
c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756
c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999
c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098
c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/>
<path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794
c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523
c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013
c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41
c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359
c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041
c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825
c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999
c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756
c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285
c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01
C172.146,368.001,208.125,346.119,249.646,334.825z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.6047" style="stop-color:#006838"/>
<stop offset="1" style="stop-color:#538B2E"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756
c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267
c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485
c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933
c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765
c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141
C481.337,683.61,606.767,554.849,606.767,396.756z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513
c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772
c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803
C384.745,370.298,382.664,352.115,378.772,334.793z"/>
</g>
</svg>
</div>
If, instead, you want the SVG to resize to fit the container, you can add height: 100% to the SVG.
.container {
height: 200px;
background-color: gray;
position: relative;
}
svg {
position: absolute;
left: 0;
top: 0;
right: 100%;
bottom: 100%;
height: 100%;
}
<div class="container">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="588px" height="588px" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588" xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856
c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182
c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258
c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333
c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257
C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076
C318.275,104.286,316.275,104.257,314.268,104.257z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.1" style="stop-color:#E62725"/>
<stop offset="0.3093" style="stop-color:#ED1C24"/>
<stop offset="1" style="stop-color:#1C1B1C"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197
c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0
c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756
c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999
c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098
c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/>
<path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794
c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523
c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013
c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41
c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359
c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041
c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825
c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999
c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756
c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285
c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01
C172.146,368.001,208.125,346.119,249.646,334.825z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.6047" style="stop-color:#006838"/>
<stop offset="1" style="stop-color:#538B2E"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756
c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267
c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485
c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933
c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765
c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141
C481.337,683.61,606.767,554.849,606.767,396.756z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513
c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772
c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803
C384.745,370.298,382.664,352.115,378.772,334.793z"/>
</g>
</svg>
</div>

Safari on Macbook does not support linearGradient

I have a simple SVG gradiant. It works very cool. But on Safari Mackbook, It's black and white. Why?
This is my code:
<svg viewBox="0 0 1226 340" id="back-rainbow" version="1.1" preserveAspectRatio="none" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="100%" y1="0%" x2="0%" y2="15%" id="back-rainbow-gradient">
<stop stop-color="#8DC6D8" offset="12%"/>
<stop stop-color="#CE97DF" offset="40%"/>
<stop stop-color="#FFCF9F" offset="90%"/>
</linearGradient>
</defs>
<path fill="url(#back-rainbow-gradient)" d="M1074 0C673.94.2 303.56 126 0 340h1226V6c-50.1-3.72-100.95-5.8-152-6z" />
</svg>
<svg viewBox="0 0 1031 475" id="front-rainbow" preserveAspectRatio="none">
<defs>
<linearGradient x1="100%" y1="0%" x2="0%" y2="25%" id="front-rainbow-gradient" >
<stop stop-color="#00D7B9" offset="0%"/>
<stop stop-color="#B95DD7" offset="50%"/>
<stop stop-color="#FFB367" offset="100%"/>
</linearGradient>
</defs>
<path d="M0 475h1031V0C630.46 33.34 270 208.52 0 475z"
fill="url(#front-rainbow-gradient)" fill-opacity="0.65" />
</svg>
<svg viewBox="0 0 1280 110" preserveAspectRatio="none" id="header-curve">
<path d="M1280 3.9V110H0C194 71.33 662-19.9 1280 3.9z" fill="#fff" />
</svg>

svg fill path animation issue

I'm working on svg animation and trying to make the letters filled just once. When they are filled, animation must stop.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 688" enable-background="new 0 0 2000 688" xml:space="preserve">
<linearGradient id="fill" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
<stop offset="40%" stop-opacity="1" stop-color="royalblue">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="4s" begin="0s"/>
</stop>
<stop offset="40%" stop-opacity="0" stop-color="royalblue">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="4s" begin="0s"/>
</stop>
<stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
</linearGradient>
<g id="preventive">
<g>
<path fill="url(#fill)" d="M541,222c10,8.5,15,21.5,15,39c0,17.6-5.1,30.4-15.4,38.5c-10.2,8.1-25.9,12.2-46.9,12.2h-18.9v39.7h-31.7
V209.3h50.2C515.2,209.3,531.1,213.5,541,222z M517.7,277.9c3.8-4.3,5.7-10.5,5.7-18.7c0-8.2-2.5-14-7.4-17.5
c-5-3.5-12.6-5.2-23.1-5.2h-18.1v47.8h21.4C506.8,284.3,514,282.2,517.7,277.9z"/>
<path fill="url(#fill)" d="M698,256.5c0,22.8-9,37.5-27.1,44.1l36,50.8h-39.1l-31.5-45.4h-22v45.4h-31.7V209.3h53.9
c22.1,0,37.9,3.7,47.3,11.2C693.3,227.9,698,239.9,698,256.5z M659.7,273.4c3.9-3.5,5.9-9.1,5.9-16.8c0-7.7-2-12.9-6.1-15.8
c-4.1-2.8-11.2-4.3-21.4-4.3h-23.8v42.1h23.2C648.4,278.6,655.8,276.9,659.7,273.4z"/>
<path fill="url(#fill)" d="M834.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1H731.8V209.3H834.3z"/>
<path fill="url(#fill)" d="M923,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L923,299.8z"/>
<path fill="url(#fill)" d="M1116.2,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1116.2z"/>
<path fill="url(#fill)" d="M1249.9,209.3h31.7v142.2h-31.7l-67.7-89.1v89.1h-31.7V209.3h29.7l69.8,91.5V209.3z"/>
<path fill="url(#fill)" d="M1376.5,236.7v114.7h-31.7V236.7h-40.3v-27.5h112.3v27.5H1376.5z"/>
<path fill="url(#fill)" d="M1439.7,209.3h31.7v142.2h-31.7V209.3z"/>
<path fill="url(#fill)" d="M1562.1,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L1562.1,299.8z"/>
<path fill="url(#fill)" d="M1755.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1755.3z"/>
</g>
</g>
</svg>
I've used this exampl, but it doesn't work the way I want it to
Here is my js fiddle
Does anyone have any idea how I can get this to work?

If you don't want it to repeat then don't use repeatCount.
If you want it to freeze as it is post animation use fill="freeze"
I've also adjusted the values of the animation so the stop offsets just go from 0 to 1
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 688" enable-background="new 0 0 2000 688" xml:space="preserve">
<linearGradient id="fill" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
<stop offset="40%" stop-opacity="1" stop-color="royalblue">
<animate attributeName="offset" values="0;1" dur="4s" begin="0s" fill="freeze"/>
</stop>
<stop offset="40%" stop-opacity="0" stop-color="royalblue">
<animate attributeName="offset" values="0;1" dur="4s" begin="0s fill="freeze"/>
</stop>
<stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
</linearGradient>
<g id="preventive">
<g>
<path fill="url(#fill)" d="M541,222c10,8.5,15,21.5,15,39c0,17.6-5.1,30.4-15.4,38.5c-10.2,8.1-25.9,12.2-46.9,12.2h-18.9v39.7h-31.7
V209.3h50.2C515.2,209.3,531.1,213.5,541,222z M517.7,277.9c3.8-4.3,5.7-10.5,5.7-18.7c0-8.2-2.5-14-7.4-17.5
c-5-3.5-12.6-5.2-23.1-5.2h-18.1v47.8h21.4C506.8,284.3,514,282.2,517.7,277.9z"/>
<path fill="url(#fill)" d="M698,256.5c0,22.8-9,37.5-27.1,44.1l36,50.8h-39.1l-31.5-45.4h-22v45.4h-31.7V209.3h53.9
c22.1,0,37.9,3.7,47.3,11.2C693.3,227.9,698,239.9,698,256.5z M659.7,273.4c3.9-3.5,5.9-9.1,5.9-16.8c0-7.7-2-12.9-6.1-15.8
c-4.1-2.8-11.2-4.3-21.4-4.3h-23.8v42.1h23.2C648.4,278.6,655.8,276.9,659.7,273.4z"/>
<path fill="url(#fill)" d="M834.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1H731.8V209.3H834.3z"/>
<path fill="url(#fill)" d="M923,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L923,299.8z"/>
<path fill="url(#fill)" d="M1116.2,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1116.2z"/>
<path fill="url(#fill)" d="M1249.9,209.3h31.7v142.2h-31.7l-67.7-89.1v89.1h-31.7V209.3h29.7l69.8,91.5V209.3z"/>
<path fill="url(#fill)" d="M1376.5,236.7v114.7h-31.7V236.7h-40.3v-27.5h112.3v27.5H1376.5z"/>
<path fill="url(#fill)" d="M1439.7,209.3h31.7v142.2h-31.7V209.3z"/>
<path fill="url(#fill)" d="M1562.1,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L1562.1,299.8z"/>
<path fill="url(#fill)" d="M1755.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1755.3z"/>
</g>
</g>
</svg>

Styling an SVG embedded in an object

<object>
#document
<svg></svg>
</object>
I want to style the svg's width to be 100% of the parent but since it's technically in a different document I'm having troubles accomplishing that. How would I add width: 100% to the svg element using any means necessary?

Style the object to have your width of 100%, then edit the SVG to have a width of 100%. You can see in the xml for the svg, we have a height and width declaration which are valid for your purposes.
Here, we're setting the object to 100% width of an 80% container to illustrate the effect.
.falsy-body {
width: 80%;
background-color: lightgray;
}
.falsy-body object {
width: 100%;
}
<div class="falsy-body">
<object>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Livello_1" x="0px" y="0px" width="100%" height="100%" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588" xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856 c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182 c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258 c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333 c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257 C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076 C318.275,104.286,316.275,104.257,314.268,104.257z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.1" style="stop-color:#E62725"/>
<stop offset="0.3093" style="stop-color:#ED1C24"/>
<stop offset="1" style="stop-color:#1C1B1C"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197 c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0 c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756 c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999 c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098 c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/>
<path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794 c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523 c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013 c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41 c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359 c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041 c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825 c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999 c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756 c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285 c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01 C172.146,368.001,208.125,346.119,249.646,334.825z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.6047" style="stop-color:#006838"/>
<stop offset="1" style="stop-color:#538B2E"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756 c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267 c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485 c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933 c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765 c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141 C481.337,683.61,606.767,554.849,606.767,396.756z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513 c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772 c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803 C384.745,370.298,382.664,352.115,378.772,334.793z"/>
</g>
</svg>
</object>
</div>