Various svgs are broken with reactsketchapp
zaqqaz opened this issue · 4 comments
zaqqaz commented
👋 Hello!
Most of SVG's which I tried to use with react-sketchapp seems broken after a build,
I attached a few examples of svgs:
I used https://react-svgr.com/ to generate react-native version and used it with reactsketchapp.
Results:
I also tried quite a few icons from https://www.flaticon.com/ and in all cases, results were not perfect.
"dependencies": {
"react": "^16.12.0",
"react-primitives": "^0.8.0",
"react-primitives-svg": "^0.0.3",
"react-sketchapp": "^3.1.0",
"react-test-renderer": "^16.12.0"
}
ps. Not sure should this issue be duplicated to https://github.com/Lona/svg-model or https://github.com/fontello/svgpath .
For web and native targets with the same code for svg everything is ok.
mathieudutour commented
I think it's a bug in react-svgr which transforms (in the case of the arrow):
M10.9214286,21.6803419 C11.0785714,21.8307692 11.275,21.9059829 11.4910714,21.9059829 C11.7071429,21.9059829 11.9035714,21.8307692 12.0607143,21.6803419 C12.375,21.3794872 12.375,20.8905983 12.0607143,20.5897436 L2.04285714,11 L12.0607143,1.41025641 C12.375,1.10940171 12.375,0.620512821 12.0607143,0.31965812 C11.7464286,0.0188034188 11.2357143,0.0188034188 10.9214286,0.31965812 L0.314285714,10.4547009 C3.49720253e-15,10.7555556 3.49720253e-15,11.2444444 0.314285714,11.5452991 L10.9214286,21.6803419 L10.9214286,21.6803419 Z
into
M10.921 21.68c.158.15.354.226.57.226a.805.805 0 00.57-.226.749.749 0 000-1.09L2.043 11 12.06 1.41a.749.749 0 000-1.09.832.832 0 00-1.14 0L.314 10.455a.749.749 0 000 1.09L10.921 21.68z
and that's broken.
I'm guessing it tries to minify the path but get it wrong. If I use the original path or the one from svgomg (M11 22h1v-1L2 11 12 1V0h-1L0 10v2l11 10z), it works fine.
zaqqaz commented
@mathieudutour, thank you for a look!
But I'm not sure that react-svgr get it wrong as it works for react-native and react-native-web as well. And I just tried first svg (car), optimized it with svgomg and result far from perfect.
upd:
Moreover, I tried quite a few more svgs from another react-native project, none of complex svgs rendered correctly (some were optimized with svgomg, some with https://kraken.io/, and few I believe just default results from adobe illustrator or sketch) .
I think it worth to re-open this issue if there no objections 😉
(I really want to convert all svgs components to sketch library for GD teams as there are plenty of them with dozen of states, though manual refactoring, to make it compatible with current version of react-skectapp svg parser it's a big overhead)
mathieudutour commented
this:
import * as React from 'react';
import { render, Artboard, Svg } from 'react-sketchapp';
const { Path } = Svg;
const Document = () => (
<Artboard
name="Car"
style={{
width: 192,
height: 152,
}}
>
<Svg width={192} height={152} viewBox="0 0 192 152">
<Path
fill="#067DC3"
d="M181.053644,152 L1.76925097,152 C0.792624435,152 0,151.209496 0,150.235482 C0,149.261468 0.792624435,148.470964 1.76925097,148.470964 L31.219318,148.470964 C29.379297,146.948185 27.9010878,145.007215 26.929769,142.795391 L12.7846075,142.795391 C12.7660304,142.795391 12.745684,142.795391 12.7253376,142.795391 L8.47736603,142.795391 C7.50073949,142.795391 6.70811506,142.004887 6.70811506,141.030873 C6.70811506,140.056859 7.50073949,139.266355 8.47736603,139.266355 L9.61941753,139.266355 L6.79746223,134.600969 L1.01643468,131.88714 C0.395427592,131.595995 0,130.974885 0,130.291134 L0,126.173631 C0,125.548991 0.330849932,124.971112 0.869586852,124.654381 L4.87163255,122.298749 L6.85407826,117.750704 C7.06638838,117.263697 7.48747011,116.897559 8.00055289,116.754633 L21.1965113,113.07826 C21.3053202,113.048263 21.416783,113.027971 21.5291304,113.019149 L66.678646,109.364832 L96.5329869,97.636962 C96.7417585,97.5496184 96.9620302,97.5055054 97.1814173,97.5010941 L123.10979,96.6303044 L123.10979,92.7218969 L119.2024,92.7218969 C118.225773,92.7218969 117.433149,91.9313928 117.433149,90.9573788 C117.433149,89.9833648 118.225773,89.1928607 119.2024,89.1928607 L133.870375,89.1928607 C134.847001,89.1928607 135.639626,89.9833648 135.639626,90.9573788 C135.639626,91.9313928 134.847001,92.7218969 133.870375,92.7218969 L133.136136,92.7218969 L133.136136,96.4767914 L134.214494,96.7150013 C134.241033,96.7202949 134.266687,96.7255884 134.292341,96.7326465 L140.025599,97.9969237 C140.056561,98.0030995 140.087523,98.0101576 140.1176,98.0172157 L145.517354,99.2082654 L151.343497,95.0510607 L151.343497,84.7074557 C151.343497,83.7334417 152.136122,82.9429376 153.112748,82.9429376 L159.674016,82.9429376 C160.650642,82.9429376 161.443266,83.7334417 161.443266,84.7074557 L161.443266,95.5460081 L163.769832,98.3762951 L175.734391,91.3799808 C176.182012,91.1179499 176.720749,91.0650144 177.210831,91.2361726 C177.700029,91.4064486 178.091033,91.782291 178.278574,92.2640044 L179.548896,95.5257161 L187.904184,90.6812317 C188.394267,90.396262 188.990504,90.3653829 189.50801,90.5921235 C190.025516,90.8206286 190.403251,91.2820501 190.522675,91.8343443 L191.960192,98.4804017 C191.986731,98.6030357 192,98.7274342 192,98.852715 L192,107.977038 C192,108.20819 191.954884,108.436695 191.866422,108.650202 L188.974581,115.635929 L189.533664,119.442877 L191.108298,120.340134 C191.803613,120.736268 192.145079,121.549711 191.941615,122.321688 L190.061786,129.435343 C189.977746,129.753838 189.805244,130.042337 189.565511,130.268195 L186.5799,133.080837 C186.403859,133.246702 186.194203,133.375512 185.96597,133.457562 L180.180519,135.539693 C180.158403,135.548516 180.135403,135.556456 180.111518,135.564396 L169.915325,139.235476 C169.106777,142.943611 167.021715,146.183266 164.144913,148.470082 L181.051875,148.470082 C182.028502,148.470082 182.821126,149.260586 182.821126,150.2346 C182.821126,151.208614 182.030271,152 181.053644,152 Z M154.031874,148.470964 C161.043416,148.470964 166.748366,142.781275 166.748366,135.78849 C166.748366,128.795705 161.043416,123.106016 154.031874,123.106016 C147.020333,123.106016 141.315383,128.795705 141.315383,135.78849 C141.315383,137.395084 141.616155,138.932861 142.165508,140.348887 C142.177008,140.375355 142.186739,140.402705 142.197354,140.430055 C144.057722,145.133378 148.661313,148.470964 154.031874,148.470964 Z M50.8208495,148.470964 L143.917066,148.470964 C142.006275,146.951714 140.444911,145.012508 139.374514,142.795391 L71.6122023,142.795391 C71.5909713,142.796274 71.5688557,142.796274 71.5458554,142.795391 L55.1095139,142.795391 C54.1390797,145.007215 52.6599859,146.948185 50.8208495,148.470964 Z M41.0200838,148.470964 C46.199566,148.470964 50.6120779,145.135142 52.2114808,140.504165 C52.220327,140.475932 52.2300579,140.448582 52.2397888,140.421232 C52.6369856,139.242534 52.8519496,137.981786 52.8519496,136.671631 C52.8519496,130.164971 47.5441967,124.871417 41.0200838,124.871417 C34.4959708,124.871417 29.1882179,130.164971 29.1882179,136.671631 C29.1882179,137.971199 29.3996434,139.222242 29.7906478,140.392118 C29.809225,140.438877 29.8251482,140.485637 29.8393023,140.534161 C31.4466668,145.149258 35.8512171,148.470964 41.0200838,148.470964 Z M109.447634,139.266355 L138.153731,139.266355 C137.906921,138.145886 137.776881,136.982186 137.776881,135.78849 C137.776881,131.45748 139.488631,127.518194 142.272548,124.607621 L123.64145,125.01346 L109.447634,139.266355 Z M73.0435263,139.266355 L104.460116,139.266355 L118.543354,125.124625 L70.5294207,126.170984 L73.0435263,139.266355 Z M56.1701798,139.266355 L69.4413314,139.266355 L66.9422644,126.248623 L52.565331,126.561825 C54.9458582,129.26242 56.3904516,132.801161 56.3904516,136.670749 C56.3904516,137.554773 56.3143738,138.422916 56.1701798,139.266355 Z M13.7515032,139.266355 L25.8691031,139.266355 C25.7240245,138.422916 25.6488313,137.555655 25.6488313,136.670749 C25.6488313,128.217825 32.5436024,121.341498 41.0191991,121.341498 C43.6164596,121.341498 46.0651029,121.987312 48.2129736,123.126308 L66.484913,122.728409 L65.4976709,113.000621 L21.9847126,116.523481 L9.76361148,119.928119 L7.88732083,124.230896 C7.73870375,124.572331 7.48570086,124.8573 7.16458181,125.046986 L3.53761732,127.182053 L3.53761732,129.171547 L8.78786957,131.635697 C9.10368087,131.783916 9.36906852,132.022126 9.54953212,132.32033 L13.7515032,139.266355 Z M154.031874,119.57698 C162.848936,119.57698 170.048903,126.61476 170.28156,135.353536 L177.632797,132.706759 L176.856096,125.788966 C176.274013,120.601283 171.924309,116.732577 166.707673,116.732577 C166.657249,116.732577 166.608595,116.732577 166.558171,116.733459 L138.379311,117.133122 C135.736934,117.144592 133.476716,115.133923 133.259099,112.496851 L132.21701,99.8876048 L132.089624,99.8593726 L131.918891,99.8646661 C131.653503,99.9520098 131.349192,99.9749485 131.067881,99.9264242 L131.067881,110.809972 C131.07142,110.972308 131.051958,111.136408 131.008611,111.297861 C130.973226,111.431082 130.921918,111.55901 130.85734,111.678115 L125.823821,121.435018 L147.454684,120.963891 C149.464553,120.07281 151.691155,119.57698 154.031874,119.57698 Z M166.708557,113.202658 C173.732484,113.202658 179.588704,118.411516 180.372483,125.395478 L181.054529,131.474243 L184.41876,130.262902 L186.76921,128.048431 L188.173995,122.731938 L187.031059,122.080831 C186.558669,121.811742 186.23755,121.341498 186.157933,120.805085 L185.406002,115.6871 C185.403348,115.672984 185.401579,115.658868 185.399809,115.644751 L184.787648,111.477842 L177.079022,109.777729 C176.473053,110.941428 175.46458,111.826334 174.087219,111.826334 C172.660318,111.826334 141.243728,111.624297 139.907059,111.615474 C138.949894,111.609299 138.171424,110.845262 138.149308,109.890658 L137.952037,101.151882 L135.831589,100.684285 L136.784331,112.205706 C136.850678,113.000621 137.515916,113.635848 138.328003,113.602322 L166.506863,113.202658 C166.574094,113.203541 166.641326,113.202658 166.708557,113.202658 Z M68.9795569,112.25423 L70.0349151,122.651653 L121.797891,121.524126 L126.314788,112.768587 L76.7607226,115.364193 C75.9769444,115.398601 75.2515516,114.921299 74.9950102,114.176672 C74.7375841,113.432046 75.0065103,112.608016 75.6540561,112.156299 L83.9323814,106.380149 L68.9795569,112.25423 Z M97.8006552,101.010721 L82.7434448,111.516661 L127.52761,109.169852 L127.52761,100.012886 L97.8006552,101.010721 Z M176.333283,105.999896 L186.742671,108.295534 C187.215945,108.39964 187.613142,108.689021 187.859953,109.081626 L188.461498,107.628546 L188.461498,99.0424007 L187.576873,94.9540122 L179.566589,99.5982239 C179.548012,99.608811 179.530319,99.6193981 179.511742,99.6299852 L170.674333,104.754146 L176.26782,105.987544 C176.290821,105.990191 176.312052,105.994602 176.333283,105.999896 Z M141.648002,108.09879 C146.907985,108.132316 162.858667,108.234658 170.270944,108.277888 L165.502813,107.227118 C165.490428,107.224471 165.478043,107.221824 165.465659,107.219178 L141.508231,101.937975 L141.648002,108.09879 Z M150.164292,100.230804 L165.574467,103.628383 L176.451822,97.3219955 L175.732622,95.4736628 L164.255491,102.184125 C163.503559,102.62349 162.544625,102.45145 161.991734,101.78005 L158.3055,97.2955278 C158.046305,96.979679 157.904765,96.584427 157.904765,96.1768233 L157.904765,86.4719738 L154.881999,86.4719738 L154.881999,95.9562585 C154.881999,96.5261979 154.605996,97.0599646 154.142452,97.3908117 L150.164292,100.230804 Z M126.649177,92.7210146 L126.649177,96.5103172 L129.211052,96.4247381 C129.22786,96.4238558 129.243783,96.4238558 129.259707,96.4229736 L129.597634,96.4115042 L129.597634,92.7201323 L126.649177,92.7201323 L126.649177,92.7210146 Z M154.031874,145.989169 C148.392387,145.989169 143.80295,141.412891 143.80295,135.787608 C143.80295,130.162324 148.391502,125.586046 154.031874,125.586046 C159.672246,125.586046 164.260799,130.162324 164.260799,135.787608 C164.260799,141.412891 159.671362,145.989169 154.031874,145.989169 Z M154.031874,129.115965 C150.342986,129.115965 147.341452,132.10947 147.341452,135.78849 C147.341452,139.46751 150.342986,142.461015 154.031874,142.461015 C157.720762,142.461015 160.722297,139.46751 160.722297,135.78849 C160.722297,132.10947 157.720762,129.115965 154.031874,129.115965 Z M41.0200838,145.658322 C36.0511424,145.658322 32.0075193,141.626398 32.0075193,136.669867 C32.0075193,131.713335 36.0502578,127.682294 41.0200838,127.682294 C45.9899097,127.682294 50.0326482,131.714218 50.0326482,136.670749 C50.0326482,141.62728 45.9890251,145.658322 41.0200838,145.658322 Z M41.0200838,131.21133 C38.0017416,131.21133 35.5460213,133.660481 35.5460213,136.670749 C35.5460213,139.681017 38.0017416,142.130168 41.0200838,142.130168 C44.0384259,142.130168 46.4941463,139.681017 46.4941463,136.670749 C46.4941463,133.660481 44.0375413,131.21133 41.0200838,131.21133 Z M22.6313738,131.21133 L12.2007547,131.21133 C11.2241282,131.21133 10.4315037,130.420826 10.4315037,129.446812 L10.4315037,123.810941 C10.4315037,122.836927 11.2241282,122.046423 12.2007547,122.046423 L22.6322584,122.046423 C23.608885,122.046423 24.4015094,122.836927 24.4015094,123.810941 L24.4015094,129.446812 C24.4006248,130.421708 23.608885,131.21133 22.6313738,131.21133 Z M13.9700057,127.682294 L20.8630075,127.682294 L20.8630075,125.575459 L13.9700057,125.575459 L13.9700057,127.682294 Z M63.5603411,99.8531967 L54.6212006,99.8531967 C53.6445741,99.8531967 52.8519496,99.0626926 52.8519496,98.0886786 C52.8519496,97.1146647 53.6445741,96.3241605 54.6212006,96.3241605 L63.5603411,96.3241605 C64.5369677,96.3241605 65.3295921,97.1146647 65.3295921,98.0886786 C65.3295921,99.0626926 64.5378523,99.8531967 63.5603411,99.8531967 Z M109.614829,66.6114403 L96.6621422,66.6114403 C95.6855156,66.6114403 94.8928912,65.8209362 94.8928912,64.8469223 C94.8928912,63.8729083 95.6855156,63.0824042 96.6621422,63.0824042 L109.614829,63.0824042 C110.591455,63.0824042 111.38408,63.8729083 111.38408,64.8469223 C111.38408,65.8209362 110.59234,66.6114403 109.614829,66.6114403 Z M65.9691763,49.4073889 L20.887777,49.4073889 C19.9111504,49.4073889 19.118526,48.6168848 19.118526,47.6428708 C19.118526,46.6688568 19.9111504,45.8783527 20.887777,45.8783527 L65.9691763,45.8783527 C66.9458029,45.8783527 67.7384273,46.6688568 67.7384273,47.6428708 C67.7384273,48.6168848 66.9458029,49.4073889 65.9691763,49.4073889 Z M168.517616,33.0855965 L144.607074,33.0855965 C143.630448,33.0855965 142.837823,32.2950924 142.837823,31.3210784 C142.837823,30.3470645 143.630448,29.5565604 144.607074,29.5565604 L168.517616,29.5565604 C169.494243,29.5565604 170.286867,30.3470645 170.286867,31.3210784 C170.286867,32.2950924 169.494243,33.0855965 168.517616,33.0855965 Z M42.5796785,29.5565604 L33.6396533,29.5565604 C32.6630268,29.5565604 31.8704024,28.7660562 31.8704024,27.7920423 C31.8704024,26.8180283 32.6630268,26.0275242 33.6396533,26.0275242 L42.5796785,26.0275242 C43.556305,26.0275242 44.3489295,26.8180283 44.3489295,27.7920423 C44.3489295,28.7660562 43.5571897,29.5565604 42.5796785,29.5565604 Z M102.874867,27.2335723 L70.5639211,27.2335723 C70.5214591,27.2335723 70.4789971,27.23269 70.4374197,27.229161 C70.3206491,27.2318078 70.2038785,27.2335723 70.087108,27.2335723 C62.5589451,27.2335723 56.4337982,21.1248106 56.4337982,13.6167861 C56.4337982,6.10876164 62.5589451,0 70.087108,0 C70.5922291,0 71.0920425,0.0273500305 71.5830097,0.0811678324 C71.7510885,0.0282322895 71.9297829,0 72.1155542,0 L108.735511,0 C109.712137,0 110.504762,0.790504107 110.504762,1.7645181 C110.504762,2.73853208 109.712137,3.52903619 108.735511,3.52903619 L79.2482895,3.52903619 C81.592547,5.64910468 83.1972577,8.56849987 83.6254164,11.852268 L90.4246479,11.852268 C91.4012744,11.852268 92.1938988,12.6427722 92.1938988,13.6167861 C92.1938988,14.5908001 91.4012744,15.3813042 90.4246479,15.3813042 L83.6254164,15.3813042 C83.1972577,18.6641902 81.592547,21.5844676 79.2474049,23.7045361 L102.873982,23.7045361 C103.850609,23.7045361 104.643233,24.4950402 104.643233,25.4690542 C104.643233,26.4430682 103.851493,27.2335723 102.874867,27.2335723 Z M70.087108,3.52991845 C64.5095443,3.52991845 59.9723002,8.0550251 59.9723002,13.6176684 C59.9723002,19.1803117 64.5095443,23.7054183 70.087108,23.7054183 C75.4612078,23.7054183 79.8692966,19.5041008 80.1833386,14.2220158 C80.1143378,14.0332124 80.0771836,13.8302928 80.0771836,13.6176684 C80.0771836,13.405044 80.1143378,13.2021244 80.1833386,13.013321 C79.868412,7.73123603 75.4603232,3.52991845 70.087108,3.52991845 Z"
/>
</Svg>
</Artboard>
);
export default () => {
render(<Document />, context.document.currentPage());
};eg. the initial path of the car, works fine.
If I try to use svgomg and import the resulting svg in Sketch (without react-sketchapp, just manually importing the svg), it doesn't work. So it's a Sketch bug which can't parse it. Feel free to open a bug report on Sketch, not much we can do here
zaqqaz commented
@mathieudutour, thank you! 👍
I just realized yesterday there was a different issue, as I had 100% height for svg and no height for artboard, I modified manually in sketch height for svg group first (before artboard change), and now spot that sketch reacts strangely on it. (It sets a randomly big value for height and I miss that yesterday).
Though many optimized(with svgomg) svgs looks corrupted in sketch, you're right, seems its sketch issue and there is nothing about react-sketchapp.
For those who experience this issue -> disabling of "Round/rewrite paths" option for svgomg should fix that (but svgs going to be a bit bigger). I'll also recommend contacting sketch customer support if you experience a similar problem.