How to make SVG larger - html
I have some SVG images from a third party, like the below snippet.
Can I amend these to have a default larger size? I.e. I would like these to be 256px x 256px ideally, rather than the 64px they are at the moment.
I've tried style="transform: scale(4,4)" but this doesn't look right, but almost what i'm after, it's just not aligned correctly.
The reason I am asking is that I am using these within an image tag, and these go blurry on Iphone when I resize them to be bigger, I am thinking this may be due to the images being stretched from their original size? I might be wrong with this, but thought it was possible.
See this post below for the full issue of what is happening to these images when displayed on iphone.
Any help would be really appreciated.
SVG used as image is blury on iphone
<svg
xmlns="http://www.w3.org/2000/svg" width="64" height="64">
<radialGradient id="a" cx="25.875" cy="24.504" r="31.893" gradientTransform="matrix(1 0 0 1.003 0 .963)" gradientUnits="userSpaceOnUse">
<stop offset=".4" stop-color="#f5000d"/>
<stop offset=".618" stop-color="#f2010d"/>
<stop offset=".758" stop-color="#ea040e"/>
<stop offset=".877" stop-color="#db0a10"/>
<stop offset=".984" stop-color="#c61213"/>
<stop offset="1" stop-color="#c21413"/>
</radialGradient>
<path fill="url(#a)" d="M31.873 13.657C29.564 13.657 3 4.854 3 29.919 3 45.134 18.711 62 25.568 62c3.111 0 4.5-1.996 6.305-1.996 1.838 0 2.158 1.996 6.141 1.996C44.873 62 61 43.387 61 29.919c0-25.09-26.818-16.262-29.127-16.262z"/>
<radialGradient id="b" cx="31.976" cy="15.973" r="12.221" gradientTransform="matrix(1 0 0 .4524 0 9.758)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#b30100"/>
<stop offset="1" stop-color="#c21413" stop-opacity="0"/>
</radialGradient>
<path fill="url(#b)" d="M32 17.868c6.573 0 6.19-3.344 21.237-3.704-8.112-4.195-19.87-.507-21.364-.507-1.493 0-13.122-3.668-21.158.506 15.095.352 14.704 3.705 21.285 3.705z"/>
<radialGradient id="c" cx="284.948" cy="-516.148" r="13.633" gradientTransform="matrix(1.0508 -.1028 -.1778 -1.0674 -373.088 -493.67)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ff4f42"/>
<stop offset="1" stop-color="#ff4f42" stop-opacity="0"/>
</radialGradient>
<path fill="url(#c)" d="M32.453 26.574c-1.338-8.037-8.838-13.924-16.747-13.149-7.915.773-13.245 7.914-11.907 15.951 1.34 8.038 8.84 13.925 16.752 13.15 7.913-.772 13.242-7.915 11.902-15.952z"/>
<path fill="#449C00" d="M31.56 13.63C46.364 15.757 50.227 2.135 50.227 2.135S35.926 8.678 31.56 13.63z"/>
<path fill="#56AB15" d="M31.56 13.63C36.563 9.247 50.227 2.135 50.227 2.135S34.22-.101 31.56 13.63z"/>
<path fill="#785647" d="M32.67 17.868c-2.549-2.545-1.67-12.114.279-12.114 3.227 0-2.388 3.311-.279 12.114z"/>
</svg>
I made it 256px X 256px by adding viewbox settings and setting height and width to 256px.
viewbox settings MDN
<svg
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg" width="256px" height="256px">
<radialGradient id="a" cx="25.875" cy="24.504" r="31.893" gradientTransform="matrix(1 0 0 1.003 0 .963)" gradientUnits="userSpaceOnUse">
<stop offset=".4" stop-color="#f5000d"/>
<stop offset=".618" stop-color="#f2010d"/>
<stop offset=".758" stop-color="#ea040e"/>
<stop offset=".877" stop-color="#db0a10"/>
<stop offset=".984" stop-color="#c61213"/>
<stop offset="1" stop-color="#c21413"/>
</radialGradient>
<path fill="url(#a)" d="M31.873 13.657C29.564 13.657 3 4.854 3 29.919 3 45.134 18.711 62 25.568 62c3.111 0 4.5-1.996 6.305-1.996 1.838 0 2.158 1.996 6.141 1.996C44.873 62 61 43.387 61 29.919c0-25.09-26.818-16.262-29.127-16.262z"/>
<radialGradient id="b" cx="31.976" cy="15.973" r="12.221" gradientTransform="matrix(1 0 0 .4524 0 9.758)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#b30100"/>
<stop offset="1" stop-color="#c21413" stop-opacity="0"/>
</radialGradient>
<path fill="url(#b)" d="M32 17.868c6.573 0 6.19-3.344 21.237-3.704-8.112-4.195-19.87-.507-21.364-.507-1.493 0-13.122-3.668-21.158.506 15.095.352 14.704 3.705 21.285 3.705z"/>
<radialGradient id="c" cx="284.948" cy="-516.148" r="13.633" gradientTransform="matrix(1.0508 -.1028 -.1778 -1.0674 -373.088 -493.67)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ff4f42"/>
<stop offset="1" stop-color="#ff4f42" stop-opacity="0"/>
</radialGradient>
<path fill="url(#c)" d="M32.453 26.574c-1.338-8.037-8.838-13.924-16.747-13.149-7.915.773-13.245 7.914-11.907 15.951 1.34 8.038 8.84 13.925 16.752 13.15 7.913-.772 13.242-7.915 11.902-15.952z"/>
<path fill="#449C00" d="M31.56 13.63C46.364 15.757 50.227 2.135 50.227 2.135S35.926 8.678 31.56 13.63z"/>
<path fill="#56AB15" d="M31.56 13.63C36.563 9.247 50.227 2.135 50.227 2.135S34.22-.101 31.56 13.63z"/>
<path fill="#785647" d="M32.67 17.868c-2.549-2.545-1.67-12.114.279-12.114 3.227 0-2.388 3.311-.279 12.114z"/>
</svg>
Related
How to create SVG seperate Sprite file
I am facing an issue while creating SVG sprites
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="search-grey" viewBox="0 0 26.05 26.05">
<defs>
<style>.cls-1,.cls-2{fill:none}.cls-2{stroke:gray;stroke-linejoin:round}.cls-3{clip-path:url(#clip-path)}.cls-4{clip-path:url(#clip-path-2)}.cls-5{fill:url(#linear-gradient)}</style>
<clipPath id="clip-path">
<path d="M17.88-116.52c-.73-1.93-5.48-7.79-7.55-7.79-2.57 0-6.79 3.83-11.73 2-6-2.17-5.18-10.32-11.91-13.18a33.36 33.36 0 0 1 3.73 1.31c-3.23-5.29-10.81-3.13-12.43-.81-.25.92 1.61 2.6 3.18 3.71 1.43 2 1.6 2.18.43 5.71s7.8 2.39 10.29 5.11c2.69 3 5.77 5.3 9.9 6.17a2.46 2.46 0 0 1 .39.09c.83 2 7.23 7.62 16.46 10.34-1.34-1.55 0-10.78-.76-12.7" class="cls-1"/>
</clipPath>
<clipPath id="clip-path-2">
<path d="M-248.64-137.83H222.2v80.44h-470.84z" class="cls-1"/>
</clipPath>
<linearGradient id="linear-gradient" x1="-49.74" x2="-49.36" y1="255.49" y2="255.49" gradientTransform="scale(-34.13 34.13) rotate(62.12 190.304 167.061)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset=".01" stop-color="#fdfcf9"/>
<stop offset=".17" stop-color="#e9dbbe"/>
<stop offset=".32" stop-color="#d7bf8b"/>
<stop offset=".47" stop-color="#c9a961"/>
<stop offset=".62" stop-color="#be9741"/>
<stop offset=".76" stop-color="#b68a2a"/>
<stop offset=".89" stop-color="#b2831c"/>
<stop offset="1" stop-color="#b08017"/>
</linearGradient>
</defs>
<circle cx="10.58" cy="10.58" r="10.08" class="cls-2"/>
<path d="M18.14 18.14l7.56 7.56" class="cls-2"/>
<g class="cls-3">
<g class="cls-4">
<path d="M258.66-120.24L119.27 120.02-285.11-74.97l139.39-240.27 404.38 195z" class="cls-5"/>
</g>
</g>
</symbol>
</svg>
above is my svg sprite file named "svg-sprites.svg"
in the HTML I use this code
<svg viewBox="0 0 26.05 26.05" class="icon"><use xlink:href="#search-grey"></use></svg>
but it is not properly displaying the icon as i created in Illustrator.
I can't figure out why it is not working.
How to fix linear gradient fill in svg path i cannot make it transition
I made an svg string with Figma. I deleted a fill from the svg,
because I want to add a linear gradient to the fill.
When I added a fill with css it show suddenly without any transition
This is my path:
<svg id="intro-svg" viewBox="0 0 624 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="svgGradient" x1="0%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" stop-color="#3483a8"/>
<stop offset="100%" stop-color="#e250eb" />
</linearGradient>
</defs>
<path d="M31.8813 35.9395H12.521L8.17285 48H1.88867L19.5352 1.78906H24.8672L42.5454 48H36.293L31.8813 35.9395ZM14.3618 30.9248H30.0723L22.2012 9.31104L14.3618 30.9248Z" stroke="url(#paint0_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M74.7144 29.3062H63.8599V48H57.7344V1.78906H73.0322C78.2373 1.78906 82.2363 2.97396 85.0293 5.34375C87.8434 7.71354 89.2505 11.1624 89.2505 15.6904C89.2505 18.568 88.4676 21.0754 86.9019 23.2124C85.3573 25.3494 83.1991 26.9469 80.4272 28.0049L91.2817 47.6191V48H84.7437L74.7144 29.3062ZM63.8599 24.3232H73.2227C76.2484 24.3232 78.6499 23.5404 80.4272 21.9746C82.2257 20.4089 83.125 18.3141 83.125 15.6904C83.125 12.834 82.2681 10.644 80.5542 9.12061C78.8615 7.59717 76.4071 6.82487 73.1909 6.80371H63.8599V24.3232Z" stroke="url(#paint1_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M132.94 26.6401H112.914V43.0171H136.178V48H106.82V1.78906H135.86V6.80371H112.914V21.6572H132.94V26.6401Z" stroke="url(#paint2_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M191.978 24.9897L204.039 1.78906H210.958L195.025 30.7661V48H188.931V30.7661L172.999 1.78906H179.981L191.978 24.9897Z" stroke="url(#paint3_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M260.519 26.3862C260.519 30.9142 259.757 34.8709 258.234 38.2563C256.71 41.6206 254.552 44.1914 251.759 45.9688C248.966 47.7461 245.708 48.6348 241.984 48.6348C238.345 48.6348 235.118 47.7461 232.304 45.9688C229.49 44.1702 227.3 41.6206 225.734 38.3198C224.189 34.9979 223.396 31.1576 223.354 26.7988V23.4663C223.354 19.0229 224.126 15.098 225.67 11.6914C227.215 8.28483 229.394 5.68229 232.208 3.88379C235.044 2.06413 238.281 1.1543 241.92 1.1543C245.623 1.1543 248.882 2.05355 251.696 3.85205C254.531 5.62939 256.71 8.22135 258.234 11.6279C259.757 15.0133 260.519 18.9595 260.519 23.4663V26.3862ZM254.457 23.4028C254.457 17.9227 253.357 13.7227 251.156 10.8027C248.956 7.86165 245.877 6.39111 241.92 6.39111C238.069 6.39111 235.033 7.86165 232.812 10.8027C230.611 13.7227 229.479 17.7852 229.416 22.9902V26.3862C229.416 31.6971 230.526 35.876 232.748 38.9229C234.991 41.9486 238.069 43.4614 241.984 43.4614C245.919 43.4614 248.966 42.0332 251.125 39.1768C253.283 36.2992 254.394 32.1838 254.457 26.8306V23.4028Z" stroke="url(#paint4_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M311.191 1.78906V33.21C311.17 37.5687 309.795 41.134 307.065 43.9058C304.357 46.6776 300.675 48.2327 296.021 48.5713L294.402 48.6348C289.345 48.6348 285.314 47.27 282.31 44.5405C279.305 41.811 277.782 38.0553 277.739 33.2734V1.78906H283.77V33.083C283.77 36.4261 284.69 39.0286 286.531 40.8906C288.372 42.7314 290.995 43.6519 294.402 43.6519C297.851 43.6519 300.485 42.7314 302.305 40.8906C304.146 39.0498 305.066 36.4578 305.066 33.1147V1.78906H311.191Z" stroke="url(#paint5_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M371.879 29.3062H361.025V48H354.899V1.78906H370.197C375.402 1.78906 379.401 2.97396 382.194 5.34375C385.008 7.71354 386.416 11.1624 386.416 15.6904C386.416 18.568 385.633 21.0754 384.067 23.2124C382.522 25.3494 380.364 26.9469 377.592 28.0049L388.447 47.6191V48H381.909L371.879 29.3062ZM361.025 24.3232H370.388C373.413 24.3232 375.815 23.5404 377.592 21.9746C379.391 20.4089 380.29 18.3141 380.29 15.6904C380.29 12.834 379.433 10.644 377.719 9.12061C376.027 7.59717 373.572 6.82487 370.356 6.80371H361.025V24.3232Z" stroke="url(#paint6_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M430.105 26.6401H410.079V43.0171H433.343V48H403.985V1.78906H433.025V6.80371H410.079V21.6572H430.105V26.6401Z" stroke="url(#paint7_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M475.446 35.9395H456.085L451.737 48H445.453L463.1 1.78906H468.432L486.11 48H479.857L475.446 35.9395ZM457.926 30.9248H473.637L465.766 9.31104L457.926 30.9248Z" stroke="url(#paint8_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M501.331 48V1.78906H514.375C518.395 1.78906 521.95 2.67773 525.039 4.45508C528.128 6.23242 530.509 8.76091 532.18 12.0405C533.873 15.3201 534.73 19.0864 534.751 23.3394V26.291C534.751 30.6497 533.905 34.4689 532.212 37.7485C530.54 41.0282 528.139 43.5461 525.007 45.3022C521.897 47.0584 518.268 47.9577 514.121 48H501.331ZM507.424 6.80371V43.0171H513.835C518.533 43.0171 522.183 41.5571 524.785 38.6372C527.409 35.7173 528.721 31.5596 528.721 26.1641V23.4663C528.721 18.2189 527.483 14.1458 525.007 11.2471C522.553 8.32715 519.062 6.84603 514.534 6.80371H507.424Z" stroke="url(#paint9_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M565.682 24.9897L577.743 1.78906H584.662L568.729 30.7661V48H562.635V30.7661L546.703 1.78906H553.685L565.682 24.9897Z" stroke="url(#paint10_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M605.595 34.9873C605.638 32.4694 605.923 30.4805 606.452 29.0205C606.981 27.5605 608.06 25.9419 609.689 24.1646L613.847 19.8799C615.625 17.8698 616.513 15.7116 616.513 13.4053C616.513 11.1836 615.931 9.44857 614.768 8.2002C613.604 6.93066 611.911 6.2959 609.689 6.2959C607.531 6.2959 605.796 6.86719 604.484 8.00977C603.173 9.15234 602.517 10.6864 602.517 12.6118H596.645C596.687 9.18408 597.904 6.42285 600.295 4.32812C602.707 2.21224 605.839 1.1543 609.689 1.1543C613.688 1.1543 616.799 2.2334 619.021 4.3916C621.263 6.52865 622.385 9.46973 622.385 13.2148C622.385 16.9176 620.671 20.5675 617.243 24.1646L613.784 27.5923C612.239 29.3062 611.467 31.7712 611.467 34.9873H605.595ZM605.341 45.0483C605.341 44.0962 605.627 43.3027 606.198 42.668C606.791 42.012 607.658 41.6841 608.801 41.6841C609.943 41.6841 610.811 42.012 611.403 42.668C611.996 43.3027 612.292 44.0962 612.292 45.0483C612.292 46.0005 611.996 46.7939 611.403 47.4287C610.811 48.0423 609.943 48.3491 608.801 48.3491C607.658 48.3491 606.791 48.0423 606.198 47.4287C605.627 46.7939 605.341 46.0005 605.341 45.0483Z" stroke="url(#paint11_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
<defs>
<linearGradient id="paint0_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
<stop stop-color="#3483A8"/>
<stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
<stop stop-color="#3483A8"/>
<stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
<stop stop-color="#3483A8"/>
<stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
<stop stop-color="#3483A8"/>
<stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
<stop stop-color="#3483A8"/>
<stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint5_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
<stop stop-color="#3483A8"/>
<stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint6_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
<stop stop-color="#3483A8"/>
<stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint7_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
<stop stop-color="#3483A8"/>
<stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint8_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
<stop stop-color="#3483A8"/>
<stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint9_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
<stop stop-color="#3483A8"/>
<stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint10_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
<stop stop-color="#3483A8"/>
<stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint11_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
<stop stop-color="#3483A8"/>
<stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
When I try to fill a path with linear gradient, the fill showing suddenly, I want to show it with transition :
#intro-svg {
max-width: 678px;
animation: fill 2s ease forwards;
}
#keyframes fill {
from {
fill: transparent;
}
to {
fill: url(#svgGradient);
}
}
I've simplified your code by using only one gradient. Also I've changed the attributeName to "stop-color". In your code you are using a mask but since there is no <mask> in the code I've remove all the attributes mask. I hope it helps. <svg id="intro-svg" viewBox="0 0 624 50" fill="none" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="svgGradient" x1="0%" y1="0%" x2="50%" y2="100%"> <stop offset="0%" stop-color="#3483a8"> <animate attributeName="stop-color" values="#3483a8;#e250eb;#3483a8;" dur="1s" repeatCount="indefinite"></animate> </stop> <stop offset="100%" stop-color="#e250eb" /> </linearGradient> </defs> <path d="M31.8813 35.9395H12.521L8.17285 48H1.88867L19.5352 1.78906H24.8672L42.5454 48H36.293L31.8813 35.9395ZM14.3618 30.9248H30.0723L22.2012 9.31104L14.3618 30.9248Z" stroke="url(#svgGradient)" stroke-width="2" /> <path d="M74.7144 29.3062H63.8599V48H57.7344V1.78906H73.0322C78.2373 1.78906 82.2363 2.97396 85.0293 5.34375C87.8434 7.71354 89.2505 11.1624 89.2505 15.6904C89.2505 18.568 88.4676 21.0754 86.9019 23.2124C85.3573 25.3494 83.1991 26.9469 80.4272 28.0049L91.2817 47.6191V48H84.7437L74.7144 29.3062ZM63.8599 24.3232H73.2227C76.2484 24.3232 78.6499 23.5404 80.4272 21.9746C82.2257 20.4089 83.125 18.3141 83.125 15.6904C83.125 12.834 82.2681 10.644 80.5542 9.12061C78.8615 7.59717 76.4071 6.82487 73.1909 6.80371H63.8599V24.3232Z" stroke="url(#svgGradient)" stroke-width="2" /> <path d="M132.94 26.6401H112.914V43.0171H136.178V48H106.82V1.78906H135.86V6.80371H112.914V21.6572H132.94V26.6401Z" stroke="url(#svgGradient)" stroke-width="2" /> <path d="M191.978 24.9897L204.039 1.78906H210.958L195.025 30.7661V48H188.931V30.7661L172.999 1.78906H179.981L191.978 24.9897Z" stroke="url(#svgGradient)" stroke-width="2" /> <path d="M260.519 26.3862C260.519 30.9142 259.757 34.8709 258.234 38.2563C256.71 41.6206 254.552 44.1914 251.759 45.9688C248.966 47.7461 245.708 48.6348 241.984 48.6348C238.345 48.6348 235.118 47.7461 232.304 45.9688C229.49 44.1702 227.3 41.6206 225.734 38.3198C224.189 34.9979 223.396 31.1576 223.354 26.7988V23.4663C223.354 19.0229 224.126 15.098 225.67 11.6914C227.215 8.28483 229.394 5.68229 232.208 3.88379C235.044 2.06413 238.281 1.1543 241.92 1.1543C245.623 1.1543 248.882 2.05355 251.696 3.85205C254.531 5.62939 256.71 8.22135 258.234 11.6279C259.757 15.0133 260.519 18.9595 260.519 23.4663V26.3862ZM254.457 23.4028C254.457 17.9227 253.357 13.7227 251.156 10.8027C248.956 7.86165 245.877 6.39111 241.92 6.39111C238.069 6.39111 235.033 7.86165 232.812 10.8027C230.611 13.7227 229.479 17.7852 229.416 22.9902V26.3862C229.416 31.6971 230.526 35.876 232.748 38.9229C234.991 41.9486 238.069 43.4614 241.984 43.4614C245.919 43.4614 248.966 42.0332 251.125 39.1768C253.283 36.2992 254.394 32.1838 254.457 26.8306V23.4028Z" stroke="url(#svgGradient)" stroke-width="2" /> <path d="M311.191 1.78906V33.21C311.17 37.5687 309.795 41.134 307.065 43.9058C304.357 46.6776 300.675 48.2327 296.021 48.5713L294.402 48.6348C289.345 48.6348 285.314 47.27 282.31 44.5405C279.305 41.811 277.782 38.0553 277.739 33.2734V1.78906H283.77V33.083C283.77 36.4261 284.69 39.0286 286.531 40.8906C288.372 42.7314 290.995 43.6519 294.402 43.6519C297.851 43.6519 300.485 42.7314 302.305 40.8906C304.146 39.0498 305.066 36.4578 305.066 33.1147V1.78906H311.191Z" stroke="url(#svgGradient)" stroke-width="2" /> <path d="M371.879 29.3062H361.025V48H354.899V1.78906H370.197C375.402 1.78906 379.401 2.97396 382.194 5.34375C385.008 7.71354 386.416 11.1624 386.416 15.6904C386.416 18.568 385.633 21.0754 384.067 23.2124C382.522 25.3494 380.364 26.9469 377.592 28.0049L388.447 47.6191V48H381.909L371.879 29.3062ZM361.025 24.3232H370.388C373.413 24.3232 375.815 23.5404 377.592 21.9746C379.391 20.4089 380.29 18.3141 380.29 15.6904C380.29 12.834 379.433 10.644 377.719 9.12061C376.027 7.59717 373.572 6.82487 370.356 6.80371H361.025V24.3232Z" stroke="url(#svgGradient)" stroke-width="2"/> <path d="M430.105 26.6401H410.079V43.0171H433.343V48H403.985V1.78906H433.025V6.80371H410.079V21.6572H430.105V26.6401Z" stroke="url(#svgGradient)" stroke-width="2" /> <path d="M475.446 35.9395H456.085L451.737 48H445.453L463.1 1.78906H468.432L486.11 48H479.857L475.446 35.9395ZM457.926 30.9248H473.637L465.766 9.31104L457.926 30.9248Z" stroke="url(#svgGradient)" stroke-width="2" /> <path d="M501.331 48V1.78906H514.375C518.395 1.78906 521.95 2.67773 525.039 4.45508C528.128 6.23242 530.509 8.76091 532.18 12.0405C533.873 15.3201 534.73 19.0864 534.751 23.3394V26.291C534.751 30.6497 533.905 34.4689 532.212 37.7485C530.54 41.0282 528.139 43.5461 525.007 45.3022C521.897 47.0584 518.268 47.9577 514.121 48H501.331ZM507.424 6.80371V43.0171H513.835C518.533 43.0171 522.183 41.5571 524.785 38.6372C527.409 35.7173 528.721 31.5596 528.721 26.1641V23.4663C528.721 18.2189 527.483 14.1458 525.007 11.2471C522.553 8.32715 519.062 6.84603 514.534 6.80371H507.424Z" stroke="url(#svgGradient)" stroke-width="2" /> <path d="M565.682 24.9897L577.743 1.78906H584.662L568.729 30.7661V48H562.635V30.7661L546.703 1.78906H553.685L565.682 24.9897Z" stroke="url(#svgGradient)" stroke-width="2" /> <path d="M605.595 34.9873C605.638 32.4694 605.923 30.4805 606.452 29.0205C606.981 27.5605 608.06 25.9419 609.689 24.1646L613.847 19.8799C615.625 17.8698 616.513 15.7116 616.513 13.4053C616.513 11.1836 615.931 9.44857 614.768 8.2002C613.604 6.93066 611.911 6.2959 609.689 6.2959C607.531 6.2959 605.796 6.86719 604.484 8.00977C603.173 9.15234 602.517 10.6864 602.517 12.6118H596.645C596.687 9.18408 597.904 6.42285 600.295 4.32812C602.707 2.21224 605.839 1.1543 609.689 1.1543C613.688 1.1543 616.799 2.2334 619.021 4.3916C621.263 6.52865 622.385 9.46973 622.385 13.2148C622.385 16.9176 620.671 20.5675 617.243 24.1646L613.784 27.5923C612.239 29.3062 611.467 31.7712 611.467 34.9873H605.595ZM605.341 45.0483C605.341 44.0962 605.627 43.3027 606.198 42.668C606.791 42.012 607.658 41.6841 608.801 41.6841C609.943 41.6841 610.811 42.012 611.403 42.668C611.996 43.3027 612.292 44.0962 612.292 45.0483C612.292 46.0005 611.996 46.7939 611.403 47.4287C610.811 48.0423 609.943 48.3491 608.801 48.3491C607.658 48.3491 606.791 48.0423 606.198 47.4287C605.627 46.7939 605.341 46.0005 605.341 45.0483Z" stroke="url(#svgGradient)" stroke-width="2" /> </svg>
SVG does not line up correctly with aspect ratio
I've been trying to solve this for a while now and can't get the SVGs to align correctly for some width and height. My viewBox has 16:9 aspect ratio and I would like to scale the SVG by the same aspect ratio. For some width and height, it does line correctly but for others it doesn't although both have the same aspect ratio. Any hints on what is causing this? I have a JSFiddle for you to try, https://jsfiddle.net/n90ty8ys/1/ <svg id="svg-main-panel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 432" preserveAspectRatio="xMinYMin meet" width="1120" height="630"> <rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="200" height="200" fill="blue"></rect> <svg width="20" height="40" x="20" y="20"> <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="657.247" y1="172.823" x2="657.247" y2="152.907" gradientTransform="rotate(90 405.13 -232.117)"> <stop offset="0" stop-color="#BDCCD4"></stop> <stop offset=".5" stop-color="#EBF0F2"></stop> <stop offset="1" stop-color="#BDCCD4"></stop> </linearGradient> <path fill="url(#a)" d="M20 0H.034L0 40h19.966"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" x="20" y="60"> <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="19.775" y1="30" x2="-.14" y2="30"> <stop offset="0" stop-color="#BDCCD4" /> <stop offset=".5" stop-color="#EBF0F2" /> <stop offset="1" stop-color="#BDCCD4" /> </linearGradient> <path fill="url(#a)" d="M-.034 20h20v20h-20z" /> <linearGradient id="b" gradientUnits="userSpaceOnUse" x1="-1207.701" y1="556.747" x2="-1207.701" y2="576.663" gradientTransform="matrix(0 -1 -1 0 576.556 -1188.2)"> <stop offset="0" stop-color="#BDCCD4" /> <stop offset=".5" stop-color="#EBF0F2" /> <stop offset="1" stop-color="#BDCCD4" /> </linearGradient> <path fill="url(#b)" d="M0 40l19.966-20L20-1H0" /> <linearGradient id="c" gradientUnits="userSpaceOnUse" x1="-847.237" y1="1808.924" x2="-847.237" y2="1828.84" gradientTransform="matrix(-1 0 0 1 -826.737 -1788.733)"> <stop offset="0" stop-color="#BDCCD4" /> <stop offset=".5" stop-color="#EBF0F2" /> <stop offset="1" stop-color="#BDCCD4" /> </linearGradient> <path fill="url(#c)" d="M41 40V20H19.934L0 40h19.968" /> </svg> </svg>
Updates Originally I thought viewBox and svg had different ratio, which actually had the same. I updated #2 below accordingly. I see two potential issues: Your <path> elements have decimal numbers in d attribute. As browsers rendering unit is pixel (integer), it might misalign your SVG elements. In the below snippet, I changed all the decimal numbers in d attributes to integers. For example, I changed <path fill="url(#c)" d="M41 40V20H19.934L0 40h19.968" /> to <path fill="url(#c)" d="M41 40V20H20L0 40h20" />. Your base <svg>’s viewBox size, especially ratio, is different from width and height attribute value. Your viewBox width and height is 768 and 432 respectively, while your <svg> has width="1120" height="630" for its size value. That difference makes the SVG skewed unexpectedly and might produce decimal-based rendering that causes pixel misalignment in the browser. As viewBox vs <svg> size ratio is 1:1.46 (1120/768), it could render misaligned elements. There is a great article by Sara Soueidan about how to configure your viewBox numbers. I applied those two changes in the snippet below, and it seems to work fine. Good luck! <svg id="svg-main-panel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1120 630" preserveAspectRatio="xMinYMin meet" width="1120" height="630"> <rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="200" height="200" fill="blue"></rect> <svg width="20" height="40" x="20" y="20"> <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="657.247" y1="172.823" x2="657.247" y2="152.907" gradientTransform="rotate(90 405.13 -232.117)"> <stop offset="0" stop-color="#BDCCD4"></stop> <stop offset=".5" stop-color="#EBF0F2"></stop> <stop offset="1" stop-color="#BDCCD4"></stop> </linearGradient> <path fill="url(#a)" d="M20 0H0L0 40h20"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" x="20" y="60"> <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="19.775" y1="30" x2="-.14" y2="30"> <stop offset="0" stop-color="#BDCCD4" /> <stop offset=".5" stop-color="#EBF0F2" /> <stop offset="1" stop-color="#BDCCD4" /> </linearGradient> <path fill="url(#a)" d="M0 20h20v20h-20z" /> <linearGradient id="b" gradientUnits="userSpaceOnUse" x1="-1207.701" y1="556.747" x2="-1207.701" y2="576.663" gradientTransform="matrix(0 -1 -1 0 576.556 -1188.2)"> <stop offset="0" stop-color="#BDCCD4" /> <stop offset=".5" stop-color="#EBF0F2" /> <stop offset="1" stop-color="#BDCCD4" /> </linearGradient> <path fill="url(#b)" d="M0 40l20-20L20-1H0" /> <linearGradient id="c" gradientUnits="userSpaceOnUse" x1="-847.237" y1="1808.924" x2="-847.237" y2="1828.84" gradientTransform="matrix(-1 0 0 1 -826.737 -1788.733)"> <stop offset="0" stop-color="#BDCCD4" /> <stop offset=".5" stop-color="#EBF0F2" /> <stop offset="1" stop-color="#BDCCD4" /> </linearGradient> <path fill="url(#c)" d="M41 40V20H20L0 40h20" /> </svg> </svg>
A colorful SVG in plain HTML is all black in React. Why?
I'm using React in Meteor.
When I add an SVG to the React component, style is not applied. But the very same code is working as expected in a plain HTML.
Here is my SVG code:
<svg viewBox="0 0 1031 475" 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>
The React component:
render () {
return (
<div>
<div className="main-header">
<svg viewBox="0 0 1031 475" 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>
</div>
<div className="latest">
<Container />
</div>
</div>
)
}
classic camelCase. <stop stopColor="#00D7B9" offset="0%"/> <stop stopColor="#B95DD7" offset="50%"/> <stop stopColor="#FFB367" offset="100%"/> (mind that react expects camel case properties)
Use element and injected SVG: Gradients not working in Chrome
I am using an svg spritesheet with symbols and inject it inline with SVGInjector. I reference it this way: <svg role="img" width="134px" height="89px"> <use xlink:href="path/to/sprite.symbol.svg#theid"></use> </svg> The gradients are declared inside the defs tag of the spritesheet, but they are not showing in Chrome. I noticed, that it works, if the SVG is not injected. That means, I just placed the whole thing inline into my HTML and the gradients showed as expected. The Spritesheet was exactly the same. The difference is just if it is loaded by JavaScript or not. But the symbol itself is showing. The problem is only the gradient. This is a simplified version of my spritesheet, with one of the broken icons. In that case, the group called "quadri" is not displayed: <?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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="20.0664" y1="12.1807" x2="20.0664" y2="19.5099"> <stop offset="0" style="stop-color:#00774A"/> <stop offset="0.6" style="stop-color:#8CCAAE"/> <stop offset="1" style="stop-color:#00975F"/> </linearGradient> <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="20.0513" y1="10.627" x2="20.0513" y2="18.8625"> <stop offset="0" style="stop-color:#00975F"/> <stop offset="0.3" style="stop-color:#8CCAAE"/> <stop offset="0.55" style="stop-color:#00975F"/> <stop offset="0.8352" style="stop-color:#00774A"/> <stop offset="0.8691" style="stop-color:#007C4E"/> <stop offset="0.9244" style="stop-color:#00895A"/> <stop offset="0.9938" style="stop-color:#009E6E"/> <stop offset="1" style="stop-color:#00A070"/> </linearGradient> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="21.3755" y1="18.4082" x2="21.3755" y2="13.0789"> <stop offset="0" style="stop-color:#00A97C"/> <stop offset="1" style="stop-color:#00975F"/> </linearGradient> <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="18.0532" y1="18.4072" x2="18.0532" y2="13.0789"> <stop offset="0" style="stop-color:#00A97C"/> <stop offset="1" style="stop-color:#00975F"/> </linearGradient> <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="19.1021" y1="18.4072" x2="19.1021" y2="13.0799"> <stop offset="0" style="stop-color:#00A97C"/> <stop offset="1" style="stop-color:#00975F"/> </linearGradient> <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="19.9897" y1="18.4082" x2="19.9897" y2="13.079"> <stop offset="0" style="stop-color:#00A97C"/> <stop offset="1" style="stop-color:#00975F"/> </linearGradient> </defs> <symbol viewBox="0 0 66 33" id="theid"> <g id="Quadri"> <polygon fill="url(#SVGID_1_)" points="23.541,19.298 16.592,19.298 16.592,12.348 23.541,12.348 "/> <path fill="url(#SVGID_2_)" d="M23.327,15.869c0,1.455,0.062,2.939,0.062,2.939c0,0.168-0.107,0.275-0.245,0.275h-6.016 c-0.138,0-0.229-0.122-0.245-0.275c0,0-0.168-1.271-0.168-3.199s0.168-2.847,0.168-2.847c0.016-0.153,0.107-0.275,0.245-0.275 h6.016c0.138,0,0.245,0.123,0.245,0.275C23.388,12.746,23.327,14.415,23.327,15.869z"/> <g> <g> <path fill="url(#SVGID_3_)" d="M21.98,14.231c-0.429,0.245-0.551,0.26-1.026,0.551l0.031-0.061 c0.245-0.26,0.352-0.383,0.505-0.612c-0.428,0.031-1.056,0.077-1.5,0.168l0,0l0,0l0,0l0.031-0.046 c0.398-0.199,1.163-0.398,1.546-0.444c-0.092-0.138-0.857-0.551-1.041-0.628l0,0l0,0l0,0l0.016-0.046 c0.582,0.062,1.347,0.337,1.668,0.536c0.138-0.046,0.291-0.046,0.551-0.076c0,0-0.046,0.153-0.322,0.352l0,0l0,0l0,0 c0.077,0.184-0.092,1.24-0.245,1.515l0,0l0,0l0,0C22.194,15.012,22.148,14.46,21.98,14.231z"/> <path fill="url(#SVGID_4_)" d="M18.842,17.981l0.015-0.046c-0.229-0.092-0.459-0.153-0.643-0.337l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 c0.061-0.169,0.123-0.291,0.229-0.444l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0.015-0.046c-0.199,0.03-0.367,0.107-0.536,0.138l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.138-0.229-0.184-0.551-0.26-0.857 l-0.015,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.031,0.352-0.046,0.597,0,0.873l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 c-0.138,0.046-0.26,0.046-0.383,0.092l-0.015,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.184,0.107,0.321,0.199,0.536,0.291l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.107,0.229,0.229,0.397,0.413,0.581 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0.016-0.046c-0.031-0.138-0.077-0.244-0.062-0.397l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0C18.398,17.936,18.597,17.966,18.842,17.981z"/> <path fill="url(#SVGID_5_)" d="M19.485,14.491c0,0-0.092,0.168-0.168,0.382h-0.015l0,0l0,0c0.536,0.077,1.041,0.291,1.163,0.368 l-0.015,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.566-0.107-0.857-0.092-1.056-0.077l0,0l0,0l0,0 c-0.214,0.031-0.245,0.046-0.245,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.123,0.26-0.199,0.689-0.229,0.842l-0.016,0.046l0,0l0,0 l0,0l0,0l0,0l0,0l0,0c-0.107-0.245-0.245-0.735-0.245-0.735l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.275,0.153-0.918,0.75-0.918,0.75l0,0 l0,0l0,0l0,0l0,0l0,0l0,0c0.352-0.705,0.719-1.026,0.719-1.026l0,0l0,0l0,0l0,0l0,0l0,0l0,0 c-0.122-0.122-0.444-0.184-0.688-0.199l0,0l0,0l0,0l0.015-0.046c0.153-0.046,0.459-0.062,0.658-0.077l0,0l0,0l0,0l0,0l0,0l0,0 l0,0c0.245,0,0.383,0,0.383,0l0,0l0,0l0,0C19.041,14.66,19.362,14.506,19.485,14.491z"/> <path fill="url(#SVGID_6_)" d="M20.158,17.537c-0.107,0.153-0.214,0.275-0.337,0.413l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.184,0.046-0.398,0.031-0.566,0.031 l-0.016,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0c0.123,0.061,0.245,0.106,0.383,0.138l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.107,0.092-0.245,0.168-0.352,0.245l-0.015,0.046l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 c0.214-0.046,0.505-0.139,0.719-0.276l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.107,0,0.214,0,0.291-0.015l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0.016-0.046c-0.016-0.046-0.062-0.077-0.077-0.153l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 c0.199-0.153,0.337-0.291,0.505-0.459l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0.03-0.046c-0.168,0.106-0.367,0.275-0.551,0.367l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 C20.174,17.721,20.174,17.645,20.158,17.537z"/> </g> <g> <path fill="#FFFFFF" d="M22.01,14.185c-0.428,0.245-0.566,0.26-1.025,0.551c0.275-0.291,0.367-0.413,0.536-0.673 c-0.429,0.015-1.056,0.077-1.5,0.168l0,0l0,0l0,0c0.383-0.214,1.163-0.444,1.562-0.49c-0.092-0.123-0.857-0.536-1.041-0.628l0,0 l0,0l0,0c0.597,0.046,1.347,0.275,1.699,0.49c0.138-0.046,0.291-0.046,0.551-0.076l0,0l0,0l0,0 c-0.061,0.107-0.077,0.184-0.321,0.352l0,0l0,0l0,0c0.077,0.184-0.092,1.24-0.245,1.515l0,0l0,0l0,0 C22.209,14.966,22.179,14.415,22.01,14.185z"/> <path fill="#FFFFFF" d="M18.873,17.936c-0.245-0.092-0.429-0.199-0.612-0.383l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.061-0.169,0.123-0.291,0.229-0.444l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 c-0.199,0.03-0.352,0.046-0.521,0.092l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.138-0.245-0.199-0.49-0.275-0.811l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0c-0.031,0.352-0.046,0.597,0,0.873l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.153,0.046-0.275,0.076-0.398,0.138l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.184,0.107,0.336,0.199,0.536,0.291l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 c0.107,0.229,0.229,0.397,0.413,0.581l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.046-0.152-0.061-0.275-0.03-0.443l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0C18.413,17.89,18.612,17.92,18.873,17.936z"/> <path fill="#FFFFFF" d="M19.515,14.445L19.515,14.445L19.515,14.445L19.515,14.445L19.515,14.445 c-0.076,0.107-0.168,0.291-0.184,0.367l0,0l0,0l0,0c0.627,0.092,1.133,0.429,1.133,0.429l0,0l0,0l0,0l0,0l0,0l0,0l0,0 c-0.551-0.107-0.842-0.092-1.056-0.077l0,0l0,0l0,0c-0.199,0.015-0.245,0.046-0.245,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0 c-0.153,0.321-0.245,0.888-0.245,0.888l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.092-0.245-0.245-0.734-0.245-0.734l0,0l0,0l0,0l0,0l0,0 l0,0l0,0c-0.275,0.153-0.918,0.75-0.918,0.75l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.352-0.705,0.72-1.026,0.72-1.026l0,0l0,0l0,0l0,0 l0,0l0,0l0,0c-0.123-0.122-0.444-0.184-0.689-0.199l0,0l0,0l0,0c0.123-0.046,0.444-0.107,0.689-0.123l0,0l0,0l0,0l0,0l0,0l0,0 l0,0c0.245,0,0.382,0,0.382,0l0,0l0,0l0,0C19.071,14.613,19.393,14.46,19.515,14.445z"/> <path fill="#FFFFFF" d="M20.189,17.491c-0.107,0.153-0.214,0.275-0.337,0.413l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.214,0.062-0.383,0.077-0.597,0.077l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 c0.122,0.061,0.245,0.106,0.382,0.138l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.138,0.122-0.245,0.198-0.382,0.291l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.214-0.047,0.505-0.139,0.719-0.276l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 c0.107,0,0.214,0,0.291-0.015l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.015-0.062-0.03-0.107-0.046-0.199l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.199-0.153,0.352-0.291,0.505-0.459l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 c-0.184,0.122-0.337,0.214-0.536,0.306l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0 l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0C20.189,17.675,20.189,17.599,20.189,17.491z"/> </g> </g> </g> <path d="M25.278,12.936c0.022,0.253,0.033,0.891,0.033,1.122c0,0.209,0,0.935-0.033,1.243v0.022H26.4c0.55,0,1.133-0.176,1.133-0.66 c0-0.308-0.22-0.539-0.638-0.66c0.308-0.077,0.517-0.297,0.517-0.539c0-0.396-0.462-0.55-0.891-0.561h-1.243V12.936z M26.147,13.189 c0.473,0,0.649,0.099,0.649,0.352c0,0.066-0.022,0.132-0.066,0.176c-0.088,0.11-0.264,0.165-0.495,0.154h-0.011l-0.132,0.341h0.132 c0.264-0.011,0.484,0.077,0.594,0.22c0.055,0.066,0.077,0.143,0.077,0.22c0,0.264-0.231,0.407-0.693,0.407c-0.077,0-0.209,0-0.286,0 c-0.022-0.352-0.022-0.836-0.022-0.979c0-0.165,0.011-0.55,0.022-0.869C25.982,13.189,26.07,13.189,26.147,13.189z"/> <path d="M30.129,12.914h-0.55l0.022,0.605c0.011,0.308,0.022,0.616,0.044,0.913l0,0l0,0c-0.033-0.088-0.066-0.143-0.231-0.385 c0-0.011-0.572-0.88-0.77-1.133v-0.011h-0.638v0.022c0.022,0.253,0.033,0.891,0.033,1.122c0,0.209,0,0.935-0.033,1.243v0.022h0.561 V15.29c-0.033-0.594-0.033-1.188-0.033-1.76l0,0c0.022,0.066,0.044,0.132,0.132,0.264c0.011,0.011,0.979,1.43,1.034,1.518 l0.011,0.011h0.451v-0.022c-0.033-0.308-0.033-1.034-0.033-1.243c0-0.231,0.011-0.869,0.033-1.122v-0.022H30.129z"/> <path d="M30.789,12.936c0.022,0.253,0.033,0.891,0.033,1.122c0,0.209,0,0.935-0.033,1.243v0.022h0.671v-0.022 c-0.022-0.22-0.033-0.649-0.033-0.979c0.033,0,0.121,0.011,0.121,0.011h0.099c0.891,0,1.32-0.242,1.32-0.726 c0-0.561-0.605-0.693-1.111-0.704H30.8L30.789,12.936z M31.614,13.211c0.319,0,0.539,0.055,0.638,0.187 c0.044,0.066,0.077,0.132,0.077,0.22c0,0.352-0.396,0.429-0.726,0.429h-0.132c0,0-0.033,0-0.055-0.011c0-0.077,0-0.187,0-0.308 c0-0.154,0-0.33,0.011-0.495C31.46,13.211,31.537,13.211,31.614,13.211z"/> <path d="M34.243,12.936c0.022,0.253,0.032,0.891,0.032,1.122c0,0.209,0,0.935-0.032,1.243v0.022h0.671v-0.022 c-0.021-0.22-0.033-0.649-0.033-0.979c0.033,0,0.121,0.011,0.121,0.011h0.1c0.891,0,1.319-0.242,1.319-0.726 c0-0.561-0.604-0.693-1.11-0.704h-1.057L34.243,12.936z M35.068,13.211c0.318,0,0.539,0.055,0.648,0.187 c0.045,0.066,0.077,0.132,0.077,0.22c0,0.352-0.396,0.429-0.726,0.429h-0.133c0,0-0.033,0-0.055-0.011c0-0.077,0-0.187,0-0.308 c0-0.154,0-0.33,0.012-0.495C34.914,13.211,34.991,13.211,35.068,13.211z"/> <path d="M37.313,12.914L37.313,12.914l-0.012,0.011c-0.121,0.341-0.935,2.101-1.056,2.376l-0.011,0.033h0.582v-0.011 c0.056-0.165,0.111-0.352,0.188-0.55c0.021,0,0.473-0.011,0.473-0.011h0.396c0,0,0.066,0,0.088,0 c0.109,0.264,0.188,0.462,0.221,0.561v0.011h0.67l-1.078-2.42h-0.01H37.313z M37.477,13.629c0.056,0.11,0.188,0.44,0.353,0.825 c-0.022,0-0.056,0-0.056,0h-0.297c0,0-0.308,0-0.352-0.011C37.246,14.146,37.367,13.86,37.477,13.629z"/> <path d="M39.105,12.936c0.021,0.253,0.033,0.891,0.033,1.122c0,0.209,0,0.935-0.033,1.243v0.022h0.67v-0.022 c-0.032-0.308-0.032-1.034-0.032-1.243c0-0.165,0.011-0.55,0.022-0.847C39.82,13.2,39.896,13.2,39.952,13.2 c0.319-0.011,0.539,0.055,0.638,0.187c0.044,0.055,0.077,0.132,0.077,0.22c0,0.275-0.265,0.418-0.506,0.429 c-0.077,0-0.144-0.011-0.144-0.011l-0.043-0.011l0.032,0.044c0.231,0.352,0.595,0.957,0.748,1.243v0.011h0.726l-0.021-0.033 c-0.021-0.044-0.495-0.737-0.693-1.034c0,0-0.011-0.011-0.011-0.022c0.363-0.11,0.55-0.319,0.55-0.638 c0-0.561-0.604-0.693-1.111-0.704h-1.055L39.105,12.936z"/> <path d="M42.416,12.914h-0.648v0.022c0.021,0.253,0.032,0.891,0.032,1.122c0,0.209,0,0.935-0.032,1.243v0.022h0.67v-0.022 c-0.033-0.308-0.033-1.034-0.033-1.243c0-0.231,0.012-0.869,0.033-1.122v-0.022H42.416z"/> <path d="M43.043,12.936c0.021,0.253,0.033,0.891,0.033,1.122c0,0.209,0,0.935-0.033,1.243v0.022h1.122 c0.55,0,1.133-0.176,1.133-0.66c0-0.308-0.22-0.539-0.638-0.66c0.308-0.077,0.518-0.297,0.518-0.539c0-0.396-0.463-0.55-0.892-0.561 h-1.243V12.936z M43.912,13.189L43.912,13.189c0.473,0,0.648,0.099,0.648,0.352c0,0.066-0.021,0.132-0.065,0.176 c-0.088,0.11-0.265,0.165-0.495,0.154h-0.012l-0.131,0.341h0.131c0.265-0.011,0.484,0.077,0.595,0.22 c0.056,0.066,0.077,0.143,0.077,0.22c0,0.264-0.23,0.407-0.693,0.407c-0.076,0-0.209,0-0.285,0 c-0.012-0.352-0.022-0.836-0.022-0.979c0-0.165,0.011-0.55,0.022-0.869C43.747,13.189,43.835,13.189,43.912,13.189z"/> <path d="M46.959,12.914h-0.451v0.011c-0.132,0.363-0.99,2.222-1.056,2.376l-0.011,0.033h0.582v-0.011 c0.056-0.165,0.11-0.352,0.188-0.55c0.021,0,0.473-0.011,0.473-0.011l0.396,0.011c0,0,0.066,0,0.088,0 c0.1,0.264,0.176,0.462,0.221,0.561v0.011h0.67L46.959,12.914L46.959,12.914z M46.684,13.629c0.055,0.11,0.188,0.44,0.353,0.814 c-0.022,0-0.056,0-0.056,0h-0.297c0,0-0.308-0.011-0.352-0.011C46.453,14.135,46.574,13.86,46.684,13.629z"/> <path d="M48.234,13.541c0,0.429,0.43,0.594,0.804,0.748c0.297,0.121,0.594,0.242,0.594,0.44c0,0.066-0.011,0.11-0.044,0.154 c-0.066,0.088-0.209,0.121-0.439,0.11c-0.221-0.011-0.474-0.088-0.76-0.209l-0.121-0.055v0.099v0.44l0.078,0.022l0.043,0.011 c0.143,0.033,0.407,0.099,0.682,0.099c0.716,0,1.134-0.286,1.134-0.748c0-0.44-0.44-0.616-0.825-0.77 c-0.286-0.11-0.583-0.231-0.583-0.418c0-0.055,0-0.22,0.363-0.22c0.274,0,0.538,0.11,0.682,0.176l0.144,0.055v-0.088v-0.44 l-0.133-0.022c-0.131-0.022-0.363-0.066-0.604-0.066C48.643,12.826,48.234,13.112,48.234,13.541z"/> <path d="M26.323,16.379c0.506,0,1.1,0.143,1.1,0.693c0,0.308-0.176,0.517-0.539,0.627c0.055,0.099,0.627,0.979,0.726,1.066h-0.715 c-0.154-0.297-0.517-0.902-0.77-1.287c0.044,0.012,0.11,0.012,0.187,0.012c0.209,0,0.506-0.154,0.506-0.43 c0-0.34-0.418-0.407-0.627-0.407c-0.11,0-0.209,0.011-0.264,0.011c-0.011,0.297-0.022,0.671-0.022,0.836 c0,0.209,0,0.913,0.033,1.254h-0.66c0.033-0.33,0.044-0.759,0.044-1.254c0-0.418,0-0.913-0.033-1.133h1.034V16.379z"/> <path d="M29.766,16.379v0.352c-0.33-0.033-0.66-0.033-1.001-0.033c-0.088,0-0.165,0-0.286,0.011 c-0.011,0.22-0.011,0.495-0.011,0.682l0.869-0.021v0.363l-0.88-0.022c0,0.209,0.011,0.506,0.022,0.759 c0.451-0.011,0.902-0.011,1.342-0.033v0.342H27.83c0.033-0.33,0.033-1.045,0.033-1.254c0-0.231-0.011-0.87-0.033-1.145H29.766z"/> <path d="M31.548,16.379c0.088,0.242,0.88,1.991,1.067,2.387h-0.66c-0.033-0.109-0.121-0.308-0.22-0.561 c-0.132,0-0.275-0.012-0.473-0.012c-0.176,0-0.319,0-0.473,0.012c-0.077,0.197-0.132,0.385-0.187,0.561H30.03 c0.132-0.297,0.935-2.035,1.067-2.387H31.548z M31.603,17.887c-0.154-0.375-0.297-0.693-0.341-0.814 c-0.11,0.23-0.231,0.506-0.352,0.814c0.099,0,0.242,0.01,0.352,0.01C31.372,17.896,31.482,17.896,31.603,17.887z"/> <path d="M34.684,18.766h-1.871c0.033-0.33,0.033-1.045,0.033-1.254c0-0.23-0.011-0.869-0.033-1.144h0.66 c-0.022,0.275-0.033,0.901-0.033,1.144c0,0.154,0,0.605,0.011,0.946h0.352c0.363,0,0.627-0.022,0.881-0.044V18.766z"/> <path d="M37.73,16.379v0.352c-0.33-0.033-0.66-0.033-1.002-0.033c-0.088,0-0.164,0-0.285,0.011c-0.012,0.22-0.012,0.495-0.012,0.682 l0.869-0.021v0.363l-0.88-0.022c0,0.209,0.011,0.506,0.022,0.759c0.451-0.011,0.902-0.011,1.342-0.033v0.342h-1.991 c0.033-0.33,0.033-1.045,0.033-1.254c0-0.231-0.011-0.87-0.033-1.145H37.73z"/> <path d="M39.139,16.335c0.297,0,0.561,0.044,0.736,0.088v0.528c-0.209-0.121-0.43-0.22-0.814-0.22c-0.34,0-0.363,0.121-0.363,0.22 c0,0.429,1.387,0.374,1.387,1.133c0,0.473-0.418,0.748-1.122,0.748c-0.319,0-0.604-0.055-0.792-0.121v-0.518 c0.43,0.199,0.693,0.275,0.936,0.275c0.274,0,0.406-0.076,0.406-0.253c0-0.473-1.386-0.396-1.386-1.198 C38.137,16.566,38.533,16.335,39.139,16.335z"/> <path d="M42.383,16.379v0.352c-0.318-0.033-0.418-0.044-0.781-0.044c-0.011,0.286-0.011,0.67-0.011,0.836 c0,0.209,0,0.924,0.033,1.254h-0.671c0.033-0.33,0.044-1.045,0.044-1.254c0-0.166-0.011-0.55-0.022-0.836 c-0.363,0.011-0.461,0.011-0.781,0.044v-0.352H42.383z"/> <path d="M43.67,16.379c0.088,0.242,0.88,1.991,1.066,2.387h-0.659c-0.033-0.109-0.121-0.308-0.22-0.561 c-0.133,0-0.275-0.012-0.474-0.012c-0.176,0-0.319,0-0.473,0.012c-0.077,0.197-0.132,0.385-0.187,0.561h-0.572 c0.132-0.297,0.935-2.035,1.066-2.387H43.67z M43.725,17.887c-0.154-0.375-0.297-0.693-0.341-0.814 c-0.11,0.23-0.231,0.506-0.353,0.814c0.1,0,0.242,0.01,0.353,0.01S43.615,17.896,43.725,17.887z"/> <path d="M46.673,16.379v0.352c-0.319-0.033-0.418-0.044-0.78-0.044c-0.012,0.286-0.012,0.67-0.012,0.836 c0,0.209,0,0.924,0.033,1.254h-0.671c0.032-0.33,0.044-1.045,0.044-1.254c0-0.166-0.012-0.55-0.021-0.836 c-0.363,0.011-0.463,0.011-0.781,0.044v-0.352H46.673z"/> <path d="M48.961,16.379v0.352c-0.33-0.033-0.66-0.033-1.001-0.033c-0.088,0-0.165,0-0.286,0.011 c-0.011,0.22-0.011,0.495-0.011,0.682l0.868-0.021v0.363l-0.879-0.022c0,0.209,0.011,0.506,0.021,0.759 c0.451-0.011,0.902-0.011,1.342-0.033v0.342h-1.99c0.033-0.33,0.033-1.045,0.033-1.254c0-0.231-0.012-0.87-0.033-1.145H48.961z"/> </symbol> </svg> Edit: Clearified my question and updated it to my knowledge.