Closed cuevash closed 6 years ago
Having the next svg:
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1108.4 202.5" style="enable-background:new 0 0 1108.4 202.5;" xml:space="preserve"> <style type="text/css"> .st0{fill:#65B2E7;} </style> <g> <image style="overflow:visible;opacity:0.53;" width="4393" height="657" xlink:href="7CD9C98A78EF0C6E.png" transform="matrix(0.24 0 0 0.24 29.995 23.8313)"> </image> <g> <polygon class="st0" points="1066.2,37.5 1066.2,70 1066.2,102.5 1066.2,135 42.2,165 42.2,132.5 42.2,100 42.2,67.5 "/> </g> </g> </svg>
Gets converted to more o less:
<svg width="100%" x="0" y="0" height="165px" viewBox="0 0 1062 165" version="1.1"> <title>Shape</title> <desc>Created with Sketch.</desc> <defs> <polygon id="path-1" points="1024 0 1024 32.5 1024 65 1024 97.5 0 127.5 0 95 0 62.5 0 30"></polygon> <filter x="-2.5%" y="-18.4%" width="105.0%" height="139.9%" filterUnits="objectBoundingBox" id="filter-2"> <feGaussianBlur stdDeviation="3.98716518" in="SourceGraphic"></feGaussianBlur> </filter> <filter x="-3.2%" y="-24.3%" width="106.4%" height="151.7%" filterUnits="objectBoundingBox" id="filter-3"> <feMorphology radius="2" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology> <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> </filter> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="separacion_azul" transform="translate(20.000000, 17.000000)" fill-rule="nonzero"> <g id="Shape" filter="url(#filter-2)"> <use fill="black" fill-opacity="1" filter="url(#filter-3)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-1"></use> <use stroke="#979797" stroke-width="1" fill="#65B2E7" fill-rule="evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-1"></use> </g> </g> </g> </svg>
There is this line in the code where you can see the translate.. When it should not be there as it is not in the original svg..
<g id="separacion_azul" transform="translate(20.000000, 17.000000)"
You have one svg created with Adobe Illustrator and another generated with Sketch...
...this doesn't even look svg-react-loader realted
Having the next svg:
Gets converted to more o less:
There is this line in the code where you can see the translate.. When it should not be there as it is not in the original svg..
<g id="separacion_azul" transform="translate(20.000000, 17.000000)"