606977 - SVG logo not readable with page styles turned off

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[John Drinkwater (:beta)]

User-Agent:       Mozilla/5.0 (X11; Linux i686; rv:2.0b8pre) Gecko/20101023 Firefox/4.0b8pre
Build Identifier: Mozilla/5.0 (X11; Linux i686; rv:2.0b8pre) Gecko/20101023 Firefox/4.0b8pre

My website has embedded SVG images (in HTML5) for licence information, but with Page Styles turned off, Firefox is converting the image to B&W and only using the outline of the shape.

Since it is a Creative Commons logo, with two Cs surrounded by a circle, the result is a black circle.

Reproducible: Always

Steps to Reproduce:
1. Load URL
2. Turn off page styles
3.
Actual Results:  
CC Logo is a black circle.

Expected Results:  
CC Logo looks as normal.

Comment 1

[John Drinkwater (:beta)]

Attachment: Appearance of SVG with page style

Comment 2

[John Drinkwater (:beta)]

Attachment: Appearance of SVG with no page style

Attached screenshots of both on & off.

Comment 3

[Robert Longson [:longsonr]]

That's not what's happening. fill="black" and stroke="white" are styles. If you turn styles off then you get the default which is fill="black" and stroke="none"

Comment 4

[John Drinkwater (:beta)]

But it is what is happening…
I’m not choosing to turn off SVG appearance, but *page* style. As in CSS.

As a developer, I don’t expect page style to affect fill="white", I would however expect it to disable style="", but my SVG is not using those.
Otherwise, this is going to remove all colours from all drawings…

Bitmap images aren’t affected by page style changes, so I expect the same for SVGs.

Comment 5

[Daniel Holbert [:dholbert]]

For SVG, presentational attributes like "fill" and "stroke" are actually applied using CSS, under the hood.  So disabling CSS disables the means of applying those attributes.

Comment 6

[John Drinkwater (:beta)]

So, your engine is broken?

Comment 7

[Robert Longson [:longsonr]]

No, your expectations are of what's supposed to happen are.

Comment 8

[Daniel Holbert [:dholbert]]

John, see in particular this chunk of the spec:
=========
For each styling property defined in this specification (see Property Index), there is a corresponding XML attribute (the presentation attribute) with the same name that is available on all relevant SVG elements. For example, SVG has a ‘fill’ property that defines how to paint the interior of a shape. There is a corresponding presentation attribute with the same name (i.e., ‘fill’) that can be used to specify a value for the ‘fill’ property on a given element.
[...]
For user agents that support CSS, the presentation attributes must be translated to corresponding CSS style rules
=========
http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes

Comment 9

[Robert Longson [:longsonr]]

And if you turn off overriding the styles in the document you get the defaults: http://www.w3.org/TR/SVG/painting.html#FillProperty and http://www.w3.org/TR/SVG/painting.html#StrokeProperty i.e. black everywhere.

Comment 10

[John Drinkwater (:beta)]

(In reply to comment #7)
> No, your expectations are of what's supposed to happen are.

They may have been and yet I still feel this behaviour is wrong.

(In reply to comment #9)
> http://www.w3.org/TR/SVG/painting.html#FillProperty and
> http://www.w3.org/TR/SVG/painting.html#StrokeProperty i.e. black everywhere.

I know about defaults.

(In reply to comment #8)
> =========
> For each styling property defined in this specification (see Property Index),
> there is a corresponding XML attribute (the presentation attribute) with the
> same name that is available on all relevant SVG elements. For example, SVG has
> a ‘fill’ property that defines how to paint the interior of a shape. There is
> a corresponding presentation attribute with the same name (i.e., ‘fill’) that
> can be used to specify a value for the ‘fill’ property on a given element.

From my reading of this: i’m using the fill="" property, not the style="fill" presentation attribute. Why is disabling the presentation attributes (which I am not using) affecting my properties?

Comment 11

[Daniel Holbert [:dholbert]]

You've got the "attribute" vs. "property" terminology backwards in comment 10.

"property" is a CSS term.  <rect style="fill: red"> uses the fill *property*.
"attribute" is an XML term. <rect fill="red"> uses the fill *attribute*.

So you're using an attribute.  In general, attributes don't rely on CSS being enabled, but the final chunk I quoted in Comment 8 specifies that a particular set of SVG attributes (including "fill") must be translated into style rules.

Comment 12

[John Drinkwater (:beta)]

So if i can’t have the image rendered correctly, can I (ab)use switch to make it show my current foreignObject text instead? atm, IE has more usability with page styles off.

Comment 13

[Robert Longson [:longsonr]]

You can hae the image rendered correctly. All you have to do is enable page styles which is the default. Alternatively you could recode the image so that it displays by drawing just with black polylines/polygons.

foreignObject is supported as is switch. You would be better off in a newsgroup for discussions of how to do things e.g. the yahoo SVG developers newsgroup.

Are you talking about IE9 with integrated SVG or using IE6,7 or 8 with a plug-in?

Comment 14

[John Drinkwater (:beta)]

(In reply to comment #13)
> You can hae the image rendered correctly. All you have to do is enable page
> styles which is the default. Alternatively you could recode the image so that
> it displays by drawing just with black polylines/polygons.

If people view my site with page styles off (certainly not uncommon), they don’t see the licence of the content. That’s important to me.

I have added more test cases to the URL. 
1st, Original
2nd, styles moved from fill="" to style="fill:"
3rd, a path redesign that didn’t work - Inkscape didn’t produce an object that supported Firefox dropping the fill-rule.
4th, a path with all points in the correct order so inherited fill-rule is ok.

Getting to №4 is more work than some people are going to go to… 

Current behaviour in Opera 11 beta is to draw №1 & №4 correctly. Firefox draws №4 correctly. 
I imagine if 3 had fill-rule in an attribute, Opera would draw it aswell.

I’m happy Firefox is following the SVG spec, but is this behaviour as intended? Opera is only ignoring style="", and imo, it has better output.

Comment 15

[Daniel Holbert [:dholbert]]

So what you're looking for is a "donut" shape, drawn only using paths, without the benefit of being able to modify style (e.g. the fill-rule property).

If you're willing to hand-edit some SVG, the third example here should be helpful to you, since it's got the "donut" shape that you're looking for:
http://www.w3.org/TR/SVG11/images/painting/fillrule-nonzero.svg

(That donut is part of a demo for the "fill-rule" CSS property, but it uses the default fill-rule value, so it renders the same with & without style.)

Comment 16

[John Drinkwater (:beta)]

Attachment: Appearance of SVG with no page style

I have the doughnut shape already, I mentioned example 4 has it correctly ordered.

Comment 17

[John Drinkwater (:beta)]

Attachment: Appearance of SVG with no page style in Opera

Opera showing the first example correctly, the reason for this bug.

Comment 18

[Daniel Holbert [:dholbert]]

(In reply to comment #16)
> I have the doughnut shape already, I mentioned example 4 has it correctly
> ordered.

Ah, sorry -- I overlooked that chunk of comment 14.

(In reply to comment #14)
> I’m happy Firefox is following the SVG spec, but is this behaviour as intended?
> Opera is only ignoring style="", and imo, it has better output.

I believe this behavior is currently "as intended".  But I agree that Opera & IE's behavior could be considered more intuitive, from an author's perspective, so I've filed Bug 607441 on potentially changing to match their behavior.

I think this bug here is still INVALID (not a bug) for our current implementation, but if we end up acting on Bug 607441, the new behavior will match what you're looking for here.

Comment 19

[John Drinkwater (:beta)]

(In reply to comment #18)
> Ah, sorry -- I overlooked that chunk of comment 14.

No worries

> (In reply to comment #14)
> > I’m happy Firefox is following the SVG spec, but is this behaviour as intended?
> > Opera is only ignoring style="", and imo, it has better output.
> 
> I believe this behavior is currently "as intended".  But I agree that Opera &
> IE's behavior could be considered more intuitive, from an author's perspective,
> so I've filed Bug 607441 on potentially changing to match their behavior.
> 
> I think this bug here is still INVALID (not a bug) for our current
> implementation, but if we end up acting on Bug 607441, the new behavior will
> match what you're looking for here.

That’s all I ask for, many thanks.