bring-shrubbery / svg-to-swiftui Goto Github PK

View Code? Open in Web Editor NEW

890.0 9.0 37.0 134.26 MB

Tool to convert SVG to SwiftUI's Shape structure.

Home Page: https://svg-to-swiftui.quassum.com

License: Apache License 2.0

JavaScript 2.44% TypeScript 81.32% CSS 0.71% Swift 13.32% MDX 2.21%

svg swift transpiler swiftui-shape swiftui

svg-to-swiftui's Introduction

SVG to SwiftUI Converter

Tool to convert SVG to SwiftUI's Shape structure. This approach is much more memory efficient than introducing a SVG library for rendering.

Disclaimer (Before you use this tool)

This tool is oriented towards specific implementations where you might otherwise need to convert the icon into SwiftUI Shape manually, for example when you need a custom animatable icon, need to use SFSymbol in your macOS app, etc. For general purpose icons it might be better to use this guide to create an SF Symbol instead.

Quick Links

Usage

Step 1

⭐️ Star this repository! ⭐️

Online

The tool is available online, just follow this link.

Running locally

git clone https://github.com/bring-shrubbery/SVG-to-SwiftUI
cd SVG-to-SwiftUI
yarn
yarn dev

Example usage

To demonstrate this tool I created a thicc plus sign with rounded corners (created it in Sketch, so shapes from Sketch should work fine with this tool). It's saved as content/demo-plus.svg file in this repository. You can see below how it looks like in the browser, and how it looks like after converting into SwiftUI Shape.

In the browser

In SwiftUI View, exported as a Shape

Contributing

Feel free to open an issue for the SVG code that did not work - provide the SVG code of course!
Pull requests are very welcome! Introducing support for more SVG element types would be the best contribution at this point.

Author

Antoni Silvestrovic

License

MIT

svg-to-swiftui's People

Contributors

Stargazers

Watchers

svg-to-swiftui's Issues

Offset of Shape converted

There is a y axis offset while converting, such as:

<svg width="150px" height="167px" viewBox="0 0 150 167" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Wallet/Passes/x/Barcodes/Square-with-Number" transform="translate(-106.000000, -5.000000)" fill="#FFFFFF">
            <path d="M112.409713,5 L249.590287,5 C251.819084,5 252.627299,5.23206403 253.442114,5.66783176 C254.256929,6.10359949 254.896401,6.74307093 255.332168,7.55788574 C255.767936,8.37270056 256,9.18091615 256,11.409713 L256,165.590287 C256,167.819084 255.767936,168.627299 255.332168,169.442114 C254.896401,170.256929 254.256929,170.896401 253.442114,171.332168 C252.627299,171.767936 251.819084,172 249.590287,172 L112.409713,172 C110.180916,172 109.372701,171.767936 108.557886,171.332168 C107.743071,170.896401 107.103599,170.256929 106.667832,169.442114 C106.232064,168.627299 106,167.819084 106,165.590287 L106,11.409713 C106,9.18091615 106.232064,8.37270056 106.667832,7.55788574 C107.103599,6.74307093 107.743071,6.10359949 108.557886,5.66783176 C109.372701,5.23206403 110.180916,5 112.409713,5 Z" id="Background"></path>
        </g>
    </g>
</svg>

Link to sf guide is dead

see title

Convert doesn't work for certain SVG code

Hi, I'm using your great tool to convert some Figma icons to SwiftUI shape. It's worked perfectly for some icons like this one which creates the Twitter icon:

<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="50" height="50" rx="10" fill="#03A9F4"/>
<path d="M41.1891 14.9583C39.971 15.4903 38.6825 15.8437 37.3635 16.0077C38.754 15.1831 39.7934 13.8768 40.2845 12.3366C38.9831 13.1091 37.559 13.6531 36.074 13.9452C35.164 12.972 33.9822 12.2951 32.6824 12.0027C31.3825 11.7103 30.0247 11.8157 28.7856 12.3054C27.5465 12.7951 26.4834 13.6463 25.7346 14.7484C24.9859 15.8504 24.586 17.1523 24.5872 18.4846C24.5825 18.9932 24.6343 19.5007 24.7418 19.9978C22.1002 19.8681 19.5158 19.1825 17.1572 17.986C14.7987 16.7894 12.7191 15.1087 11.0543 13.0537C10.1985 14.5156 9.93344 16.2491 10.3131 17.8999C10.6928 19.5507 11.6886 20.9942 13.097 21.9353C12.0458 21.907 11.0168 21.626 10.097 21.1162V21.1886C10.1 22.7209 10.6304 24.2055 11.599 25.3928C12.5677 26.5801 13.9156 27.3978 15.4161 27.7083C14.8483 27.8575 14.2631 27.9305 13.676 27.9254C13.2532 27.9332 12.8309 27.8958 12.4161 27.8136C12.846 29.1314 13.6736 30.2837 14.7852 31.1119C15.8968 31.9401 17.2376 32.4036 18.6234 32.4386C16.2751 34.2741 13.3802 35.2711 10.3997 35.2708C9.86861 35.2754 9.33783 35.2446 8.81085 35.1787C11.8499 37.1381 15.3923 38.1734 19.0082 38.159C31.2286 38.159 37.9095 28.0373 37.9095 19.2643C37.9095 18.9715 37.9095 18.6886 37.8865 18.4057C39.1876 17.4667 40.3068 16.2985 41.1891 14.9583Z" fill="white"/>
</svg>

Or for this one which creates a Phone icon:

<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="50" height="50" rx="10" fill="url(#paint0_linear)"/>
<path d="M35.8759 28.0578C35.1814 27.3379 34.3437 26.953 33.4559 26.953C32.5753 26.953 31.7305 27.3308 31.0073 28.0507L28.7449 30.2959C28.5587 30.1961 28.3726 30.1035 28.1936 30.0108C27.9359 29.8825 27.6924 29.7613 27.4848 29.633C25.3656 28.293 23.4396 26.5467 21.5924 24.2872C20.6975 23.161 20.0961 22.2131 19.6593 21.2508C20.2464 20.7162 20.7906 20.1603 21.3204 19.6257C21.5208 19.4261 21.7213 19.2194 21.9218 19.0198C23.4253 17.523 23.4253 15.5843 21.9218 14.0875L19.9672 12.1416C19.7453 11.9206 19.5161 11.6925 19.3014 11.4644C18.8718 11.0225 18.4207 10.5664 17.9553 10.1387C17.2609 9.45443 16.4303 9.09091 15.5569 9.09091C14.6834 9.09091 13.8386 9.45443 13.1226 10.1387C13.1154 10.1458 13.1154 10.1458 13.1083 10.1529L10.674 12.5978C9.75758 13.5101 9.23493 14.622 9.12037 15.9121C8.94854 17.9934 9.56427 19.9322 10.0368 21.2009C11.1967 24.3157 12.9293 27.2025 15.5139 30.2959C18.6498 34.0237 22.4229 36.9675 26.733 39.0416C28.3798 39.8186 30.5778 40.738 33.0335 40.8948C33.1839 40.902 33.3414 40.9091 33.4846 40.9091C35.1384 40.9091 36.5274 40.3175 37.6157 39.1414C37.6228 39.1272 37.6371 39.12 37.6443 39.1058C38.0166 38.6567 38.4462 38.2505 38.8972 37.8157C39.2051 37.5234 39.5201 37.2169 39.828 36.8962C40.5368 36.162 40.9091 35.3067 40.9091 34.43C40.9091 33.5462 40.5296 32.698 39.8065 31.9852L35.8759 28.0578Z" fill="white"/>
</svg>

However, this seemingly similar SVG code for the Facebook icon doesn't work at all:

<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="50" height="50" rx="10" fill="#2070FD"/>
<path d="M27.943 50V30.664H34.4615L35.4381 23.0957H27.943V18.2754C27.943 16.0892 28.5499 14.5996 31.6848 14.5996H35.6578V7.84871C34.9666 7.75677 32.595 7.55116 29.8355 7.55116C24.0737 7.55116 20.1305 11.0668 20.1305 17.5258V23.0957H13.6364V30.664H20.1305V50H27.943Z" fill="white"/>
</svg>

It's the same for this LinkedIn icon:

<svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="84" height="84" rx="8" fill="black"/>
<g clip-path="url(#clip0)">
<path d="M74.3262 72.5455V72.5429H74.3423V50.1378C74.3423 39.1771 71.8439 30.7338 58.2763 30.7338C51.754 30.7338 47.377 34.1142 45.5901 37.3189H45.4014V31.7571H32.5373V72.5429H45.9323V52.3473C45.9323 47.0298 46.9996 41.888 53.9721 41.888C60.8421 41.888 60.9445 47.9564 60.9445 52.6884V72.5455H74.3262Z" fill="white"/>
<path d="M10.7252 31.7596H24.1364V72.5455H10.7252V31.7596Z" fill="white"/>
<path d="M17.4254 11.4546C13.1373 11.4546 9.65783 14.7407 9.65783 18.7906C9.65783 22.8404 13.1373 26.1953 17.4254 26.1953C21.7134 26.1953 25.1929 22.8404 25.1929 18.7906C25.1902 14.7407 21.7107 11.4546 17.4254 11.4546V11.4546Z" fill="white"/>
</g>
</svg>

To Reproduce
Steps to reproduce the behavior:

Paste this SVG code into your website
Copy the resulting SwiftUI code and paste into your project.

Expected behavior
Expected the SwiftUI code to result in something like this (without the rounded corners of course):

Instead, the SwiftUI code results to this:

Same for the LinkedIn – expected this:

Instead resulting in this:

Now, the LinkedIn SVG does have "g" components, which as I understand are not yet supported. However, even if I only select one SVG element (e.g. the "n" in the LinkedIn icon):

<svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M42.3262 42.5455V42.5429H42.3423V20.1378C42.3423 9.1771 39.8439 0.733826 26.2763 0.733826C19.754 0.733826 15.377 4.11419 13.5901 7.31892H13.4014V1.7571H0.537262V42.5429H13.9323V22.3473C13.9323 17.0298 14.9996 11.888 21.9721 11.888C28.8421 11.888 28.9445 17.9564 28.9445 22.6884V42.5455H42.3262Z" fill="white"/>
</svg>

and paste that into the converter, it creates the same result for the respective element: here, this SVG code which is supposed to create an "n" instead makes a bit of it, as you can see on the right of the resulting SwiftUI LinkedIn screenshot.

Interestingly, the Facebook SVG code doesn't have any "g" components or anything else which is unsupported.

Additional context
Xcode 12 on M1 MBP

Y index includes "NaN" value

Sample SVG:

<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="564.2679900744417" viewBox="0, 0, 400,564.2679900744417">
  <g id="svgg">
    <path id="path0" d="M259.712 14.780 C 259.314 15.033,259.133 17.054,259.146 21.100 C 259.173 29.843,258.736 32.504,256.917 34.671 C 254.208 37.897,249.421 42.680,248.898 42.683 C 247.378 42.691,244.436 43.907,242.180 45.459 C 237.135 48.929,232.588 49.470,227.576 47.197 C 222.974 45.110,220.721 44.828,218.917 46.112 C 216.538 47.806,211.240 47.439,210.745 45.546 C 210.461 44.460,210.396 44.466,206.452 45.918 C 203.193 47.117,199.648 47.328,196.529 46.510 C 193.177 45.630,191.624 46.074,189.831 48.425 C 187.958 50.881,185.696 50.796,182.134 48.139 C 180.528 46.941,178.928 46.154,178.099 46.154 C 176.194 46.154,171.564 47.158,170.993 47.696 C 170.252 48.392,166.959 48.215,164.831 47.363 C 163.004 46.632,162.782 46.647,160.982 47.611 C 158.722 48.823,157.178 48.916,156.328 47.891 C 155.457 46.842,154.466 46.966,154.084 48.172 C 153.905 48.735,153.101 49.946,152.297 50.862 C 151.424 51.856,151.042 52.654,151.348 52.843 C 151.630 53.018,151.861 54.026,151.861 55.085 C 151.861 56.974,151.891 57.005,153.474 56.775 C 154.361 56.645,155.321 56.715,155.606 56.930 C 156.232 57.400,158.809 63.308,158.809 64.273 C 158.809 64.649,159.346 65.582,160.003 66.345 L 161.196 67.733 162.287 66.746 C 162.886 66.203,163.695 65.144,164.083 64.393 C 164.648 63.300,165.135 63.027,166.514 63.027 L 168.238 63.027 168.238 66.021 C 168.238 68.223,168.042 69.089,167.494 69.299 C 166.221 69.788,166.671 70.412,168.550 70.764 C 169.709 70.982,170.438 71.432,170.593 72.028 C 170.874 73.100,172.208 73.290,172.208 72.257 C 172.208 71.261,174.868 70.471,178.225 70.471 C 181.829 70.471,182.267 71.143,183.051 77.878 C 183.678 83.263,183.763 83.357,187.978 83.367 C 191.312 83.375,192.549 84.525,191.791 86.914 C 191.533 87.726,191.775 87.841,193.727 87.841 L 195.958 87.841 196.987 90.589 C 198.755 95.317,198.330 96.531,193.717 99.920 C 190.571 102.231,190.367 102.550,189.833 105.994 C 189.599 107.509,189.715 108.180,190.293 108.661 C 191.548 109.702,191.279 112.402,189.826 113.354 C 188.137 114.461,188.263 114.882,190.447 115.421 C 192.242 115.865,192.303 115.951,192.181 117.866 C 191.903 122.237,191.757 123.362,191.359 124.215 C 190.797 125.422,191.217 125.713,192.966 125.329 C 193.834 125.138,194.544 124.609,194.692 124.041 C 195.279 121.797,198.411 122.758,201.973 126.275 L 205.211 129.473 209.677 130.070 C 213.267 130.550,214.339 130.890,215.136 131.806 C 215.682 132.433,216.665 133.014,217.319 133.098 C 220.495 133.505,219.739 137.469,216.485 137.469 C 214.967 137.469,214.249 137.817,212.903 139.206 C 211.802 140.342,211.479 140.943,211.969 140.943 C 215.791 140.943,216.164 146.002,212.901 153.581 C 210.323 159.570,209.910 162.248,211.197 164.638 C 212.113 166.339,212.111 166.371,210.809 169.990 L 209.500 173.631 210.405 176.021 C 211.872 179.897,215.654 181.137,219.589 179.031 C 220.127 178.743,221.552 178.545,222.756 178.590 C 226.294 178.724,227.411 176.288,225.504 172.599 C 224.667 170.980,225.425 169.792,227.806 168.992 C 228.224 168.852,228.819 168.066,229.128 167.247 C 230.168 164.492,234.357 165.912,235.234 169.317 C 236.474 174.126,236.757 174.690,237.930 174.690 C 240.125 174.690,242.133 173.617,243.143 171.904 C 244.138 170.219,244.179 170.203,245.601 170.938 C 246.868 171.594,247.121 171.596,247.649 170.961 C 247.980 170.562,249.018 169.761,249.956 169.181 L 251.662 168.127 254.622 169.954 C 257.378 171.655,257.767 171.759,260.245 171.449 C 263.047 171.099,263.200 171.180,263.699 173.273 C 263.981 174.455,263.717 174.776,261.043 176.499 C 257.831 178.568,257.707 178.738,258.773 179.623 C 259.328 180.084,259.840 180.022,261.131 179.339 C 264.379 177.621,269.720 178.353,270.210 180.584 C 270.964 184.018,273.969 184.890,277.979 182.838 C 279.139 182.245,279.381 182.278,280.158 183.137 C 281.802 184.953,286.232 187.097,288.341 187.097 C 289.690 187.097,291.635 187.746,294.293 189.082 C 296.464 190.174,298.791 191.067,299.463 191.067 C 300.136 191.067,300.824 191.290,300.993 191.563 C 301.540 192.450,302.309 192.087,301.993 191.091 C 301.598 189.847,302.522 186.398,303.458 185.621 C 304.859 184.459,310.174 187.079,310.174 188.933 C 310.174 191.343,315.373 190.232,315.903 187.708 C 316.550 184.631,317.950 183.953,320.831 185.321 C 321.739 185.752,323.491 186.104,324.723 186.104 C 325.956 186.104,327.039 186.293,327.130 186.524 C 327.575 187.652,330.025 187.620,330.032 186.486 C 330.052 183.619,334.487 182.898,336.794 185.387 C 337.412 186.055,338.208 186.601,338.562 186.602 C 338.916 186.603,339.645 187.259,340.182 188.060 C 342.013 190.794,345.409 191.082,345.409 188.504 C 345.409 186.829,348.406 182.073,350.012 181.200 C 350.825 180.758,352.108 179.895,352.864 179.280 C 353.619 178.666,354.583 178.164,355.005 178.164 C 356.178 178.164,356.348 177.486,355.558 175.962 C 355.156 175.188,354.839 173.217,354.839 171.496 C 354.839 168.020,353.676 163.907,352.367 162.751 C 351.886 162.327,351.342 161.503,351.157 160.921 C 350.944 160.250,350.330 159.806,349.480 159.708 C 348.486 159.593,348.094 159.236,347.966 158.327 C 347.871 157.652,347.480 156.653,347.097 156.107 C 346.715 155.561,346.402 154.606,346.402 153.984 C 346.402 153.264,345.320 151.772,343.424 149.876 C 340.917 147.369,340.447 146.623,340.447 145.158 C 340.447 143.477,339.975 142.815,337.369 140.839 C 335.804 139.652,333.499 134.531,333.499 132.241 C 333.499 130.634,333.280 130.019,332.630 129.805 C 331.532 129.443,328.994 127.176,327.891 125.572 C 327.311 124.728,327.047 123.344,327.047 121.140 L 327.047 117.936 320.678 111.697 C 317.174 108.266,313.437 104.342,312.373 102.978 C 311.309 101.613,309.603 99.522,308.581 98.331 C 307.559 97.140,306.591 95.465,306.429 94.609 C 306.229 93.554,305.507 92.602,304.185 91.656 C 301.600 89.805,300.001 87.632,298.496 83.928 C 297.813 82.247,295.725 78.922,293.857 76.540 C 287.859 68.893,286.737 67.047,286.569 64.555 C 286.459 62.922,286.128 62.091,285.392 61.602 C 284.714 61.152,284.367 60.387,284.367 59.344 C 284.367 58.264,283.674 56.815,282.170 54.747 C 280.578 52.560,279.827 50.942,279.446 48.880 C 278.896 45.904,277.547 43.389,273.689 38.149 C 271.594 35.303,271.400 34.808,271.585 32.768 C 271.759 30.844,271.554 30.195,270.156 28.248 C 269.209 26.927,268.386 25.055,268.194 23.781 C 267.414 18.605,262.274 13.150,259.712 14.780 " stroke="none" fill="#000000" fill-rule="evenodd"></path>
  </g>
</svg>

Return value:

struct MyCustomShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let width = rect.size.width
        let height = rect.size.height
        path.move(to: CGPoint(x: 0.64928*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.64787*width, y: NaN*height), control1: CGPoint(x: 0.64829*width, y: NaN*height), control2: CGPoint(x: 0.64783*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.64229*width, y: NaN*height), control1: CGPoint(x: 0.64793*width, y: NaN*height), control2: CGPoint(x: 0.64684*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.62224*width, y: NaN*height), control1: CGPoint(x: 0.63552*width, y: NaN*height), control2: CGPoint(x: 0.62355*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.60545*width, y: NaN*height), control1: CGPoint(x: 0.61844*width, y: NaN*height), control2: CGPoint(x: 0.61109*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.56894*width, y: NaN*height), control1: CGPoint(x: 0.59284*width, y: NaN*height), control2: CGPoint(x: 0.58147*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.54729*width, y: NaN*height), control1: CGPoint(x: 0.55744*width, y: NaN*height), control2: CGPoint(x: 0.5518*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.52686*width, y: NaN*height), control1: CGPoint(x: 0.54135*width, y: NaN*height), control2: CGPoint(x: 0.5281*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.51613*width, y: NaN*height), control1: CGPoint(x: 0.52615*width, y: NaN*height), control2: CGPoint(x: 0.52599*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.49132*width, y: NaN*height), control1: CGPoint(x: 0.50798*width, y: NaN*height), control2: CGPoint(x: 0.49912*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.47458*width, y: NaN*height), control1: CGPoint(x: 0.48294*width, y: NaN*height), control2: CGPoint(x: 0.47906*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.45533*width, y: NaN*height), control1: CGPoint(x: 0.4699*width, y: NaN*height), control2: CGPoint(x: 0.46424*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.44525*width, y: NaN*height), control1: CGPoint(x: 0.45132*width, y: NaN*height), control2: CGPoint(x: 0.44732*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.42748*width, y: NaN*height), control1: CGPoint(x: 0.44048*width, y: NaN*height), control2: CGPoint(x: 0.42891*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.41208*width, y: NaN*height), control1: CGPoint(x: 0.42563*width, y: NaN*height), control2: CGPoint(x: 0.4174*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.40246*width, y: NaN*height), control1: CGPoint(x: 0.40751*width, y: NaN*height), control2: CGPoint(x: 0.40696*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.39082*width, y: NaN*height), control1: CGPoint(x: 0.39681*width, y: NaN*height), control2: CGPoint(x: 0.39294*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.38521*width, y: NaN*height), control1: CGPoint(x: 0.38864*width, y: NaN*height), control2: CGPoint(x: 0.38617*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.38074*width, y: NaN*height), control1: CGPoint(x: 0.38476*width, y: NaN*height), control2: CGPoint(x: 0.38275*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.37837*width, y: NaN*height), control1: CGPoint(x: 0.37856*width, y: NaN*height), control2: CGPoint(x: 0.37761*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.37965*width, y: NaN*height), control1: CGPoint(x: 0.37907*width, y: NaN*height), control2: CGPoint(x: 0.37965*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.38368*width, y: NaN*height), control1: CGPoint(x: 0.37965*width, y: NaN*height), control2: CGPoint(x: 0.37973*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.38901*width, y: NaN*height), control1: CGPoint(x: 0.3859*width, y: NaN*height), control2: CGPoint(x: 0.3883*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.39702*width, y: NaN*height), control1: CGPoint(x: 0.39058*width, y: NaN*height), control2: CGPoint(x: 0.39702*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.40001*width, y: NaN*height), control1: CGPoint(x: 0.39702*width, y: NaN*height), control2: CGPoint(x: 0.39837*width, y: NaN*height))
        path.addLine(to: CGPoint(x: 0.40299*width, y: NaN*height))
        path.addLine(to: CGPoint(x: 0.40572*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.41021*width, y: NaN*height), control1: CGPoint(x: 0.40721*width, y: NaN*height), control2: CGPoint(x: 0.40924*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.41629*width, y: NaN*height), control1: CGPoint(x: 0.41162*width, y: NaN*height), control2: CGPoint(x: 0.41284*width, y: NaN*height))
        path.addLine(to: CGPoint(x: 0.42059*width, y: NaN*height))
        path.addLine(to: CGPoint(x: 0.42059*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.41874*width, y: NaN*height), control1: CGPoint(x: 0.42059*width, y: NaN*height), control2: CGPoint(x: 0.42011*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.42138*width, y: NaN*height), control1: CGPoint(x: 0.41555*width, y: NaN*height), control2: CGPoint(x: 0.41668*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.42648*width, y: NaN*height), control1: CGPoint(x: 0.42427*width, y: NaN*height), control2: CGPoint(x: 0.42609*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.43052*width, y: NaN*height), control1: CGPoint(x: 0.42718*width, y: NaN*height), control2: CGPoint(x: 0.43052*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.44556*width, y: NaN*height), control1: CGPoint(x: 0.43052*width, y: NaN*height), control2: CGPoint(x: 0.43717*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.45763*width, y: NaN*height), control1: CGPoint(x: 0.45457*width, y: NaN*height), control2: CGPoint(x: 0.45567*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.46995*width, y: NaN*height), control1: CGPoint(x: 0.4592*width, y: NaN*height), control2: CGPoint(x: 0.45941*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.47948*width, y: NaN*height), control1: CGPoint(x: 0.47828*width, y: NaN*height), control2: CGPoint(x: 0.48137*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.48432*width, y: NaN*height), control1: CGPoint(x: 0.47883*width, y: NaN*height), control2: CGPoint(x: 0.47944*width, y: NaN*height))
        path.addLine(to: CGPoint(x: 0.48989*width, y: NaN*height))
        path.addLine(to: CGPoint(x: 0.49247*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.48429*width, y: NaN*height), control1: CGPoint(x: 0.49689*width, y: NaN*height), control2: CGPoint(x: 0.49583*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.47458*width, y: NaN*height), control1: CGPoint(x: 0.47643*width, y: NaN*height), control2: CGPoint(x: 0.47592*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.47573*width, y: NaN*height), control1: CGPoint(x: 0.474*width, y: NaN*height), control2: CGPoint(x: 0.47429*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.47456*width, y: NaN*height), control1: CGPoint(x: 0.47887*width, y: NaN*height), control2: CGPoint(x: 0.4782*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.47612*width, y: NaN*height), control1: CGPoint(x: 0.47034*width, y: NaN*height), control2: CGPoint(x: 0.47066*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.48045*width, y: NaN*height), control1: CGPoint(x: 0.4806*width, y: NaN*height), control2: CGPoint(x: 0.48076*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.4784*width, y: NaN*height), control1: CGPoint(x: 0.47976*width, y: NaN*height), control2: CGPoint(x: 0.47939*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.48242*width, y: NaN*height), control1: CGPoint(x: 0.47699*width, y: NaN*height), control2: CGPoint(x: 0.47804*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.48673*width, y: NaN*height), control1: CGPoint(x: 0.48458*width, y: NaN*height), control2: CGPoint(x: 0.48636*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.50493*width, y: NaN*height), control1: CGPoint(x: 0.4882*width, y: NaN*height), control2: CGPoint(x: 0.49603*width, y: NaN*height))
        path.addLine(to: CGPoint(x: 0.51303*width, y: NaN*height))
        path.addLine(to: CGPoint(x: 0.52419*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.53784*width, y: NaN*height), control1: CGPoint(x: 0.53317*width, y: NaN*height), control2: CGPoint(x: 0.53585*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.5433*width, y: NaN*height), control1: CGPoint(x: 0.5392*width, y: NaN*height), control2: CGPoint(x: 0.54166*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.54121*width, y: NaN*height), control1: CGPoint(x: 0.55124*width, y: NaN*height), control2: CGPoint(x: 0.54935*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.53226*width, y: NaN*height), control1: CGPoint(x: 0.53742*width, y: NaN*height), control2: CGPoint(x: 0.53562*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.52992*width, y: NaN*height), control1: CGPoint(x: 0.52951*width, y: NaN*height), control2: CGPoint(x: 0.5287*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.53225*width, y: NaN*height), control1: CGPoint(x: 0.53948*width, y: NaN*height), control2: CGPoint(x: 0.54041*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.52799*width, y: NaN*height), control1: CGPoint(x: 0.52581*width, y: NaN*height), control2: CGPoint(x: 0.52477*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.52702*width, y: NaN*height), control1: CGPoint(x: 0.53028*width, y: NaN*height), control2: CGPoint(x: 0.53028*width, y: NaN*height))
        path.addLine(to: CGPoint(x: 0.52375*width, y: NaN*height))
        path.addLine(to: CGPoint(x: 0.52601*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.54897*width, y: NaN*height), control1: CGPoint(x: 0.52968*width, y: NaN*height), control2: CGPoint(x: 0.53914*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.55689*width, y: NaN*height), control1: CGPoint(x: 0.55032*width, y: NaN*height), control2: CGPoint(x: 0.55388*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.56376*width, y: NaN*height), control1: CGPoint(x: 0.56573*width, y: NaN*height), control2: CGPoint(x: 0.56853*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.56951*width, y: NaN*height), control1: CGPoint(x: 0.56167*width, y: NaN*height), control2: CGPoint(x: 0.56356*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.57282*width, y: NaN*height), control1: CGPoint(x: 0.57056*width, y: NaN*height), control2: CGPoint(x: 0.57205*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.58808*width, y: NaN*height), control1: CGPoint(x: 0.57542*width, y: NaN*height), control2: CGPoint(x: 0.58589*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.59483*width, y: NaN*height), control1: CGPoint(x: 0.59118*width, y: NaN*height), control2: CGPoint(x: 0.59189*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.60786*width, y: NaN*height), control1: CGPoint(x: 0.60031*width, y: NaN*height), control2: CGPoint(x: 0.60533*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.614*width, y: NaN*height), control1: CGPoint(x: 0.61035*width, y: NaN*height), control2: CGPoint(x: 0.61045*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.61912*width, y: NaN*height), control1: CGPoint(x: 0.61717*width, y: NaN*height), control2: CGPoint(x: 0.6178*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.62489*width, y: NaN*height), control1: CGPoint(x: 0.61995*width, y: NaN*height), control2: CGPoint(x: 0.62255*width, y: NaN*height))
        path.addLine(to: CGPoint(x: 0.62916*width, y: NaN*height))
        path.addLine(to: CGPoint(x: 0.63655*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.65061*width, y: NaN*height), control1: CGPoint(x: 0.64344*width, y: NaN*height), control2: CGPoint(x: 0.64442*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.65925*width, y: NaN*height), control1: CGPoint(x: 0.65762*width, y: NaN*height), control2: CGPoint(x: 0.658*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.65261*width, y: NaN*height), control1: CGPoint(x: 0.65995*width, y: NaN*height), control2: CGPoint(x: 0.65929*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.64693*width, y: NaN*height), control1: CGPoint(x: 0.64458*width, y: NaN*height), control2: CGPoint(x: 0.64427*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.65283*width, y: NaN*height), control1: CGPoint(x: 0.64832*width, y: NaN*height), control2: CGPoint(x: 0.6496*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.67552*width, y: NaN*height), control1: CGPoint(x: 0.66095*width, y: NaN*height), control2: CGPoint(x: 0.6743*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.69495*width, y: NaN*height), control1: CGPoint(x: 0.67741*width, y: NaN*height), control2: CGPoint(x: 0.68492*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.70039*width, y: NaN*height), control1: CGPoint(x: 0.69785*width, y: NaN*height), control2: CGPoint(x: 0.69845*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.72085*width, y: NaN*height), control1: CGPoint(x: 0.70451*width, y: NaN*height), control2: CGPoint(x: 0.71558*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.73573*width, y: NaN*height), control1: CGPoint(x: 0.72423*width, y: NaN*height), control2: CGPoint(x: 0.72909*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.74866*width, y: NaN*height), control1: CGPoint(x: 0.74116*width, y: NaN*height), control2: CGPoint(x: 0.74698*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.75248*width, y: NaN*height), control1: CGPoint(x: 0.75034*width, y: NaN*height), control2: CGPoint(x: 0.75206*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.75498*width, y: NaN*height), control1: CGPoint(x: 0.75385*width, y: NaN*height), control2: CGPoint(x: 0.75577*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.75865*width, y: NaN*height), control1: CGPoint(x: 0.754*width, y: NaN*height), control2: CGPoint(x: 0.75631*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.77543*width, y: NaN*height), control1: CGPoint(x: 0.76215*width, y: NaN*height), control2: CGPoint(x: 0.77543*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.78976*width, y: NaN*height), control1: CGPoint(x: 0.77543*width, y: NaN*height), control2: CGPoint(x: 0.78843*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.80208*width, y: NaN*height), control1: CGPoint(x: 0.79138*width, y: NaN*height), control2: CGPoint(x: 0.79487*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.81181*width, y: NaN*height), control1: CGPoint(x: 0.80435*width, y: NaN*height), control2: CGPoint(x: 0.80873*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.81783*width, y: NaN*height), control1: CGPoint(x: 0.81489*width, y: NaN*height), control2: CGPoint(x: 0.8176*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.82508*width, y: NaN*height), control1: CGPoint(x: 0.81894*width, y: NaN*height), control2: CGPoint(x: 0.82506*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.84198*width, y: NaN*height), control1: CGPoint(x: 0.82513*width, y: NaN*height), control2: CGPoint(x: 0.83622*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.84641*width, y: NaN*height), control1: CGPoint(x: 0.84353*width, y: NaN*height), control2: CGPoint(x: 0.84552*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.85046*width, y: NaN*height), control1: CGPoint(x: 0.84729*width, y: NaN*height), control2: CGPoint(x: 0.84911*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.86352*width, y: NaN*height), control1: CGPoint(x: 0.85503*width, y: NaN*height), control2: CGPoint(x: 0.86352*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.87503*width, y: NaN*height), control1: CGPoint(x: 0.86352*width, y: NaN*height), control2: CGPoint(x: 0.87101*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.88216*width, y: NaN*height), control1: CGPoint(x: 0.87706*width, y: NaN*height), control2: CGPoint(x: 0.88027*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.88751*width, y: NaN*height), control1: CGPoint(x: 0.88405*width, y: NaN*height), control2: CGPoint(x: 0.88646*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.88889*width, y: NaN*height), control1: CGPoint(x: 0.89045*width, y: NaN*height), control2: CGPoint(x: 0.89087*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.8871*width, y: NaN*height), control1: CGPoint(x: 0.88789*width, y: NaN*height), control2: CGPoint(x: 0.8871*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.88092*width, y: NaN*height), control1: CGPoint(x: 0.8871*width, y: NaN*height), control2: CGPoint(x: 0.88419*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.87789*width, y: NaN*height), control1: CGPoint(x: 0.87972*width, y: NaN*height), control2: CGPoint(x: 0.87835*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.8737*width, y: NaN*height), control1: CGPoint(x: 0.87736*width, y: NaN*height), control2: CGPoint(x: 0.87582*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.86991*width, y: NaN*height), control1: CGPoint(x: 0.87121*width, y: NaN*height), control2: CGPoint(x: 0.87023*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.86774*width, y: NaN*height), control1: CGPoint(x: 0.86968*width, y: NaN*height), control2: CGPoint(x: 0.8687*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.866*width, y: NaN*height), control1: CGPoint(x: 0.86679*width, y: NaN*height), control2: CGPoint(x: 0.866*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.85856*width, y: NaN*height), control1: CGPoint(x: 0.866*width, y: NaN*height), control2: CGPoint(x: 0.8633*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.85112*width, y: NaN*height), control1: CGPoint(x: 0.85229*width, y: NaN*height), control2: CGPoint(x: 0.85112*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.84342*width, y: NaN*height), control1: CGPoint(x: 0.85112*width, y: NaN*height), control2: CGPoint(x: 0.84994*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.83375*width, y: NaN*height), control1: CGPoint(x: 0.83951*width, y: NaN*height), control2: CGPoint(x: 0.83375*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.83157*width, y: NaN*height), control1: CGPoint(x: 0.83375*width, y: NaN*height), control2: CGPoint(x: 0.8332*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.81973*width, y: NaN*height), control1: CGPoint(x: 0.82883*width, y: NaN*height), control2: CGPoint(x: 0.82249*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.81762*width, y: NaN*height), control1: CGPoint(x: 0.81828*width, y: NaN*height), control2: CGPoint(x: 0.81762*width, y: NaN*height))
        path.addLine(to: CGPoint(x: 0.81762*width, y: NaN*height))
        path.addLine(to: CGPoint(x: 0.8017*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.78093*width, y: NaN*height), control1: CGPoint(x: 0.79293*width, y: NaN*height), control2: CGPoint(x: 0.78359*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.77145*width, y: NaN*height), control1: CGPoint(x: 0.77827*width, y: NaN*height), control2: CGPoint(x: 0.77401*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.76607*width, y: NaN*height), control1: CGPoint(x: 0.7689*width, y: NaN*height), control2: CGPoint(x: 0.76648*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.76046*width, y: NaN*height), control1: CGPoint(x: 0.76557*width, y: NaN*height), control2: CGPoint(x: 0.76377*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.74624*width, y: NaN*height), control1: CGPoint(x: 0.754*width, y: NaN*height), control2: CGPoint(x: 0.75*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.73464*width, y: NaN*height), control1: CGPoint(x: 0.74453*width, y: NaN*height), control2: CGPoint(x: 0.73931*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.71642*width, y: NaN*height), control1: CGPoint(x: 0.71965*width, y: NaN*height), control2: CGPoint(x: 0.71684*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.71348*width, y: NaN*height), control1: CGPoint(x: 0.71615*width, y: NaN*height), control2: CGPoint(x: 0.71532*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.71092*width, y: NaN*height), control1: CGPoint(x: 0.71179*width, y: NaN*height), control2: CGPoint(x: 0.71092*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.70543*width, y: NaN*height), control1: CGPoint(x: 0.71092*width, y: NaN*height), control2: CGPoint(x: 0.70918*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.69862*width, y: NaN*height), control1: CGPoint(x: 0.70144*width, y: NaN*height), control2: CGPoint(x: 0.69957*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.68422*width, y: NaN*height), control1: CGPoint(x: 0.69724*width, y: NaN*height), control2: CGPoint(x: 0.69387*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.67896*width, y: NaN*height), control1: CGPoint(x: 0.67898*width, y: NaN*height), control2: CGPoint(x: 0.6785*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.67539*width, y: NaN*height), control1: CGPoint(x: 0.6794*width, y: NaN*height), control2: CGPoint(x: 0.67888*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.67048*width, y: NaN*height), control1: CGPoint(x: 0.67302*width, y: NaN*height), control2: CGPoint(x: 0.67097*width, y: NaN*height))
        path.addCurve(to: CGPoint(x: 0.64928*width, y: NaN*height), control1: CGPoint(x: 0.66853*width, y: NaN*height), control2: CGPoint(x: 0.65568*width, y: NaN*height))
        return path
    }
}

because of the NaN, Xcode returns error

</polygon> does not working this sample

Sample SVG:

<polygon id="Path" points="7.608 12 2.906 14.472 3.804 9.236 0 5.528 5.257 4.764 7.608 0 9.959 4.764 15.216 5.528 11.412 9.236 12.31 14.472"></polygon>

Return value:

struct MyCustomShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let width = rect.size.width
        let height = rect.size.height
        
        return path
    }
}

is there any known issue with syntax?

[Transpiler Bug] Empty areas get filled

Describe the bug

The shape has a few empty areas around lines but in SwiftUI those get filled.

SVG code which does not work with this tool

yarn dev err : exec: "pnpm": executable file not found in $PATH

environment：Mac M1 ,nodejs v19.5.0
git success,
cd success,
yarn success,
yarn dev , err:

{
yarn run v1.22.19
$ turbo run dev --parallel
• Packages in scope: svg-to-swiftui-core, svg-to-swiftui-webapp, tsconfig
• Running dev in 3 packages
• Remote caching disabled
svg-to-swiftui-webapp:dev: cache bypass, force executing ed5afce2520048ec
svg-to-swiftui-webapp:dev: ERROR: command finished with error: exec: "pnpm": executable file not found in $PATH
exec: "pnpm": executable file not found in $PATH

Tasks: 0 successful, 1 total
Cached: 0 cached, 1 total
Time: 168ms

ERROR run failed: command exited (1)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

}

Tried converting an SVG but it ends up littered with 'NaN'

Tried converting an SVG but it ends up littered with 'NaN', and causes errors in XCode.

e.g.

path.addCurve(to: CGPoint(x: NaN*width, y: NaN*height),control1: CGPoint(x: -0.00809*width, y: 0),control2: CGPoint(x: NaN*width, y: NaN*height))

Rectangles with rounded corners not supported.

Describe the bug
SVG rectangles with the rx attribute are converted to rectangles without rounded corners.

To Reproduce

<svg width="22" height="4" viewBox="0 0 22 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="22" height="4" rx="2" fill="black"/>
</svg>

struct IconMinusShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let width = rect.size.width
        let height = rect.size.height
        path.addRect(CGRect(x: 0, y: 0, width: width, height: height))
        return path
    }
}

Expected behavior
In this case, the rect should be added to the Swift Shape using path.addRoundedRect but path.addRect is used instead, resulting in a normal rectangle.

Rendered SwiftUI doesn't match rendered SVG

SVG render

SwiftUI render

SVG

<svg viewBox="0 0 280 280">
<path d="M 157 180.611 V 199 h 4 c 17.491 0 33.525 6.237 46 16.608 V 92 c 0 -40.87 -33.131 -74 -74 -74 -40.87 0 -74 33.13 -74 74 v 183.716 c 13.57 -1.94 24 -13.61 24 -27.716 v -45.577 A 71.952 71.952 0 0 1 105 199 h 4 v -18.389 a 56.236 56.236 0 0 1 -26 -25.365 v -61.98 c 9.147 -2.975 18.778 -7.249 28.342 -12.77 15.403 -8.894 28.089 -19.555 36.724 -30.099 a 86.935 86.935 0 0 0 7.044 15.488 c 8.768 15.185 21.114 26.349 33.89 32.032 v .249 c .4 .067 .794 .154 1.18 .26 .774 .323 1.55 .626 2.326 .91 A 11.998 11.998 0 0 1 199 110 v 13 c 0 6.019 -4.431 11.002 -10.209 11.867 -1.743 20.248 -14.26 37.416 -31.791 45.744 z"/>
</svg>

SwiftUI

struct MyCustomShape: Shape {
                func path(in rect: CGRect) -> Path {
                    var path = Path()
                    let width = rect.size.width
                    let height = rect.size.height
                    path.move(to: CGPoint(x: 0.56071*width, y: 0.64504*height))
                    path.addLine(to: CGPoint(x: 0.56071*width, y: 0.71071*height))
                    path.addLine(to: CGPoint(x: 0.575*width, y: 0.71071*height))
                    path.addCurve(to: CGPoint(x: 0.73929*width, y: 0.77003*height), control1: CGPoint(x: 0.63747*width, y: 0.71071*height), control2: CGPoint(x: 0.69473*width, y: 0.73299*height))
                    path.addLine(to: CGPoint(x: 0.73929*width, y: 0.32857*height))
                    path.addCurve(to: CGPoint(x: 0.475*width, y: 0.06429*height), control1: CGPoint(x: 0.73929*width, y: 0.18261*height), control2: CGPoint(x: 0.62096*width, y: 0.06429*height))
                    path.addCurve(to: CGPoint(x: 0.21071*width, y: 0.32857*height), control1: CGPoint(x: 0.32904*width, y: 0.06429*height), control2: CGPoint(x: 0.21071*width, y: 0.18261*height))
                    path.addLine(to: CGPoint(x: 0.21071*width, y: 0.9847*height))
                    path.addCurve(to: CGPoint(x: 0.29643*width, y: 0.88571*height), control1: CGPoint(x: 0.25918*width, y: 0.97777*height), control2: CGPoint(x: 0.29643*width, y: 0.93609*height))
                    path.addLine(to: CGPoint(x: 0.29643*width, y: 0.72294*height))
                    path.addLine(to: CGPoint(x: 0.38929*width, y: 0))
                    path.addLine(to: CGPoint(x: 0.38929*width, y: 0.64504*height))
                    path.addLine(to: CGPoint(x: 0, y: 0.33309*height))
                    path.addCurve(to: CGPoint(x: 0.39765*width, y: 0.28749*height), control1: CGPoint(x: 0.3291*width, y: 0.32247*height), control2: CGPoint(x: 0.36349*width, y: 0.3072*height))
                    path.addCurve(to: CGPoint(x: 0.52881*width, y: 0.17999*height), control1: CGPoint(x: 0.45266*width, y: 0.25572*height), control2: CGPoint(x: 0.49797*width, y: 0.21765*height))
                    path.addCurve(to: CGPoint(x: 0.675*width, y: 0.3497*height), control1: CGPoint(x: 0.58528*width, y: 0.28954*height), control2: CGPoint(x: 0.62937*width, y: 0.32941*height))
                    path.addLine(to: CGPoint(x: 0.675*width, y: 0.35059*height))
                    path.addCurve(to: CGPoint(x: 0.67921*width, y: 0.35152*height), control1: CGPoint(x: 0.67643*width, y: 0.35083*height), control2: CGPoint(x: 0.67784*width, y: 0.35114*height))
                    path.addCurve(to: CGPoint(x: 0.68752*width, y: 0.35477*height), control1: CGPoint(x: 0.68198*width, y: 0.35267*height), control2: CGPoint(x: 0.68475*width, y: 0.35376*height))
                    path.addLine(to: CGPoint(x: 0, y: 0.43929*height))
                    path.addCurve(to: CGPoint(x: 0.67425*width, y: 0.48167*height), control1: CGPoint(x: 0.71071*width, y: 0.46078*height), control2: CGPoint(x: 0.69489*width, y: 0.47858*height))
                    path.addCurve(to: CGPoint(x: 0.56071*width, y: 0.64504*height), control1: CGPoint(x: 0.66803*width, y: 0.55398*height), control2: CGPoint(x: 0.62333*width, y: 0.6153*height))
                    path.closeSubpath()
                    return path
                }
            }

do whatever

Color support could be implemented for multicolor svg icons

When I upload a multicolor SVG icon it couldn't convert colors.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

bring-shrubbery / svg-to-swiftui Goto Github PK

svg-to-swiftui's Introduction

SVG to SwiftUI Converter

Disclaimer (Before you use this tool)

Quick Links

Usage

Step 1

Online

Running locally

Example usage

In the browser

In SwiftUI View, exported as a Shape

Contributing

Author

License

svg-to-swiftui's People

Contributors

Stargazers

Watchers

Forkers

svg-to-swiftui's Issues

Sample SVG:

Return value:

Recommend Projects

Recommend Topics

Recommend Org