SVG not rendering good on Safari

[reinvanleirsberghe]

[shivam1410]

@reinvanleirsberghe maybe you can help me out in this.

[reinvanleirsberghe]

Already searched on it for a while, but no result yet :(

[shivam1410]

Safari renders SVG based on coordinates, Chrome renders vectors optically.
@reinvanleirsberghe I would suggest you go through this article https://opticalcortex.com/svg-rendering-in-browsers/

[shivam1410]

hey @step4 can you do something about this issue?

[step4]

I can try. But I don't have a mac aat the moment at home, so I will have to get a test device at work.

[shivam1410]

Hey @step4 have you tested this commit, if its working on other browsers as well?

[step4]

@shivam1410
So it's working in alle major browsers during the generator.

Problem is when you try to download the svg the wrong location will be saved.
So I will delete the Pull Request and check that too

[step4]

It seems to be a known bug in safari which is patched and not shipped yet or something:
https://bugs.webkit.org/show_bug.cgi?id=189499

so the problem is the <base href="/"> in the index.html file which Angular needs for the routing.

Safari parses the url(#) in the SVG based on the base href, which is wrong.

Changing the base tag could break the Angular routing, so I think a platform specific solution should work like:
if(safari){fixUrlAttributes()}

what do you think?

[shivam1410]

@step4
changing the base tag would definitely break the routing. You can try to write separate line of code for SVG generator for safari. But in my opinion, there must be a single generalized solution that will allow the generator to work on every platform.