09-19-2013 05:56 PM
I want to use SVG images in my current project so I could support all possible icon requirements with one set of images so for testing I went with Oxygene Icons from the KDE project.
I got a bit of a surprize when I installed on 10.2
As they say - a picture paints a thousand words so without any more words, some images...
10.1 Screen Grab
10.2 Screen Grab
The images show the problem but I have no idea why this is occurring
09-22-2013 06:16 AM
Wow, the 10.2 vesions actually look pretty slick. Not bad for a bug...
How are you displaying your images? With an <img> tag, or as a div background? Does your .svg have any embedded or linked CSS? What about classes, either on the containing tag or inside the CSS?
Show us some code...
09-23-2013 05:34 AM - edited 09-23-2013 05:34 AM
Straight <img> tags as I have different layouts
4x3 on a Q10, 3x4 Z10/Z30 Portrait and 4x3 with a scrolling div to the right on a Z10/Z30 Landscape
The icons get rendered at sizes specific to the device to fill the available area as much as possible
You'd either need to resize PNGs or have five different sets, neither of which is a great solution
<div id="r1c1" class="rccell" style="width: 173px; height: 173px;"> <img src="svg/pad-ok.svg" class="ok" alt="Select" style="width: 130px; height: 130px;"> </div>
The SVG icons come from the KDE Oxygene set - they're straight SVG files <svg> ... </svg>
i.e. it's exactly what you're write for 'normal; images but resizes as you like which is perfect for catering for the different sized of buttons required on Z10 vs Q10 vs Z30
One downside I've yet to fully explore is that the render time is really bad on 10.1 (good on on 10.2 though)
The desired goal is to cater for any size display without creating new artwork. e.g. If they release a 2560 x 1536 Z10 variant for example apps already caters for the resulution
09-23-2013 06:42 AM
Looks like the white background fill in your SVG isn't being rendered for some reason.
Can you reproduce this in the stock browser with a single icon and post to jsFiddle?
Does your SVG contain or reference any CSS? Animations? Transitions?
09-23-2013 07:45 AM - edited 09-23-2013 07:45 AM
No CSS in the SVG - I did use a transform on the blue up/down/left/right as they're all the right but rotated versions but that's straight CSS e.g.
I just switched to a set of big PNG icons and everything is normal (of course)
Looks like 10.1 doesn't like SVG too much as the PNG version loads instantly (my 10.1 Dev-C was taking about 4 seconds while the 10.2 Dev-C is a lot faster with SVGs)
The load times on 10.1 mean I'll have to ditch SVG for the moment (sob)
A good idea would probably be to write an extension that renders a PNG version of an SVG and saves it to the file-system as that would overcome the rendering issues thereby making apps built for any size possible.
09-23-2013 08:36 AM
The most straightforward strategy would be to render the .svg to a <canvas> and save that to a .png. That might cause some CORS issues though, as the canvas would probably be marked as dirty by WebKit's overzealous CORS management.
09-24-2013 01:45 PM
I asked around and it was suggested that WebKit has various little issues with SVG and this might be one of them. You could submit an issue to issue tracker and that would help us get the Web team to take a look.
That said, I agree with Inovatology - that is definitely one of the nicer looking bugs I've seen.