Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Path numbers like X.Y.Z should be parsed as "X.Y" and "0.Z" #118

Open
marcprux opened this issue Mar 19, 2019 · 2 comments
Open

Path numbers like X.Y.Z should be parsed as "X.Y" and "0.Z" #118

marcprux opened this issue Mar 19, 2019 · 2 comments

Comments

@marcprux
Copy link
Contributor

The single SVG path as downloaded from https://fontawesome.com/icons/baseball-ball looks like this when rendered in Safari:

Screen Shot 2019-03-19 at 16 30 33

But when rendered in SwiftSVGExampleMac it looks like:

Screen Shot 2019-03-19 at 16 31 20

The SVG path is as follows:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="baseball-ball" class="svg-inline--fa fa-baseball-ball fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M368.5 363.9l28.8-13.9c11.1 22.9 26 43.2 44.1 60.9 34-42.5 54.5-96.3 54.5-154.9 0-58.5-20.4-112.2-54.2-154.6-17.8 17.3-32.6 37.1-43.6 59.5l-28.7-14.1c12.8-26 30-49 50.8-69C375.6 34.7 315 8 248 8 181.1 8 120.5 34.6 75.9 77.7c20.7 19.9 37.9 42.9 50.7 68.8l-28.7 14.1c-11-22.3-25.7-42.1-43.5-59.4C20.4 143.7 0 197.4 0 256c0 58.6 20.4 112.3 54.4 154.7 18.2-17.7 33.2-38 44.3-61l28.8 13.9c-12.9 26.7-30.3 50.3-51.5 70.7 44.5 43.1 105.1 69.7 172 69.7 66.8 0 127.3-26.5 171.9-69.5-21.1-20.4-38.5-43.9-51.4-70.6zm-228.3-32l-30.5-9.8c14.9-46.4 12.7-93.8-.6-134l30.4-10c15 45.6 18 99.9.7 153.8zm216.3-153.4l30.4 10c-13.2 40.1-15.5 87.5-.6 134l-30.5 9.8c-17.3-54-14.3-108.3.7-153.8z"></path></svg>

I'm guessing it has something to do with the relative curve commands, because when I translate all the relative paths to absolute paths (using the handy utility: https://codepen.io/thednp/pen/EgVqLw):

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="baseball-ball" class="svg-inline--fa fa-baseball-ball fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M368.5,363.9L397.3,350C408.40000000000003,372.9,423.3,393.2,441.40000000000003,410.9C475.40000000000003,368.4,495.90000000000003,314.59999999999997,495.90000000000003,255.99999999999997C495.90000000000003,197.49999999999997,475.50000000000006,143.79999999999995,441.70000000000005,101.39999999999998C423.90000000000003,118.69999999999997,409.1,138.49999999999997,398.1,160.89999999999998L369.40000000000003,146.79999999999998C382.20000000000005,120.79999999999998,399.40000000000003,97.79999999999998,420.20000000000005,77.79999999999998C375.6,34.7,315,8,248,8C181.1,8,120.5,34.6,75.9,77.7C96.60000000000001,97.6,113.80000000000001,120.6,126.60000000000001,146.5L97.9,160.6C86.9,138.29999999999998,72.2,118.5,54.400000000000006,101.19999999999999C20.4,143.7,0,197.4,0,256C0,314.6,20.4,368.3,54.4,410.7C72.6,393,87.6,372.7,98.69999999999999,349.7L127.49999999999999,363.59999999999997C114.59999999999998,390.29999999999995,97.19999999999999,413.9,75.99999999999999,434.29999999999995C120.49999999999999,477.4,181.09999999999997,503.99999999999994,248,503.99999999999994C314.8,503.99999999999994,375.3,477.49999999999994,419.9,434.49999999999994C398.79999999999995,414.09999999999997,381.4,390.59999999999997,368.5,363.9ZM140.2,331.9L109.69999999999999,322.09999999999997C124.6,275.7,122.39999999999999,228.29999999999995,109.1,188.09999999999997L139.5,178.09999999999997C154.5,223.69999999999996,157.5,278,140.2,331.9ZM356.5,178.49999999999997L386.9,188.49999999999997C373.7,228.59999999999997,371.4,276,386.29999999999995,322.5L355.79999999999995,332.3C338.49999999999994,278.3,341.49999999999994,224,356.49999999999994,178.5Z"></path></svg>

then it renders correctly (modulo the clipping issue, which is unrelated):

Screen Shot 2019-03-19 at 16 38 18

@marcprux
Copy link
Contributor Author

Actually the problem doesn't seem to be related to relative vs. absolute coordinates, but instead to a lack of padding between some of the numbers. E.g., the circle path part:

c-17.3-54-14.3-108.3.7-153.8

Note the 108.3.7 doesn't have any spaces separating what should be treated as two individual numbers, 108.3 and .7. If I manually add in padding between the numbers, then the image is rendered properly:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="baseball-ball" class="svg-inline--fa fa-baseball-ball fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M368.5 363.9 l28.8-13.9 c11.1 22.9 26 43.2 44.1 60.9 34-42.5 54.5-96.3 54.5-154.9 0-58.5-20.4-112.2-54.2-154.6-17.8 17.3-32.6 37.1-43.6 59.5 l-28.7-14.1 c12.8-26 30-49 50.8-69 C375.6 34.7 315 8 248 8 181.1 8 120.5 34.6 75.9 77.7 c20.7 19.9 37.9 42.9 50.7 68.8 l-28.7 14.1 c-11-22.3-25.7-42.1-43.5-59.4 C20.4 143.7 0 197.4 0 256 c0 58.6 20.4 112.3 54.4 154.7 18.2-17.7 33.2-38 44.3-61 l28.8 13.9 c-12.9 26.7-30.3 50.3-51.5 70.7 44.5 43.1 105.1 69.7 172 69.7 66.8 0 127.3-26.5 171.9-69.5-21.1-20.4-38.5-43.9-51.4-70.6 z m-228.3-32 l-30.5-9.8 c14.9-46.4 12.7-93.8-.6-134 l30.4-10 c15 45.6 18 99.9 .7 153.8 z m216.3-153.4 l30.4 10 c-13.2 40.1-15.5 87.5-.6 134 l-30.5 9.8 c -17.3 -54 -14.3 -108.3 .7 -153.8 z"></path></svg>

@marcprux marcprux changed the title Relative curves are not rendered correctly Path numbers like X.Y.Z should be parsed as "X.Y" and "0.Z" Mar 20, 2019
@marcprux
Copy link
Contributor Author

It looks like this is the same as #43 , which looks like it should be re-opened.

marcprux added a commit to marcprux/SwiftSVG that referenced this issue Mar 20, 2019
eguchi-t pushed a commit to eguchi-t/SwiftSVG that referenced this issue Sep 12, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant