Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

10.2 messing up SVG colours

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.1.png

 

10.2 Screen Grab

 

10.2.png

 

 

The images show the problem but I have no idea why this is occurring

 




Click the like button if you find my posts useful!
Developer
Posts: 1,280
Registered: ‎03-03-2011
My Device: Playbook, Z10, Q10, Z30 with Files & Folders and Orbit of course
My Carrier: Vodafone

Re: 10.2 messing up SVG colours

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...

Files & Folders, the unified file & cloud manager for PlayBook and BB10 with SkyDrive, SugarSync, Box, Dropbox, Google Drive, Google Docs. Free 3-day trial! - Jon Webb - Innovatology - Utrecht, Netherlands
Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: 10.2 messing up SVG colours

[ Edited ]

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




Click the like button if you find my posts useful!
Developer
Posts: 1,280
Registered: ‎03-03-2011
My Device: Playbook, Z10, Q10, Z30 with Files & Folders and Orbit of course
My Carrier: Vodafone

Re: 10.2 messing up SVG colours

 

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?

Files & Folders, the unified file & cloud manager for PlayBook and BB10 with SkyDrive, SugarSync, Box, Dropbox, Google Drive, Google Docs. Free 3-day trial! - Jon Webb - Innovatology - Utrecht, Netherlands
Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: 10.2 messing up SVG colours

[ Edited ]

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.

 

.up {
    -webkit-transform: matrix(0,-1,1,0,0,0);
    }

 

http://jsfiddle.net/peardox/Z7PSR/1/

 

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.

 




Click the like button if you find my posts useful!
Developer
Posts: 1,280
Registered: ‎03-03-2011
My Device: Playbook, Z10, Q10, Z30 with Files & Folders and Orbit of course
My Carrier: Vodafone

Re: 10.2 messing up SVG colours

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.

Files & Folders, the unified file & cloud manager for PlayBook and BB10 with SkyDrive, SugarSync, Box, Dropbox, Google Drive, Google Docs. Free 3-day trial! - Jon Webb - Innovatology - Utrecht, Netherlands
Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: 10.2 messing up SVG colours

Yeah, but 10.2 would reneder them to the canvas without the white background again Smiley Happy




Click the like button if you find my posts useful!
Retired
Posts: 856
Registered: ‎07-15-2008
My Device: Passport
My Carrier: Bell

Re: 10.2 messing up SVG colours

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. 

Tim Windsor
Open Source Technical Lead