Commons:Graphics village pump/January 2015

Preview broken after using path/circle styles?

Tracked in Phabricator
Task T43423

Today I uploaded a new version of File:Timeline of web browsers.svg, replacing most inline styles (on line, circle, path, and use elements) with general styles. This apparently breaks the PNG preview of the file. The SVG itself works as expected in all tested browsers (most recent versions of Opera, Chrome, Firefox and IE, all on Windows 10 TP). Is this a known bug or did I do something wrong with the file? Any help is appreciated! -- Spinal83 (talk) 12:40, 4 January 2015 (UTC)

Yes, unfortunately CSS child selectors are not supported. See Librsvg bugs #CSS inheritance ↔ User: Perhelion (Commons: = crap?)  14:28, 4 January 2015 (UTC)

Okay, that's too bad :( Thanks for your answer! Spinal83 (talk) 15:41, 4 January 2015 (UTC)

Did I over-optimize...

...these images:  ? They show fine in my browsers, but have zooming issues in iOS (when used in list-style-image), and after optimization, they appear blank in Inkscape. -- [[User:Edokter]] {{talk}} 19:59, 18 January 2015 (UTC)

@Edokter Not really, you used uncommon path arc syntax. Which tool you used? It can't be Inkscape. The first problem is you used an starting number as id name, which is not allowed, but this is not the problem here. The problem seems that you used two not default arc commands "large-arc-flag" and "sweep-flag" on an useless exception, where this are 1 1 is the same as 0 0 (because this syntax do exact an semicircle). This seems to corrupt Inkscape, which could be reported as bug (I'm not sure this is a bug).[1][2] PS: I simply propose to use the circle element for this. The newest Inkscape (pre release) has native support for this. ↔ User: Perhelion (Commons: = crap?)  00:07, 21 January 2015 (UTC)

While using the <circle> element would certainly be simpler, the a arc commands are not a problem by themselves; Inkscape converts them to Bezier curves that are precise enough to not noticably differ from exact arcs in most cases. What does cause Inkscape to not render the circle in both files is that there is no space or comma separating the large-arc and sweep flags from a following negative coordinate:

m4.820297 5.8103962a2.1173267 2.1173267 0 1 1-4.23465347 0 2.1173267 2.1173267 0 1 1 4.23465347 0z

m4.9554458 6.0806932a2.2074258 2.2074258 0 1 1-4.4148517 0 2.2074258 2.2074258 0 1 1 4.4148517 0z

This is the same Inkscape bug I noticed here. SiBr₄ (talk) 09:22, 21 January 2015 (UTC)

Indeed, I'v not tested my note :-o (it was very late), this Inkscape bug is reported here. ↔ User: Perhelion (Commons: = crap?)  18:04, 21 January 2015 (UTC)

Thanks for the comments, though most of it goes beyond my grasp. I initially crated the 'circle' by drawing an elipse, then ctrl-clicked to make it a circle. I then ran it through SVG editor to optimize, and after that I manually removed the group tag that only had a translate(0,-3). But since I only need a circle and a gradient, I went all bare-hands, looked up the syntax and hand-edited from sratch. They are both showing in Inkscape and really small to boot. I hope the iOS zoom problem is also solved. -- [[User:Edokter]] {{talk}} 21:42, 21 January 2015 (UTC)