search

vault-development / react-native-svg-uri

Render SVG images in React Native from an URL or static file
850 stars 334 forks source link

Sketch SVGs are not rendered at all #186

Open alifarooq0 opened 5 years ago

alifarooq0 commented 5 years ago

Hi, I've got an example that was generated through Sketch and the react-native-svg-uri component is not able to render it.

// SVG xmlData that DOES work
<SvgUri
    width='20'
    height='20'
    svgXmlData={`
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" stroke="#000">
        <path d="M8,80s-5,8,5,9l78,0s9,0,5-9l-40-71s-4-6-8,0z" stroke-width="2" fill="#fff" fill-rule="evenodd"/>
        <path d="M52,10 L10,85 L93,85z" stroke-width="2" stroke-linejoin="round" fill="#fc0" fill-rule="evenodd"/>
        <path d="M52,32l0,26" stroke-width="9" stroke-linecap="round" fill-rule="evenodd"/>
        <circle r="6" cx="52" cy="73"/>
    </svg>
    `}
/>

Preview: image

// SVG xmlData that DOES NOT work
<SvgUri
    width='20'
    height='20'
    svgXmlData={`
    <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Page-1" stroke="none" stroke-width="1"   fill-rule="evenodd">
            <g id="Dribbble-Light-Preview" transform="translate(-380.000000, -7439.000000)" >
                <g id="icons" transform="translate(56.000000, 160.000000)">
                    <path d="M338.858,7294.401 C337.26,7294.401 336.74,7293.157 337.151,7291.76 L337.744,7289.64 C338.022,7288.735 337.715,7287.897 336.756,7287.897 C335.911,7287.897 335.354,7288.361 335.067,7289.529 L333.917,7294 L331.905,7294 L332.266,7292.692 C331.675,7293.664 330.853,7294.337 329.84,7294.337 C328.28,7294.337 327.794,7293.242 328.151,7291.723 L329.067,7288 L327.648,7288 L328.079,7286 L331.493,7286 L330.145,7291.548 C329.986,7292.151 329.855,7292.889 330.451,7293.023 C330.611,7293.059 331.888,7293.061 332.583,7291.516 L333.468,7288 L332.031,7288 L332.462,7286 L335.534,7286 L335.139,7288.008 C335.678,7287.002 336.756,7286.147 337.816,7286.147 C339.542,7286.147 340.266,7287.923 339.685,7289.885 L339.11,7291.963 C338.754,7293.39 339.788,7293.58 340.439,7291.777 L341.23,7292.083 C340.762,7293.718 339.918,7294.401 338.858,7294.401 M330.684,7282.885 C331.349,7282.885 331.906,7283.406 331.906,7284.088 C331.906,7284.771 331.349,7285.292 330.684,7285.292 C330.019,7285.292 329.463,7284.771 329.463,7284.088 C329.463,7283.406 330.019,7282.885 330.684,7282.885 M342.187,7279 L325.813,7279 C324.812,7279 324,7279.811 324,7280.813 L324,7297.187 C324,7298.188 324.812,7299 325.813,7299 L342.187,7299 C343.188,7299 344,7298.188 344,7297.187 L344,7280.813 C344,7279.811 343.188,7279 342.187,7279" id="invision-[#166]"></path>
                </g>
            </g>
        </g>
    </svg>
    `}
/>

Preview: image

Ideally I want a file that I fetch from an API and display it through the react-native-svg-uri component. Something like 

<SvgUri
    width='20'
    height='20'
    svgXmlData={`
    <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 3.8.1 (29687) - http://www.bohemiancoding.com/sketch -->
    <title>invision [#166]</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1"   fill-rule="evenodd">
        <g id="Dribbble-Light-Preview" transform="translate(-380.000000, -7439.000000)" >
            <g id="icons" transform="translate(56.000000, 160.000000)">
                <path d="M338.858,7294.401 C337.26,7294.401 336.74,7293.157 337.151,7291.76 L337.744,7289.64 C338.022,7288.735 337.715,7287.897 336.756,7287.897 C335.911,7287.897 335.354,7288.361 335.067,7289.529 L333.917,7294 L331.905,7294 L332.266,7292.692 C331.675,7293.664 330.853,7294.337 329.84,7294.337 C328.28,7294.337 327.794,7293.242 328.151,7291.723 L329.067,7288 L327.648,7288 L328.079,7286 L331.493,7286 L330.145,7291.548 C329.986,7292.151 329.855,7292.889 330.451,7293.023 C330.611,7293.059 331.888,7293.061 332.583,7291.516 L333.468,7288 L332.031,7288 L332.462,7286 L335.534,7286 L335.139,7288.008 C335.678,7287.002 336.756,7286.147 337.816,7286.147 C339.542,7286.147 340.266,7287.923 339.685,7289.885 L339.11,7291.963 C338.754,7293.39 339.788,7293.58 340.439,7291.777 L341.23,7292.083 C340.762,7293.718 339.918,7294.401 338.858,7294.401 M330.684,7282.885 C331.349,7282.885 331.906,7283.406 331.906,7284.088 C331.906,7284.771 331.349,7285.292 330.684,7285.292 C330.019,7285.292 329.463,7284.771 329.463,7284.088 C329.463,7283.406 330.019,7282.885 330.684,7282.885 M342.187,7279 L325.813,7279 C324.812,7279 324,7279.811 324,7280.813 L324,7297.187 C324,7298.188 324.812,7299 325.813,7299 L342.187,7299 C343.188,7299 344,7298.188 344,7297.187 L344,7280.813 C344,7279.811 343.188,7279 342.187,7279" id="invision-[#166]"></path>
            </g>
        </g>
    </g>
</svg>
    `}
/>

It would be great if someone from the team can look into this.