Rounding up coordinates

[kachkaev]

👋 @panr! I understand that you might not have capacity for this project, but want to suggest an small improvement anyway.

Because of how Figma deals with vector coordinates, a lot of them end up having very high precision. This is not needed in practice once the JSON is exported:

It'd be great if there was an option to snap the coordinates to a user-chosen grid, e.g. 1/2, 1/10, 1/20 of a pixel. This can significantly reduce the size of the resulting JSON and improve its compression. If I understand correctly, Figma's fractional coordinates have pretty high entropy so don't gzip well.

I know that it's possible to post-process the JSON but that's an extra step which everyone needs to do on their own. Snapping inside of the plugin feels like the right place.

WDYT?

Happy to give this feature a try if you have capacity to release the plugin afterwards. If you have moved on and you know a better solution for exporting icons, please let me know! Either way, thanks for this neat handy plugin!

[panr]

Hey @kachkaev, great advice! I've just tested the removal of the high precision values in the browser and it seems working well without any visible issues. I need to find out if I can easily update the plugin, since I haven't touched it since the initial upload ;-D

[panr]

@kachkaev after second try... All my tests failed... Losing precision caused issues even on simple icons... I'll try another one soon, but right now I have to refactor most of the code to make it work with up-to-date dependencies and do some cleanup ;-D

[kachkaev]

Got you, thanks for an update! I guess one of the challenges is in making sure that the error does not add up with each joint in the path. Another issue may be to do with tracking overlaps and self-crossing lines. I wonder if these problems are solved already by some third-party libs. Perhaps, Figma exposes some data transform function that can be called?

[panr]

Update: I'm almost done with the rewrite. I basically wrote it again from scratch ;-D

A few more tests and I'll push a PR with new branch so you could test it, and if everything will be fine I'll release v2 ;-)

[panr]

@kachkaev the new branch v2 is up: https://github.com/panr/icon2code/tree/v2

If you would like to test it on your set of icons, feel free to go ahead (you can download the repo and run it localy in Figma via manifest file).

It's still WIP, but I think I won't change the core logic, only some minor tweaks in README, maybe a few more tests etc.

PS: If you have any specific (complex) icon to put into a test case, let me know ;-)

[panr]

Closed by #18

[panr]

Hey, another update. I decided to re-publish the plugin to Figma repository and merge the v2 branch into master. So if you want to test it, you can do it directly in Figma. Let me know if you spot any issues. Thanks for the suggesting the issue, it forced me to revisit the code and improve it (at least I hope for it ;-D)

[kachkaev]

Brilliant, great news! I just tried v2 and UX got noticeably better! I can now generate and copy the JSON multiple times without having to restart the plugin.

The new 'rounding up' option works well for most of the icons. There are several icons in our set that break though. Here is an example:

{
  "mouse-v1": {
    "name": "mouse-v1",
    "paths": [
      {
        "windingRule": "nonzero",
        "data": "M 12.949999809265137 0.8499999046325684 C 12.949999809265137 0.8499999046325684 12.949999809265137 0.7999999802559614 12.949999809265137 0.7699999809265137 C 12.949999809265137 0.7399999815970659 12.949999580159783 0.7100000567734241 12.9399995803833 0.690000057220459 C 12.9399995803833 0.6600000578910112 12.929999122396111 0.6300000138580799 12.919999122619629 0.6100000143051147 C 12.919999122619629 0.580000014975667 12.900000343099236 0.5599999707192183 12.890000343322754 0.5299999713897705 C 12.880000343546271 0.49999997206032276 12.869999427348375 0.48000004701316357 12.84999942779541 0.4500000476837158 C 12.839999428018928 0.4200000483542681 12.820000419393182 0.3999999947845936 12.8100004196167 0.3799999952316284 C 12.790000420063734 0.35999999567866325 12.779999274760485 0.33000006154179573 12.75999927520752 0.31000006198883057 C 12.739999275654554 0.2900000624358654 12.719999808818102 0.26999999955296516 12.699999809265137 0.25 C 12.679999809712172 0.23000000044703484 12.660000342875719 0.21000005677342415 12.640000343322754 0.19000005722045898 C 12.620000343769789 0.17000005766749382 12.5900006480515 0.14999998547136784 12.570000648498535 0.13999998569488525 C 12.55000064894557 0.11999998614192009 12.519999045878649 0.11000002361834049 12.499999046325684 0.10000002384185791 C 12.469999046996236 0.09000002406537533 12.449999121949077 0.07000006176531315 12.419999122619629 0.060000061988830566 C 12.389999123290181 0.050000062212347984 12.369999198243022 0.03999997116625309 12.339999198913574 0.029999971389770508 C 12.309999199584126 0.029999971389770508 12.279999274760485 0.009999990463256836 12.25999927520752 0.009999990463256836 C 12.229999275878072 0.009999990463256836 12.19999935105443 0.009999999776482582 12.179999351501465 0 C 12.11999935284257 0 12.069999273866415 0 12.00999927520752 0 C 11.979999275878072 0 11.94999935105443 -9.313225746154785e-9 11.929999351501465 0.009999990463256836 C 11.899999352172017 0.009999990463256836 11.869999427348375 0.019999971613287926 11.84999942779541 0.029999971389770508 C 11.819999428465962 0.029999971389770508 11.799999503418803 0.050000062212347984 11.769999504089355 0.060000061988830566 C 11.739999504759908 0.07000006176531315 11.719999579712749 0.08000002428889275 11.6899995803833 0.10000002384185791 C 11.659999581053853 0.11000002361834049 11.639999885112047 0.12999998591840267 11.619999885559082 0.13999998569488525 C 11.599999886006117 0.15999998524785042 11.570000190287828 0.17000005766749382 11.550000190734863 0.19000005722045898 C 11.530000191181898 0.21000005677342415 11.510000724345446 0.23000000044703484 11.49000072479248 0.25 C 11.470000725239515 0.26999999955296516 11.44999935105443 0.2900000624358654 11.429999351501465 0.31000006198883057 C 11.4099993519485 0.33000006154179573 11.3900001142174 0.35999999567866325 11.380000114440918 0.3799999952316284 C 11.360000114887953 0.3999999947845936 11.349999198690057 0.43000004813075066 11.339999198913574 0.4500000476837158 C 11.329999199137092 0.470000047236681 11.310000190511346 0.49999997206032276 11.300000190734863 0.5299999713897705 C 11.29000019095838 0.5599999707192183 11.279999503865838 0.580000014975667 11.269999504089355 0.6100000143051147 C 11.269999504089355 0.6400000136345625 11.249999046325684 0.6600000578910112 11.249999046325684 0.690000057220459 C 11.249999046325684 0.7200000565499067 11.24000072479248 0.7499999813735485 11.24000072479248 0.7699999809265137 C 11.24000072479248 0.7999999802559614 11.24000072479248 0.8300001341849566 11.24000072479248 0.8600001335144043 C 11.24000072479248 0.8600001335144043 11.23999959230423 1.4999998807907104 10.9399995803833 2.0999999046325684 C 10.589999586343765 2.7999998927116394 10.009999871253967 3.130000114440918 9.119999885559082 3.130000114440918 C 7.709999918937683 3.130000114440918 6.609999895095825 3.5499998927116394 5.869999885559082 4.389999866485596 C 5.299999892711639 5.029999852180481 5.060000039637089 5.799999833106995 4.960000038146973 6.409999847412109 C 2.2100000381469727 6.459999848157167 0 8.669999599456787 0 11.399999618530273 L 0 16.489999771118164 C 0 19.24999976158142 2.259999990463257 21.489999771118164 5.039999961853027 21.489999771118164 L 6.380000114440918 21.489999771118164 C 9.170000076293945 21.489999771118164 11.419999122619629 19.24999976158142 11.419999122619629 16.489999771118164 L 11.419999122619629 11.399999618530273 C 11.419999122619629 8.759999513626099 9.34999942779541 6.600000083446503 6.729999542236328 6.420000076293945 C 6.799999542534351 6.120000064373016 6.939999356865883 5.78999999165535 7.179999351501465 5.519999980926514 C 7.579999357461929 5.0799999833106995 8.229999899864197 4.849999904632568 9.119999885559082 4.849999904632568 C 10.229999899864197 4.849999904632568 11.140000641345978 4.500000178813934 11.820000648498535 3.820000171661377 C 12.96000063419342 2.6800001859664917 12.999999046325684 1.0599998980760574 12.999999046325684 0.8499999046325684 L 12.949999809265137 0.8499999046325684 Z M 6.609999656677246 11.110000610351562 C 6.609999656677246 11.630000591278076 6.179999828338623 12.049999237060547 5.659999847412109 12.049999237060547 C 5.139999866485596 12.049999237060547 4.710000038146973 11.630000591278076 4.710000038146973 11.110000610351562 L 4.710000038146973 10.170000076293945 C 4.710000038146973 9.650000095367432 5.139999866485596 9.229999542236328 5.659999847412109 9.229999542236328 C 6.179999828338623 9.229999542236328 6.609999656677246 9.650000095367432 6.609999656677246 10.170000076293945 L 6.609999656677246 11.110000610351562 Z"
      }
    ],
    "size": {
      "width": 12.999999046325684,
      "height": 21.489999771118164
    },
    "fill": {
      "rgb": "rgb(0, 0, 0)",
      "hsl": "hsl(0, 0%, 0%)",
      "hex": "#000000ff"
    },
    "viewBox": "0 0 24 24",
    "translate": {
      "x": 5.550000190734863,
      "y": 1.2699999809265137
    }
  },
  "mouse-v2": {
    "name": "mouse-v2",
    "paths": [
      {
        "data": "M 12.949999809265137 0.8499999046325684 C 12.949999809265137 0.8499999046325684 12.949999809265137 0.7999999802559614 12.949999809265137 0.7699999809265137 C 12.949999809265137 0.7399999815970659 12.949999580159783 0.7100000567734241 12.9399995803833 0.690000057220459 C 12.9399995803833 0.6600000578910112 12.929999122396111 0.6300000138580799 12.919999122619629 0.6100000143051147 C 12.919999122619629 0.580000014975667 12.900000343099236 0.5599999707192183 12.890000343322754 0.5299999713897705 C 12.880000343546271 0.49999997206032276 12.869999427348375 0.48000004701316357 12.84999942779541 0.4500000476837158 C 12.839999428018928 0.4200000483542681 12.820000419393182 0.3999999947845936 12.8100004196167 0.3799999952316284 C 12.790000420063734 0.35999999567866325 12.779999274760485 0.33000006154179573 12.75999927520752 0.31000006198883057 C 12.739999275654554 0.2900000624358654 12.719999808818102 0.26999999955296516 12.699999809265137 0.25 C 12.679999809712172 0.23000000044703484 12.660000342875719 0.21000005677342415 12.640000343322754 0.19000005722045898 C 12.620000343769789 0.17000005766749382 12.5900006480515 0.14999998547136784 12.570000648498535 0.13999998569488525 C 12.55000064894557 0.11999998614192009 12.519999045878649 0.11000002361834049 12.499999046325684 0.10000002384185791 C 12.469999046996236 0.09000002406537533 12.449999121949077 0.07000006176531315 12.419999122619629 0.060000061988830566 C 12.389999123290181 0.050000062212347984 12.369999198243022 0.03999997116625309 12.339999198913574 0.029999971389770508 C 12.309999199584126 0.029999971389770508 12.279999274760485 0.009999990463256836 12.25999927520752 0.009999990463256836 C 12.229999275878072 0.009999990463256836 12.19999935105443 0.009999999776482582 12.179999351501465 0 C 12.11999935284257 0 12.069999273866415 0 12.00999927520752 0 C 11.979999275878072 0 11.94999935105443 -9.313225746154785e-9 11.929999351501465 0.009999990463256836 C 11.899999352172017 0.009999990463256836 11.869999427348375 0.019999971613287926 11.84999942779541 0.029999971389770508 C 11.819999428465962 0.029999971389770508 11.799999503418803 0.050000062212347984 11.769999504089355 0.060000061988830566 C 11.739999504759908 0.07000006176531315 11.719999579712749 0.08000002428889275 11.6899995803833 0.10000002384185791 C 11.659999581053853 0.11000002361834049 11.639999885112047 0.12999998591840267 11.619999885559082 0.13999998569488525 C 11.599999886006117 0.15999998524785042 11.570000190287828 0.17000005766749382 11.550000190734863 0.19000005722045898 C 11.530000191181898 0.21000005677342415 11.510000724345446 0.23000000044703484 11.49000072479248 0.25 C 11.470000725239515 0.26999999955296516 11.44999935105443 0.2900000624358654 11.429999351501465 0.31000006198883057 C 11.4099993519485 0.33000006154179573 11.3900001142174 0.35999999567866325 11.380000114440918 0.3799999952316284 C 11.360000114887953 0.3999999947845936 11.349999198690057 0.43000004813075066 11.339999198913574 0.4500000476837158 C 11.329999199137092 0.470000047236681 11.310000190511346 0.49999997206032276 11.300000190734863 0.5299999713897705 C 11.29000019095838 0.5599999707192183 11.279999503865838 0.580000014975667 11.269999504089355 0.6100000143051147 C 11.269999504089355 0.6400000136345625 11.249999046325684 0.6600000578910112 11.249999046325684 0.690000057220459 C 11.249999046325684 0.7200000565499067 11.24000072479248 0.7499999813735485 11.24000072479248 0.7699999809265137 C 11.24000072479248 0.7999999802559614 11.24000072479248 0.8300001341849566 11.24000072479248 0.8600001335144043 C 11.24000072479248 0.8600001335144043 11.23999959230423 1.4999998807907104 10.9399995803833 2.0999999046325684 C 10.589999586343765 2.7999998927116394 10.009999871253967 3.130000114440918 9.119999885559082 3.130000114440918 C 7.709999918937683 3.130000114440918 6.609999895095825 3.5499998927116394 5.869999885559082 4.389999866485596 C 5.299999892711639 5.029999852180481 5.060000039637089 5.799999833106995 4.960000038146973 6.409999847412109 C 2.2100000381469727 6.459999848157167 0 8.669999599456787 0 11.399999618530273 L 0 16.489999771118164 C 0 19.24999976158142 2.259999990463257 21.489999771118164 5.039999961853027 21.489999771118164 L 6.380000114440918 21.489999771118164 C 9.170000076293945 21.489999771118164 11.419999122619629 19.24999976158142 11.419999122619629 16.489999771118164 L 11.419999122619629 11.399999618530273 C 11.419999122619629 8.759999513626099 9.34999942779541 6.600000083446503 6.729999542236328 6.420000076293945 C 6.799999542534351 6.120000064373016 6.939999356865883 5.78999999165535 7.179999351501465 5.519999980926514 C 7.579999357461929 5.0799999833106995 8.229999899864197 4.849999904632568 9.119999885559082 4.849999904632568 C 10.229999899864197 4.849999904632568 11.140000641345978 4.500000178813934 11.820000648498535 3.820000171661377 C 12.96000063419342 2.6800001859664917 12.999999046325684 1.0599998980760574 12.999999046325684 0.8499999046325684 L 12.949999809265137 0.8499999046325684 Z M 6.609999656677246 11.110000610351562 C 6.609999656677246 11.630000591278076 6.179999828338623 12.049999237060547 5.659999847412109 12.049999237060547 C 5.139999866485596 12.049999237060547 4.710000038146973 11.630000591278076 4.710000038146973 11.110000610351562 L 4.710000038146973 10.170000076293945 C 4.710000038146973 9.650000095367432 5.139999866485596 9.229999542236328 5.659999847412109 9.229999542236328 C 6.179999828338623 9.229999542236328 6.609999656677246 9.650000095367432 6.609999656677246 10.170000076293945 L 6.609999656677246 11.110000610351562 Z",
        "windingRule": "nonzero"
      }
    ],
    "size": {
      "width": 12.999999046325684,
      "height": 21.489999771118164
    },
    "fill": {
      "rgb": "rgb(0, 0, 0)",
      "hsl": "hsl(0, 0%, 0%)",
      "hex": "#000000"
    },
    "viewBox": "0 0 24 24",
    "translate": {
      "x": 5.550000190734863,
      "y": 1.2699999809265137
    }
  },
  "mouse-v2-rounded": {
    "name": "mouse-v2-rounded",
    "paths": [
      {
        "data": "M 12.95 0.85 C 12.95 0.85 12.95 0.80 12.95 0.77 C 12.95 0.74 12.95 0.71 12.94 0.69 C 12.94 0.66 12.93 0.63 12.92 0.61 C 12.92 0.58 12.90 0.56 12.89 0.53 C 12.88 0.50 12.87 0.48 12.85 0.45 C 12.84 0.42 12.82 0.40 12.81 0.38 C 12.79 0.36 12.78 0.33 12.76 0.31 C 12.74 0.29 12.72 0.27 12.70 0.25 C 12.68 0.23 12.66 0.21 12.64 0.19 C 12.62 0.17 12.59 0.15 12.57 0.14 C 12.55 0.12 12.52 0.11 12.50 0.10 C 12.47 0.09 12.45 0.07 12.42 0.06 C 12.39 0.05 12.37 0.04 12.34 0.03 C 12.31 0.03 12.28 0.01 12.26 0.01 C 12.23 0.01 12.20 0.01 12.18 0.00 C 12.12 0.00 12.07 0.00 12.01 0.00 C 11.98 0.00 11.95 -9.31e-9.00 11.93 0.01 C 11.90 0.01 11.87 0.02 11.85 0.03 C 11.82 0.03 11.80 0.05 11.77 0.06 C 11.74 0.07 11.72 0.08 11.69 0.10 C 11.66 0.11 11.64 0.13 11.62 0.14 C 11.60 0.16 11.57 0.17 11.55 0.19 C 11.53 0.21 11.51 0.23 11.49 0.25 C 11.47 0.27 11.45 0.29 11.43 0.31 C 11.41 0.33 11.39 0.36 11.38 0.38 C 11.36 0.40 11.35 0.43 11.34 0.45 C 11.33 0.47 11.31 0.50 11.30 0.53 C 11.29 0.56 11.28 0.58 11.27 0.61 C 11.27 0.64 11.25 0.66 11.25 0.69 C 11.25 0.72 11.24 0.75 11.24 0.77 C 11.24 0.80 11.24 0.83 11.24 0.86 C 11.24 0.86 11.24 1.50 10.94 2.10 C 10.59 2.80 10.01 3.13 9.12 3.13 C 7.71 3.13 6.61 3.55 5.87 4.39 C 5.30 5.03 5.06 5.80 4.96 6.41 C 2.21 6.46 0.00 8.67 0.00 11.40 L 0.00 16.49 C 0.00 19.25 2.26 21.49 5.04 21.49 L 6.38 21.49 C 9.17 21.49 11.42 19.25 11.42 16.49 L 11.42 11.40 C 11.42 8.76 9.35 6.60 6.73 6.42 C 6.80 6.12 6.94 5.79 7.18 5.52 C 7.58 5.08 8.23 4.85 9.12 4.85 C 10.23 4.85 11.14 4.50 11.82 3.82 C 12.96 2.68 13.00 1.06 13.00 0.85 L 12.95 0.85 Z M 6.61 11.11 C 6.61 11.63 6.18 12.05 5.66 12.05 C 5.14 12.05 4.71 11.63 4.71 11.11 L 4.71 10.17 C 4.71 9.65 5.14 9.23 5.66 9.23 C 6.18 9.23 6.61 9.65 6.61 10.17 L 6.61 11.11 Z",
        "windingRule": "nonzero",
      }
    ],
    "size": {
      "width": 12.999999046325684,
      "height": 21.489999771118164
    },
    "fill": {
      "rgb": "rgb(0, 0, 0)",
      "hsl": "hsl(0, 0%, 0%)",
      "hex": "#000000ff"
    },
    "viewBox": "0 0 24 24",
    "translate": {
      "x": 5.550000190734863,
      "y": 1.2699999809265137
    }
  }
}

The issue is caused by a number formatted in Scientific notation: -9.313225746154785e-9. Once it is converted to -9.31e-9.00, the browser is failing to parse it. In practice all numbers like N.NNe-M can be replaced with 0 because they are extremely small.

On a somewhat related note, I think that there is scope for a bit more compression. Numbers like 42.00 or 42.10 can be converted to 42 and 42.1 to save a few bytes. This can be quite significant for large collections of icons.

I guess it is also possible to round up translate and size values. WDYT?

---

PS: Good to see "#000000ff" converted to "#000000" which has less redundancy!

[panr]

I'm on it. What I did with the rounding up was too naive and "shallow", and it looks like it needs more work...

[panr]

@kachkaev just updated the fix (🤞) in Figma and on Github. Could you check it?

[kachkaev]

I checked the new version against my team's icons set and could not spot any issues. Great stuff! 👏

WDYT of rounding translate and size as well as removing trailing fractional zeros?

[panr]

I checked the new version against my team's icons set and could not spot any issues. Great stuff! 👏

Great it hear it! 👍

Regarding translate and size and the whole snapping to the grid thing... That's an interesting direction, but I have no knowledge about how it works in Figma and how to get into these settings in the plugin environment, so I would need to do some research. If you have any ideas, let me know.