Tool to convert SVG to SwiftUI's Shape structure.

Overview

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.

Usage

Online

The tool is available online, just follow this link.

Running locally

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

Functionality Coverage

This repository is just a front-end wrapper over our svg-to-swiftui-core (npm link) package. You can find the functionality coverage on that package's page. We encourage you checking it out and maybe starring it on GitHub 😍 !

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

SVG file wiewed in the browser

In SwiftUI View, exported as a Shape

SVG file wiewed in the browser

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

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

    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))

    bug 
    opened by transat 7
  • Convert doesn't work for certain SVG code

    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:

    1. Paste this SVG code into your website
    2. 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): Screenshot 2021-01-29 at 14 50 49

    Instead, the SwiftUI code results to this: Screenshot 2021-01-29 at 14 52 59

    Same for the LinkedIn – expected this: Screenshot 2021-01-29 at 14 54 51

    Instead resulting in this: Screenshot 2021-01-29 at 14 58 22

    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

    bug good first issue 
    opened by nikitamounier 3
  • Bump terser from 5.6.1 to 5.14.2

    Bump terser from 5.6.1 to 5.14.2

    Bumps terser from 5.6.1 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)

    v5.12.1

    • Fixed an issue with function definitions inside blocks (#1155)
    • Fixed parens of new in some situations (closes #1159)

    v5.12.0

    • TERSER_DEBUG_DIR environment variable
    • @​copyright comments are now preserved with the comments="some" option (#1153)

    v5.11.0

    • Unicode code point escapes (\u{abcde}) are not emitted inside RegExp literals anymore (#1147)
    • acorn is now a regular dependency

    v5.10.0

    • Massive optimization to max_line_len (#1109)
    • Basic support for import assertions
    • Marked ES2022 Object.hasOwn as a pure function
    • Fix delete optional?.property
    • New CI/CD pipeline with github actions (#1057)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump svelte from 3.43.1 to 3.49.0

    Bump svelte from 3.43.1 to 3.49.0

    Bumps svelte from 3.43.1 to 3.49.0.

    Changelog

    Sourced from svelte's changelog.

    3.49.0

    • Improve performance of string escaping during SSR (#5701)
    • Add ComponentType and ComponentProps convenience types (#6770)
    • Add support for CSS @layer (#7504)
    • Export CompileOptions from svelte/compiler (#7658)
    • Fix DOM-less components not being properly destroyed (#7488)
    • Fix class: directive updates with <svelte:element> (#7521, #7571)
    • Harden attribute escaping during SSR (#7530)

    3.48.0

    • Allow creating cancelable custom events with createEventDispatcher (#4623)
    • Support {@const} tag in {#if} blocks #7241
    • Return the context object in setContext #7427
    • Allow comments inside {#each} blocks when using animate: (#3999)
    • Fix |local transitions in {#key} blocks (#5950)
    • Support svg namespace for {@html} (#7002, #7450)
    • Fix {@const} tag not working inside a component when there's no let: #7189
    • Remove extraneous leading newline inside <pre> and <textarea> (#7264)
    • Fix erroneous setting of textContent for \<template> elements (#7297)
    • Fix value of let: bindings not updating in certain cases (#7440)
    • Fix handling of void tags in <svelte:element> (#7449)
    • Fix handling of boolean attributes in <svelte:element> (#7478)
    • Add special style scoping handling of [open] selectors on <dialog> elements (#7495)

    3.47.0

    • Add support for dynamic elements through <svelte:element> (#2324)
    • Miscellaneous variable context fixes in {@const} (#7222)
    • Fix {#key} block not being reactive when the key variable is not otherwise used (#7408)
    • Add Symbol as a known global (#7418)

    3.46.6

    • Actually include action TypeScript interface in published package (#7407)

    3.46.5

    • Add TypeScript interfaces for typing actions (#6538)
    • Do not generate unused-export-let warning inside <script context="module"> blocks (#7055)
    • Do not collapse whitespace-only CSS vars (#7152)
    • Add aria-description to the list of allowed ARIA attributes (#7301)
    • Fix attribute escaping during SSR (#7327)
    • Prevent .innerHTML optimization from being used when style: directive is present (#7386)

    3.46.4

    • Avoid maximum call stack size exceeded errors on large components (#4694)
    • Preserve leading space with preserveWhitespace: true (#4731)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    • c8c2f9b6: Fixed site base url issue
    opened by github-actions[bot] 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    • eeba9561: Automation test #5
    opened by github-actions[bot] 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    • 1cc440e2: Automation test #4
    opened by github-actions[bot] 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    • 1cc440e2: Automation test #4
    opened by github-actions[bot] 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    • 7f0f80b8: Automation test #3
    opened by github-actions[bot] 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    • 100e908f: Automation test #2
    opened by github-actions[bot] 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    • 71f2d76: Automated release check

    [email protected]

    Patch Changes

    • 71f2d76: Automated release check
    opened by github-actions[bot] 0
  • Rectangles with rounded corners not supported.

    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.

    enhancement 
    opened by curiousdustin 0
  • Y index includes

    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

    bug 
    opened by tkgka 2
  • </polygon> does not working this sample

    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?

    enhancement 
    opened by ghost 1
Owner
Quassum Manus
When you think about it, you’re just a liquid-cooled computer 😉
Quassum Manus
Text-cli - Command line tool for extracting text from images using Apple's Vision framework

text-cli Command line tool for extracting text from images using Apple's Vision

San Francisco International Airport Museum 9 Aug 29, 2022
Tools for SwiftUI that helps perform Path and Shape animations, such us morphing circle or shape transformations

SwiftUI+PathAnimations ?? Introduction This packages contains SimilarShape and InterpolatedShape, both can be used to achieve shapes animations with S

Alfredo Delli Bovi 180 Dec 29, 2022
SVG-Native (SVG OpenType) image coder plugin for SDWebImage

SDWebImageSVGNativeCoder Background Currently SDWebImage org provide 3 kinds of SVG Coder Plugin support, here is comparison: Plugin Name Vector Image

null 5 Dec 23, 2022
🖐 Memory game with hand gesture recognition that will keep your brain in a good shape!

Hands I have always been interested in how I can improve my memory in addition to reading books, and once I came across an interesting technique relat

Tamerlan Satualdypov 35 Dec 19, 2022
A result builder that allows to define shape building closures

ShapeBuilder A result builder implementation that allows to define shape building closures and variables. Problem In SwiftUI, you can end up in a situ

Daniel Peter 47 Dec 2, 2022
A SwiftUI implementation of Wave animating shape.

WaveAnimation A SwiftUI implementation of Wave animating shape. Preview Usage import SineWaveShape SineWaveShape(percent: 0.4, strength: 30, frequency

Zerlz 16 Sep 23, 2022
SwiftUI:Using Shape & Path to Draw Taiwan Meme Cat

SwiftUI:Using Shape & Path to Draw Taiwan Meme Cat Using SwiftUI's Shape & Path to draw sticker「Taiwan Meme Cat」from Instagram:@taiwanmemecat! SwiftUI

Ricky Chuang 1 Mar 5, 2022
Spiral is a SwiftUI shape for macOS, iOS and watchOS.

Spiral is a SwiftUI shape for macOS, iOS and watchOS. A spiral is a component that includes a point generator, Shape and View of the spiral. The point

Alexey Bukhtin 62 Oct 26, 2022
DevTool - A simple UI and powerful Mac OS application, Such as JSON-Formatting tool, JSON-to-model tool, AppIcon generator, Network-Request tool...

?? ?? ?? A simple UI and powerful Mac OS application. It is a collection of tools commonly used in my development work. Such as JSON-Formatting tool, JSON-to-model tool, AppIcon generator, Network-Request tool...

渠晓友 3 Dec 21, 2022
Elegant SVG animation kit for swift

Elephant This is SVG animation presentation kit for iOS. Example You can run example app. Please open Example-iOS/Elephant-iOS.xcworkspace! Usage You

Kazumasa Shimomura 127 Dec 14, 2022
❄️ SVG in Swift

Snowflake ❤️ Support my apps ❤️ Push Hero - pure Swift native macOS application to test push notifications PastePal - Pasteboard, note and shortcut ma

Khoa 949 Dec 14, 2022
A simple, performant, and lightweight SVG parser

Key Features Parsing performance that meets or beats other popular SVG Frameworks A simple architecture, optimized for extension, flexibility and deve

Michael Choe 1.8k Dec 29, 2022
Powerful and easy-to-use vector graphics Swift library with SVG support

Macaw Powerful and easy-to-use vector graphics Swift library with SVG support We are a development agency building phenomenal apps. What is Macaw? Mac

Exyte 5.9k Jan 1, 2023
A simple, performant, and lightweight SVG parser

Key Features Parsing performance that meets or beats other popular SVG Frameworks A simple architecture, optimized for extension, flexibility and deve

Michael Choe 1.8k Dec 29, 2022
Display and interact with SVG Images on iOS / OS X, using native rendering (CoreAnimation)

SVGKit SVGKit is a Cocoa framework for rendering SVG files natively: it's fast and powerful. Some additional info and links are on the wiki Versions:

null 4.3k Jan 3, 2023
❄️ SVG in Swift

Snowflake ❤️ Support my apps ❤️ Push Hero - pure Swift native macOS application to test push notifications PastePal - Pasteboard, note and shortcut ma

Khoa 949 Dec 14, 2022
Powerful and easy-to-use vector graphics Swift library with SVG support

Macaw Powerful and easy-to-use vector graphics Swift library with SVG support We are a development agency building phenomenal apps. What is Macaw? Mac

Exyte 5.9k Jan 2, 2023
A Swift library for parsing and drawing SVG images to CoreGraphics contexts.

SwiftDraw A Swift library for parsing and drawing SVG images to CoreGraphics contexts. SwiftDraw can also convert an SVG into Swift source code. Usage

Simon Whitty 119 Jan 3, 2023
SVG parser and renderer written in SwiftUI

SVGView SVG parser written in SwiftUI We are a development agency building phenomenal apps. Overview The goal of this project is to bring the full pow

Exyte 269 Jan 4, 2023
ImageView - Component for loading and displaying different images aka SVG/PNG/JPG/JPEG

ImageView Component that loads and displays images(.svg/.png/.jpg/.jpeg) form as

Sergei 1 Mar 23, 2022