Firefox SVG Matrix scale problems

General discussions about Inkscape.
SwineDK
Posts: 10
Joined: Thu Jan 16, 2014 12:56 am

Firefox SVG Matrix scale problems

Postby SwineDK » Sat Feb 08, 2014 12:11 am

Hi y'all,

I am getting a somewhat odd result with an SVG file and I can only reproduce the "bug" in Firefox (v27, current latest stable version).
I couldn't find anything on the great internet, that would suggest that Firefox got any known bugs when using a matrix(...) in the transform attribute of a path. But that doesn't mean that there are no bugs :-)

Anyway, I was wondering if somebody had the expertise to take a look at the file and tell me what is wrong? :-)
The file in question can be found on http://swine.dk/wp-content/uploads/2014/02/europe_optimized.svg
ignore that links don't work in the SVG image. It is meant for a different site, which is not public yet.

It is a version of a file, that works correctly in Firefox. It can be found here: http://commons.wikimedia.org/wiki/File:Blank_Map_of_Europe_-w_boundaries.svg.

I have edited the file with Inkscape - added some css-classes and clipped the viewport - and saved it as "optimized SVG".
If you need any information, which I haven't supplied already, don't hessitate to write :-)

I am quite new to creating SVG files, so it could just be that I am missing something important, since the original works perfectly.

Also, If this should have been posted in a different forum, please do say so :-)

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Firefox SVG Matrix scale problems

Postby Lazur » Sat Feb 08, 2014 3:13 am

Hi.

Your svg contains too much clipping that firefox couldn't bare with.
With other svg-s, that browser is the only one producing issues so it's not just the svg's fault.

Here is a version that displays better:
SVG Image
Displays the hover over right in chrome with the links, not in firefox.

Clippings were removed with many unnecessary parts too; objects were converted to paths.
Some notes:
the document's height is not having an integer pixel size.
"Something is rotten in the state of Denmark." -The paths are way off at Helsingør. There are many inaccurate parts, maybe that's the largest.
Portugal is not having a link while having a white fill as the other countries that have.
The fill with alpha values is not a good solution, as it can produce what's appearing at Ceuta.

SwineDK
Posts: 10
Joined: Thu Jan 16, 2014 12:56 am

Re: Firefox SVG Matrix scale problems

Postby SwineDK » Mon Feb 10, 2014 6:43 pm

Hi Lazur,

Thank you for helping out and confirming the issue with Firefox!
Wow, you almost removed half the file-size. Weird that there was too much clipping. I just used Inkscape to make the clipping, but I guess that Inkscape isn't all ready to do this "cleanup" by itself.

I will take a look at Helsingør.. Didn't notice that myself. And I will examine what other parts are not accurate.
I just assumed that a europe-map from wikimedia commons was all good.. Guess not :-)

The reason that Portugal don't have a link, is simply that I haven't inserted it yet, but thanks for noticing it! :-)
Ceuta!? Damn, you have really studied this map! But you are absolutely correct. I will find a better solution to it :-)

For reference, if you could put it in a few words, did you use any tools or ressources other than Inkscape or was it just pure experience?
I am relatively new to SVG and I would like to learn how to understand and debug these problems myself :-)

Edit:
As you said, links don't hover in Firefox anymore. Well.. actually the links don't work at all anymore in Firefox!
According to https://developer.mozilla.org/en-US/docs/SVG_in_Firefox, for hyperlinks:
Only xlink:href, xlink:show, xlink:target and xlink:title attributes implemented.

Meaning that all the transform attributes, that is now inserted to links, breaks the functionality in Firefox!
Why Mozilla have marked the implementation with a green color, as in "done", is beyond me..!

Was there a reason for doing this in the first place, and is there an easy way to revert that part, without breaking anything else?

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Firefox SVG Matrix scale problems

Postby Lazur » Tue Feb 11, 2014 1:42 am

Hi!

It was experience with inkscape, couldn't do that with only a notepad.
Only with the links I wasn't sure. If it was saved as plain svg, the hover-over red colouring was removed, so had to open the svg with a text editor too and save frequently.
It told me it was made with coreldraw, and the elements were not organised in a clean way, after re-saving with inkscape it got better.
In inkscape, changed to outline display mode (Ctrl+5 twice on the numpad) and saw displaying issues with the clipping.
Clipped area is displayed with green, and with zooming in/out, moving the cursor, random parts appeared.
Maybe it's just the renderer used that is improved in the current development build.
(Amother example that works this buggy is if you convert a clipped group to a pattern.)
But that really wasn't necessary, with the image's borders clipping off those parts already.
So removed all the clipping, and converted objects to paths -the original contained polygons too, that you cannot draw with inkscape as far as I know.
Had to keep an eye to the xml editor for that (Shift+Ctrl+X), and the indicator line at the bottom.

The colour with alpha is causing problems mostly with printing, but in this case. objects above eachother, it can mess things up.

Tried to change the viewBow to the page borders with text editor, but it messed up the display through browsers.
Guessing it was because the transformations being used.
But if those transformations being applied to the objects, their use could be avoided, and maybe firefox could display it then in it's fullness? Well that's what the title says, even other things were messing it up for rendering there.

Not sure how to do that yet though. And, to do so, the final image size should be set. The current size seems to be random for displaying on screen.

SwineDK
Posts: 10
Joined: Thu Jan 16, 2014 12:56 am

Re: Firefox SVG Matrix scale problems

Postby SwineDK » Tue Feb 11, 2014 5:59 pm

Lazur,

Thank you for the rundown :-) It will definitely be useful later!

I have now written to the Mozilla SVG team, to see if they can figure out, what is wrong with the transform attribute on links and if they can confirm it is a bug or not.

SwineDK
Posts: 10
Joined: Thu Jan 16, 2014 12:56 am

Re: Firefox SVG Matrix scale problems

Postby SwineDK » Tue Feb 18, 2014 11:56 pm

I have now found out that since Lazur cleaned the SVG from a lot of clip-paths, the map didn't work correctly in Firefox.
Links and mouseover effects didn't work.

I found the problem was that although clip-paths were removed, the references to the clip-paths weren't removed. Firefox couldn't manage this and links broke.

As soon as I removed a reference to a clip-path, the attribute clip-path="...", the link on that element worked correctly, so it was easy to test.

I hope this will help others.


Return to “General Discussions”