SVG logo not readable with page styles turned off

RESOLVED INVALID

Status

()

Core
SVG
--
major
RESOLVED INVALID
8 years ago
8 years ago

People

(Reporter: beta, Unassigned)

Tracking

Trunk
x86
All
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(4 attachments)

(Reporter)

Description

8 years ago
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.
(Reporter)

Comment 1

8 years ago
Created attachment 485740 [details]
Appearance of SVG with page style
(Reporter)

Comment 2

8 years ago
Created attachment 485741 [details]
Appearance of SVG with no page style

Attached screenshots of both on & off.

Updated

8 years ago
Component: General → SVG
Product: Firefox → Core
QA Contact: general → general
Version: unspecified → Trunk
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"
Status: UNCONFIRMED → RESOLVED
Last Resolved: 8 years ago
Resolution: --- → INVALID
(Reporter)

Comment 4

8 years ago
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.
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 8 years ago8 years ago
Resolution: --- → INVALID
(Reporter)

Comment 6

8 years ago
So, your engine is broken?
No, your expectations are of what's supposed to happen are.
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
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.
(Reporter)

Comment 10

8 years ago
(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?
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.
(Reporter)

Comment 12

8 years ago
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.
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?
(Reporter)

Comment 14

8 years ago
(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.
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.)
(Reporter)

Comment 16

8 years ago
Created attachment 486127 [details]
Appearance of SVG with no page style

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

Comment 17

8 years ago
Created attachment 486129 [details]
Appearance of SVG with no page style in Opera

Opera showing the first example correctly, the reason for this bug.
(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.
(Reporter)

Comment 19

8 years ago
(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.
You need to log in before you can comment on or make changes to this bug.