Error while importing custom SVG

Maddoc42 / Android-Material-Icon-Generator

Android icons with looooong material shadows!

https://android-material-icon-generator.bitdroid.de/

Other

770 stars 71 forks source link

Error while importing custom SVG #18

Closed tuarrep closed 7 years ago

tuarrep commented 7 years ago

I encountered an error while importing a SVG file from my hard drive. Here some technical details :

SGV file downloaded here https://thenounproject.com/search/?q=remote&i=378117 (it's under licence I you need it I can send it to you privately)
- Tested on Chromium 55 and Firefox 45
- Error in console Chrome
```
Imported svg data: Group @1
Uncaught Error: TypeError: Cannot read property '_visited' of null
at o (vendor.js:7)
at XMLHttpRequest.a (vendor.js:7)
at XMLHttpRequest.e.onload (vendor.js:7)
```
- Error in console (Firefox)
```
Type Error: a is null
```
On the site infinite loading

Maddoc42 commented 7 years ago

Hey @mafzst, sorry for your troubles and thanks for reporting this!

This seems to be a known issue with paper.js. It's fixed on their develop branch, which I have now deployed here. That seems to resolve the issue with some of the default icons. Fingers crossed :crossed_fingers:

Let me know if that works for you! :rocket:

tuarrep commented 7 years ago

Thanks for your reply, Unfortunately it still not working. Another error this time:

Uncaught Error: TypeError: Cannot read property 'push' of undefined
    at o (vendor.js:8)
    at XMLHttpRequest.a (vendor.js:8)
    at XMLHttpRequest.i.onload (vendor.js:7)

Maddoc42 commented 7 years ago

Argh, there seem to be a couple of things going wrong here :see_no_evil:

I managed to fix a couple of them, now the icon loads and generates a valid shadow, however with a small offset. So far not sure what about the icon causes the shadow to shift.

For future references, here is a 'minimal' SVG file which displays this behavior:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
  <path d="M31.358,30.64c-0.935,0.252-1.489,1.212-1.239,2.148c0.251,0.933,1.213,1.489,2.147,1.239 c0.936-0.252,1.49-1.213,1.239-2.147C33.256,30.943,32.294,30.39,31.358,30.64z" />
  <circle cx="68.141" cy="32.335" r="1.754" />
</svg>

Maddoc42 commented 7 years ago

Yeah, finally managed to resolve this :muscle: seems like paper.js imports the SVG bounding box as an object, causing the original path to have different dimensions than the one visible later, which in turn shifts the shadow. Feel free to reopen if there is still a problem :)

icon