Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support Sketch NS #43

Closed
iansoper opened this issue Jul 2, 2014 · 3 comments
Closed

Support Sketch NS #43

iansoper opened this issue Jul 2, 2014 · 3 comments

Comments

@iansoper
Copy link

iansoper commented Jul 2, 2014

This doesn't work when your items are exported from Sketch. The issue appears the Namespace that sketch uses.

 Here is an example SVG exported from sketch:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <title>chart-bar-graph</title>
    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
    <defs></defs>
    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="chart-bar-graph" sketch:type="MSArtboardGroup" fill="#000000">
            <path d="M384,320 L512,320 L512,512 L384,512 L384,320 L384,320 Z M192,0 L320,0 L320,512 L192,512 L192,0 L192,0 Z M128,160 L128,512 L0,512 L0,160 L128,160 L128,160 Z" id="Shape" sketch:type="MSShapeGroup"></path>
        </g>
    </g>
</svg>
@FWeinb
Copy link
Owner

FWeinb commented Jul 3, 2014

What specially isn't working with this SVG?

@iansoper
Copy link
Author

iansoper commented Jul 4, 2014

Originally, i got an error when trying to view the svg-def.svg file in chrome:

error on line 1 at column 232: Namespace prefix sketch for type on g is not defined

Which me think that sketch namespace is not being supported.

The namespace for the Sketch files is defined in the SVG tag:

<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

Here is the source code for the original svg files and the generated svg-defs.svg file:
Icon 1

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch Beta 3.0.4 (8017) - http://www.bohemiancoding.com/sketch -->
    <title>listings</title>
    <desc>Created with Sketch Beta.</desc>
    <defs></defs>
    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="listings" sketch:type="MSArtboardGroup" fill="#000000">
            <rect id="Rectangle-16" sketch:type="MSShapeGroup" x="32" y="32" width="128" height="128" rx="12"></rect>
            <rect id="Rectangle-16" sketch:type="MSShapeGroup" x="32" y="192" width="128" height="128" rx="12"></rect>
            <rect id="Rectangle-16" sketch:type="MSShapeGroup" x="32" y="352" width="128" height="128" rx="12"></rect>
            <path d="M464,64 C472.836556,64 480,56.836556 480,48 C480,39.163444 472.836556,32 464,32 L208.5,32 C199.663444,32 192.5,39.163444 192.5,48 C192.5,56.836556 199.663444,64 208.5,64 L464,64 Z" id="Line" sketch:type="MSShapeGroup"></path>
            <path d="M464,64 C472.836556,64 480,56.836556 480,48 C480,39.163444 472.836556,32 464,32 L208.5,32 C199.663444,32 192.5,39.163444 192.5,48 C192.5,56.836556 199.663444,64 208.5,64 L464,64 Z" id="Line" sketch:type="MSShapeGroup"></path>
            <path d="M419,224 C427.836556,224 435,216.836556 435,208 C435,199.163444 427.836556,192 419,192 L208.5,192 C199.663444,192 192.5,199.163444 192.5,208 C192.5,216.836556 199.663444,224 208.5,224 L419,224 Z" id="Line" sketch:type="MSShapeGroup"></path>
            <path d="M433.25,384 C442.086556,384 449.25,376.836556 449.25,368 C449.25,359.163444 442.086556,352 433.25,352 L208.5,352 C199.663444,352 192.5,359.163444 192.5,368 C192.5,376.836556 199.663444,384 208.5,384 L433.25,384 Z" id="Line" sketch:type="MSShapeGroup"></path>
            <path d="M369.012466,128 C377.849022,128 385.012466,120.836556 385.012466,112 C385.012466,103.163444 377.849022,96 369.012466,96 L208.5,96 C199.663444,96 192.5,103.163444 192.5,112 C192.5,120.836556 199.663444,128 208.5,128 L369.012466,128 Z" id="Line" sketch:type="MSShapeGroup"></path>
            <path d="M338.106339,288 C346.942895,288 354.106339,280.836556 354.106339,272 C354.106339,263.163444 346.942895,256 338.106339,256 L208.5,256 C199.663444,256 192.5,263.163444 192.5,272 C192.5,280.836556 199.663444,288 208.5,288 L338.106339,288 Z" id="Line" sketch:type="MSShapeGroup"></path>
            <path d="M400.851562,448 C409.688118,448 416.851562,440.836556 416.851562,432 C416.851562,423.163444 409.688118,416 400.851562,416 L208.5,416 C199.663444,416 192.5,423.163444 192.5,432 C192.5,440.836556 199.663444,448 208.5,448 L400.851562,448 Z" id="Line" sketch:type="MSShapeGroup"></path>
        </g>
    </g>
</svg>

icon 2

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch Beta 3.0.4 (7976) - http://www.bohemiancoding.com/sketch -->
    <title>question</title>
    <desc>Created with Sketch Beta.</desc>
    <defs></defs>
    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="question" sketch:type="MSArtboardGroup" fill="#000000">
            <path d="M52.9748203,378.481202 L32.5697714,511.818852 L164.695264,467.74539 C192.196448,478.567349 222.153663,484.511475 253.5,484.511475 C387.429052,484.511475 496,376.002914 496,242.15082 C496,108.298726 387.429052,-0.209836066 253.5,-0.209836066 C119.570948,-0.209836066 11,108.298726 11,242.15082 C11,292.702401 26.4857693,339.639166 52.9748203,378.481202 L52.9748203,378.481202 Z M351.374628,162.99835 C351.374628,118.281132 313.367194,87.0271624 251.304423,87.0271624 C220.513591,87.0271624 171.921808,99.5287503 158.931926,125.012756 C157.007499,128.859399 156.045285,133.186872 156.045285,137.995175 C156.045285,155.305066 169.035168,165.883332 184.430584,165.883332 C191.647185,165.883332 198.863787,163.960011 204.637068,160.113369 C216.18363,152.420084 229.654619,147.611781 244.087822,147.611781 C270.548693,147.611781 281.614149,160.113369 281.614149,175.019108 C281.614149,208.196399 211.372562,214.928023 211.372562,272.146829 C211.372562,301.477478 227.249085,316.864048 245.531142,316.864048 C263.332092,316.864048 272.47312,303.400799 272.47312,291.380041 C272.47312,286.571738 271.0298,284.648417 271.0298,278.397623 C271.0298,238.488708 351.374628,233.199575 351.374628,162.99835 Z M289.311857,378.891157 C289.311857,357.734623 271.510907,339.943902 250.342209,339.943902 C229.173512,339.943902 211.372562,357.734623 211.372562,378.891157 C211.372562,400.04769 229.173512,417.838411 250.342209,417.838411 C271.510907,417.838411 289.311857,400.04769 289.311857,378.891157 Z" id="?" sketch:type="MSShapeGroup"></path>
        </g>
    </g>
</svg>

icon 3

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch Beta 3.0.4 (7942) - http://www.bohemiancoding.com/sketch -->
    <title>rating-star</title>
    <desc>Created with Sketch Beta.</desc>
    <defs></defs>
    <g id="images" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="rating-star" sketch:type="MSArtboardGroup" stroke-width="5" stroke="#979797" fill="#D8D8D8">
            <polygon sketch:type="MSShapeGroup" points="32.5 47.8426966 16.7099507 56.0507435 19.7255818 38.6658212 6.95116358 26.3537508 24.6049754 23.8173249 32.5 8 40.3950246 23.8173249 58.0488364 26.3537508 45.2744182 38.6658212 48.2900493 56.0507435 "></polygon>
        </g>
    </g>
</svg>

icon 4

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch Beta 3.0.4 (8039) - http://www.bohemiancoding.com/sketch -->
    <title>sales</title>
    <desc>Created with Sketch Beta.</desc>
    <defs></defs>
    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="sales" sketch:type="MSArtboardGroup" fill="#000000">
            <path d="M256,512 C397.384896,512 512,397.384896 512,256 C512,114.615104 397.384896,0 256,0 C114.615104,0 0,114.615104 0,256 C0,397.384896 114.615104,512 256,512 Z M372.559183,314.701975 C372.559183,255.462755 322.467195,238.039455 277.602197,226.714309 L277.602197,165.297176 C291.105255,168.346254 305.479478,178.364652 318.11137,181.849312 C321.160448,182.720477 323.773943,183.156059 326.387438,183.156059 C341.632826,183.156059 357.313796,171.395332 357.313796,154.843196 C357.313796,150.051789 355.571466,145.260381 352.957971,141.340139 C340.326078,122.610091 303.301565,112.591694 277.602197,109.542616 L277.602197,85.5855783 C277.602197,74.6960157 268.454965,65.5487831 257.565402,65.5487831 C245.369092,65.5487831 236.22186,74.6960157 236.22186,85.5855783 L236.22186,108.671451 C177.418222,114.769606 142.571621,152.229701 142.571621,196.223534 C142.571621,255.462755 191.356862,272.01489 236.22186,283.340035 L236.22186,352.162071 C217.056229,348.677411 200.504094,341.272508 186.565454,331.689693 C181.338464,328.205033 175.675892,326.462703 169.577737,326.462703 C154.332349,326.462703 140.829291,339.094595 140.829291,355.211148 C140.829291,360.438138 142.571621,364.793963 145.185116,369.149788 C158.688174,390.493331 201.375259,403.996389 236.22186,407.045466 L236.22186,428.824591 C236.22186,439.714154 245.369092,448.861386 257.565402,448.861386 C268.454965,448.861386 277.602197,439.714154 277.602197,428.824591 L277.602197,406.609884 C341.197243,400.076146 372.559183,363.051633 372.559183,314.701975 Z M236.22186,215.824747 C217.927394,210.597757 205.731084,203.628437 205.731084,190.996544 C205.731084,176.186739 216.620647,165.297176 236.22186,162.683681 L236.22186,215.824747 Z M309.835303,321.671295 C309.835303,335.174353 298.94574,347.806246 277.602197,352.162071 L277.602197,293.794015 C296.332245,299.89217 309.835303,307.297073 309.835303,321.671295 Z" id="$" sketch:type="MSShapeGroup"></path>
        </g>
    </g>
</svg>

generated svg-defs.svg:

<svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 512 512" id="shape-listings"><title>listings</title><desc>Created with Sketch Beta.</desc> <!-- Generator: Sketch Beta 3.0.4 (8017) - http://www.bohemiancoding.com/sketch -->    <g id="svgstoreae56243620b9bad594c1fc865429821cIcons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="svgstoreae56243620b9bad594c1fc865429821clistings" sketch:type="MSArtboardGroup" fill="#000000"> <rect id="svgstoreae56243620b9bad594c1fc865429821cRectangle-16" sketch:type="MSShapeGroup" x="32" y="32" width="128" height="128" rx="12"/> <rect id="svgstoreae56243620b9bad594c1fc865429821cRectangle-16" sketch:type="MSShapeGroup" x="32" y="192" width="128" height="128" rx="12"/> <rect id="svgstoreae56243620b9bad594c1fc865429821cRectangle-16" sketch:type="MSShapeGroup" x="32" y="352" width="128" height="128" rx="12"/> <path d="M464,64 C472.836556,64 480,56.836556 480,48 C480,39.163444 472.836556,32 464,32 L208.5,32 C199.663444,32 192.5,39.163444 192.5,48 C192.5,56.836556 199.663444,64 208.5,64 L464,64 Z" id="svgstoreae56243620b9bad594c1fc865429821cLine" sketch:type="MSShapeGroup"/> <path d="M464,64 C472.836556,64 480,56.836556 480,48 C480,39.163444 472.836556,32 464,32 L208.5,32 C199.663444,32 192.5,39.163444 192.5,48 C192.5,56.836556 199.663444,64 208.5,64 L464,64 Z" id="svgstoreae56243620b9bad594c1fc865429821cLine" sketch:type="MSShapeGroup"/> <path d="M419,224 C427.836556,224 435,216.836556 435,208 C435,199.163444 427.836556,192 419,192 L208.5,192 C199.663444,192 192.5,199.163444 192.5,208 C192.5,216.836556 199.663444,224 208.5,224 L419,224 Z" id="svgstoreae56243620b9bad594c1fc865429821cLine" sketch:type="MSShapeGroup"/> <path d="M433.25,384 C442.086556,384 449.25,376.836556 449.25,368 C449.25,359.163444 442.086556,352 433.25,352 L208.5,352 C199.663444,352 192.5,359.163444 192.5,368 C192.5,376.836556 199.663444,384 208.5,384 L433.25,384 Z" id="svgstoreae56243620b9bad594c1fc865429821cLine" sketch:type="MSShapeGroup"/> <path d="M369.012466,128 C377.849022,128 385.012466,120.836556 385.012466,112 C385.012466,103.163444 377.849022,96 369.012466,96 L208.5,96 C199.663444,96 192.5,103.163444 192.5,112 C192.5,120.836556 199.663444,128 208.5,128 L369.012466,128 Z" id="svgstoreae56243620b9bad594c1fc865429821cLine" sketch:type="MSShapeGroup"/> <path d="M338.106339,288 C346.942895,288 354.106339,280.836556 354.106339,272 C354.106339,263.163444 346.942895,256 338.106339,256 L208.5,256 C199.663444,256 192.5,263.163444 192.5,272 C192.5,280.836556 199.663444,288 208.5,288 L338.106339,288 Z" id="svgstoreae56243620b9bad594c1fc865429821cLine" sketch:type="MSShapeGroup"/> <path d="M400.851562,448 C409.688118,448 416.851562,440.836556 416.851562,432 C416.851562,423.163444 409.688118,416 400.851562,416 L208.5,416 C199.663444,416 192.5,423.163444 192.5,432 C192.5,440.836556 199.663444,448 208.5,448 L400.851562,448 Z" id="svgstoreae56243620b9bad594c1fc865429821cLine" sketch:type="MSShapeGroup"/> </g> </g> </symbol><symbol viewBox="0 0 512 512" id="shape-question"><title>question</title><desc>Created with Sketch Beta.</desc> <!-- Generator: Sketch Beta 3.0.4 (7976) - http://www.bohemiancoding.com/sketch -->    <g id="svgstoree300eda86d7b8cd4e79c7c185eba44bbIcons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="svgstoree300eda86d7b8cd4e79c7c185eba44bbquestion" sketch:type="MSArtboardGroup" fill="#000000"> <path d="M52.9748203,378.481202 L32.5697714,511.818852 L164.695264,467.74539 C192.196448,478.567349 222.153663,484.511475 253.5,484.511475 C387.429052,484.511475 496,376.002914 496,242.15082 C496,108.298726 387.429052,-0.209836066 253.5,-0.209836066 C119.570948,-0.209836066 11,108.298726 11,242.15082 C11,292.702401 26.4857693,339.639166 52.9748203,378.481202 L52.9748203,378.481202 Z M351.374628,162.99835 C351.374628,118.281132 313.367194,87.0271624 251.304423,87.0271624 C220.513591,87.0271624 171.921808,99.5287503 158.931926,125.012756 C157.007499,128.859399 156.045285,133.186872 156.045285,137.995175 C156.045285,155.305066 169.035168,165.883332 184.430584,165.883332 C191.647185,165.883332 198.863787,163.960011 204.637068,160.113369 C216.18363,152.420084 229.654619,147.611781 244.087822,147.611781 C270.548693,147.611781 281.614149,160.113369 281.614149,175.019108 C281.614149,208.196399 211.372562,214.928023 211.372562,272.146829 C211.372562,301.477478 227.249085,316.864048 245.531142,316.864048 C263.332092,316.864048 272.47312,303.400799 272.47312,291.380041 C272.47312,286.571738 271.0298,284.648417 271.0298,278.397623 C271.0298,238.488708 351.374628,233.199575 351.374628,162.99835 Z M289.311857,378.891157 C289.311857,357.734623 271.510907,339.943902 250.342209,339.943902 C229.173512,339.943902 211.372562,357.734623 211.372562,378.891157 C211.372562,400.04769 229.173512,417.838411 250.342209,417.838411 C271.510907,417.838411 289.311857,400.04769 289.311857,378.891157 Z" id="svgstoree300eda86d7b8cd4e79c7c185eba44bb?" sketch:type="MSShapeGroup"/> </g> </g> </symbol><symbol viewBox="0 0 64 64" id="shape-rating-star"><title>rating-star</title><desc>Created with Sketch Beta.</desc> <!-- Generator: Sketch Beta 3.0.4 (7942) - http://www.bohemiancoding.com/sketch -->    <g id="svgstore0eafbbada5f6c4cc9ce57c457d15e6eaimages" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="svgstore0eafbbada5f6c4cc9ce57c457d15e6earating-star" sketch:type="MSArtboardGroup" stroke-width="5" stroke="#979797" fill="#D8D8D8"> <polygon sketch:type="MSShapeGroup" points="32.5 47.8426966 16.7099507 56.0507435 19.7255818 38.6658212 6.95116358 26.3537508 24.6049754 23.8173249 32.5 8 40.3950246 23.8173249 58.0488364 26.3537508 45.2744182 38.6658212 48.2900493 56.0507435 "/> </g> </g> </symbol><symbol viewBox="0 0 512 512" id="shape-sales"><title>sales</title><desc>Created with Sketch Beta.</desc> <!-- Generator: Sketch Beta 3.0.4 (8039) - http://www.bohemiancoding.com/sketch -->    <g id="svgstored64953005e425c8326a842e1254ca39bIcons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="svgstored64953005e425c8326a842e1254ca39bsales" sketch:type="MSArtboardGroup" fill="#000000"> <path d="M256,512 C397.384896,512 512,397.384896 512,256 C512,114.615104 397.384896,0 256,0 C114.615104,0 0,114.615104 0,256 C0,397.384896 114.615104,512 256,512 Z M372.559183,314.701975 C372.559183,255.462755 322.467195,238.039455 277.602197,226.714309 L277.602197,165.297176 C291.105255,168.346254 305.479478,178.364652 318.11137,181.849312 C321.160448,182.720477 323.773943,183.156059 326.387438,183.156059 C341.632826,183.156059 357.313796,171.395332 357.313796,154.843196 C357.313796,150.051789 355.571466,145.260381 352.957971,141.340139 C340.326078,122.610091 303.301565,112.591694 277.602197,109.542616 L277.602197,85.5855783 C277.602197,74.6960157 268.454965,65.5487831 257.565402,65.5487831 C245.369092,65.5487831 236.22186,74.6960157 236.22186,85.5855783 L236.22186,108.671451 C177.418222,114.769606 142.571621,152.229701 142.571621,196.223534 C142.571621,255.462755 191.356862,272.01489 236.22186,283.340035 L236.22186,352.162071 C217.056229,348.677411 200.504094,341.272508 186.565454,331.689693 C181.338464,328.205033 175.675892,326.462703 169.577737,326.462703 C154.332349,326.462703 140.829291,339.094595 140.829291,355.211148 C140.829291,360.438138 142.571621,364.793963 145.185116,369.149788 C158.688174,390.493331 201.375259,403.996389 236.22186,407.045466 L236.22186,428.824591 C236.22186,439.714154 245.369092,448.861386 257.565402,448.861386 C268.454965,448.861386 277.602197,439.714154 277.602197,428.824591 L277.602197,406.609884 C341.197243,400.076146 372.559183,363.051633 372.559183,314.701975 Z M236.22186,215.824747 C217.927394,210.597757 205.731084,203.628437 205.731084,190.996544 C205.731084,176.186739 216.620647,165.297176 236.22186,162.683681 L236.22186,215.824747 Z M309.835303,321.671295 C309.835303,335.174353 298.94574,347.806246 277.602197,352.162071 L277.602197,293.794015 C296.332245,299.89217 309.835303,307.297073 309.835303,321.671295 Z" id="svgstored64953005e425c8326a842e1254ca39b$" sketch:type="MSShapeGroup"/> </g> </g> </symbol></svg>

@FWeinb
Copy link
Owner

FWeinb commented Jul 4, 2014

Have a look at #25. You need to add the namespace used by sketch to the resulting svg.

@FWeinb FWeinb closed this as completed Jul 4, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@iansoper @FWeinb