Remote svg improperly rendered
demfabris opened this issue · 20 comments
I don't think there's much to say about it.
Am i completely missing something here?
Here is the code <SVG src={`${cdn}/icons/${icon}`} />
Here is how it looks
Here is how it looks using regular img tag:
When i inspect these elements they look completely fine. The whole svg source is correct.
I tried filling colors, fitting the objects but no luck.
hey @fabricio7p
It's impossible to know what's happening without inspecting the file, can you share it?
My best guess is that it has some CSS?
I have the same issue. If I use an img tag it renders it correctly. If not, it looks messed up. I tried the same svg on an online tool, this: https://www.rapidtables.com/web/tools/svg-viewer-editor.html and it looks perfectly fine. Therefore, something happens with the react-inlinesvg 🤔
I am working with the latest Chrome browser, so I guess it should not be the browser. Another thing that I noticed is that I have so far used two icons. One is rendering properly, the other not!! So, sth in that svg is failing, but not sure what.
Ahh, so I played around a bit with that svg. There are some g tags that position it inside some boxes with shadows etc that break. But, I guess that should not break the svg.
Yeah i'm pretty sure it's lib's issue. I've tried it into clean html document.
Are you intrested in taking a look at these problematic files? @gilbarbara
@GeoDoo @fabricio7p
Without inspecting the affected files, it's impossible to know what's happening...
The files are converted to React components using DOMParser and I've tested with over 1000 files, but some apps add weird artifacts when exporting to SVG, so that might cause some issues.
Sorry, I cannot provide any files, since this is company's stuff I am working with at the moment. Also, I used an img tag as a temp solution for that icon. But I will be following the thread if you think I can help out 😀
Also, to add to the title my case is not with a remote url but with local svg!
PS: In the meantime even Google crashed man!! 💥
@fabricio7p
The space between the icon and text is configured in the SVG or are you using margin?
The markup is really weird, as it references paths that don't exist and uses a group to move the icon 1000px to right/bottom and another group inside it that revert that.
Anyway, I couldn't load the remote file as it lacks the Access-Control-Allow-Origin header, so CORS blocks it. I copied the markup to a local file and it renders properly.
https://codesandbox.io/s/react-inlinesvg-test-cg9g1
Can you reproduce the behavior you encountered in your app in a sandbox?
This package is only necessary if you need to modify the markup and/or style it with CSS.
If you just need to render an image, it just adds overhead to bundle load and size.
An <img /> tag will be good enough for these cases.
The markup is really weird, as it references paths that don't exist and uses a group to move the icon 1000px to right/bottom and another group inside it that revert that.
Sorry these assets are handmade by someone else, i don't have a clue about the implementation.
Okay so i think i found half of the problem.
If i attempt to render it with a absolute href it does fully render:
<SVG src="https://fullpath/to/my/asset.svg />
Which is not ideal because i need this source href to be defined on the go...
Anyhow, it does still some wierd scaling?
This package is only necessary if you need to modify the markup and/or style it with CSS.
If you just need to render an image, it just adds overhead to bundle load and size.
Yes i need to change colors on demand
@fabricio7p
So, it's not a remote file that you are trying to load? :P
Are you using flexbox to layout these elements? Probably that...
It is a remote file!
Here is that initial problematic code:
<SVG src={`${cdn}/icons/${icon}`} />
Yes i am using flexbox but don't you think this is a bug?
I mean, this render problem only occurs if i use a template string to set the source on the go. If i hardcode the source href it renders fine!
@fabricio7p
I don't think it is a bug with this library...
It makes no sense that it works with a hardcoded URL and not with a dynamic one.
Unless you publish a sandbox reproducing the bug it might be something that only happens in your app.
Anyway, flexbox will squash the elements to fit. You can try to set a flex: 1; to the icon. Or flex-basis.
@fabricio7p
What is your CDN URL? Using the S3 link that you posted triggers a CORS error but it is required for this library to work properly.
https://lully-test-app.s3-sa-east-1.amazonaws.com/v1_lully/
Don't know why this is happening to you, i did configured CORS in this bucket, hense i'm being able to load them in my localy running application
btw: i'm trying to reproduce on sandbox, please hold on
Update from my side: I got the svgs from a designer who exported them from Sketch. The code looks sh**.
I ran them through https://github.com/svg/svgo and now the svg is rendering ok!! Go figure!
Try with that tool @fabrizio7p
Yeah, SVG is markup after all, and a bad element can cause a lot of trouble.
I don't blame Sketch per se, you just need to configure it to not include crap.
@fabricio7p
Ahh, I see, it's just a bucket then. I got confused when you mentioned CDN.
Okay, update..
I could NOT reproduce the bug and the issue was solved by contacting the author to remake the files. Aparently the problematic files were grouped with a 'clip' method. Not sure what that means.
Anyhow, this still feels wierd to me as they used to work with a hardcoded source url... oh well..
I'll leave here the specs of the project i was working on just in case case anyone has this issue again.
Preact, Preact/compat
i was trying to map over an array of urls which originated from a fetch request to dynamic render the icons
@fabricio7p
SVG is code after all, and code can have bugs.
The clipPath element (or mask) are used to restrict what is rendered. So if anything falls outside, it won't be shown.
That's probably why you were getting "clipped" elements.
Good luck