search

mchoe / SwiftSVG

A simple, performant, and lightweight SVG parser
Other
1.92k stars 229 forks source link

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

Open marcprux opened 5 years ago

marcprux commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

It looks like this is the same as https://github.com/mchoe/SwiftSVG/issues/43 , which looks like it should be re-opened.