SVG: Text rendered to big in Firefox
Wulf Berschin
I'm using Firefox 2.0.0.12 an I was wondering why SVGs exported by Visio
are not displayed correctly (text rendered to big); Since Inkscape,
Illustrator and Adobe SVG displayed these SVGs correctly I made some
test on Firefox to isolate the problem. The numbers relate to
demonstration SVG below.
(1) FF doesn't use the default font size given in inline stylesheet in
element style < defs. Instead FF uses browsers default font size
(2) dimension-less font-size in an CSS style attribute is not evaluated
bey FF. This is probably a bug. When I change style="font-size:8;" to
style="font-size:8px;" the font-size is taken
(3) In Inkscape Adobe SVG an element specific presentation attribute is
inferior to a global CSS property. I'm pretty new to SVG, but this
behaviour seems strange to me... How is the collaboration between CSS
and presentation attributes is meant to work?
Regards,
Wulf
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="800pt"
height="400pt" viewBox="0 0 800 400" preserveAspectRatio="xMidYMid">
<defs>
<style type="text/css"><![CDATA[
text{ font-family:'Arial Unicode
MS';font-size:12;fill:black;stroke:black;stroke-width:.1; }
]]></style>
</defs>
<text x="20" y="20">(1) default font size: ASV: OK. default defined in
style < defs. FF: Wrong. Browser default.</text>
<text x="20" y="40" style="font-size:8;">(2) style attribute set to
font-size:8 ASV: OK. FF: Wrong. Browser default. OK when changed to
"8px"</text>
<text x="20" y="60" font-size="8">(3) font-size attribute set to 8. ASV:
OK? Doesn't effect since CSS font-size in style < defs is set. FF:
Effects since default in defs is ignored.</text>
</svg>
Wulf Berschin
[..]
> (1) FF doesn't use the default font size given in inline stylesheet in
> element style < defs. Instead FF uses browsers default font size
This is because of (2). When I add the unit "px" FF uses this value.
With this change FF shows same behaviour in (3) as ASVG
Chris Lilley
WB> Hello,
WB> I'm using Firefox 2.0.0.12 an I was wondering why SVGs exported by Visio
WB> are not displayed correctly (text rendered to big); Since Inkscape,
WB> Illustrator and Adobe SVG displayed these SVGs correctly I made some
WB> test on Firefox to isolate the problem. The numbers relate to
WB> demonstration SVG below.
WB> (1) FF doesn't use the default font size given in inline stylesheet in
WB> element style < defs. Instead FF uses browsers default font size
Stylesheet (external, internal, and style attributes) are not permitted by CSS rules to be dimensionless, user-coordinate values. In this they differ from presentation attributes, where dimensionless, user-coordinate values are the most common use case.
The SVG WG did ask the CSS WG to allow this, or to allow it in an SVG profile of CSS, but they refused.
Thus, dimensionless units are not permitted in style sheets.
WB> (2) dimension-less font-size in an CSS style attribute is not evaluated
WB> bey FF. This is probably a bug. When I change style="font-size:8;" to
WB> style="font-size:8px;" the font-size is taken
Yes. Also font-size="8" is legal and should work.
Although the correct interpretation was not clear in the SVG 1.0/1.1 timeframe, the current interpretation is that this is correct, and not a bug in Firefox.
WB> (3) In Inkscape Adobe SVG an element specific presentation attribute is
WB> inferior to a global CSS property.
That is correct, and as specified in SVG, which in turn gets this from CSS. The specificity of a presentation attribute is zero. See
http://www.w3.org/TR/SVG11/styling.html#UsingPresentationAttributes
WB> I'm pretty new to SVG, but this
WB> behaviour seems strange to me... How is the collaboration between CSS
WB> and presentation attributes is meant to work?
If you use solely presentation attributes, then they will have the expected results; all you need to look for is inheritance.
If you mix in style sheets as well (this includes the style attribute) then you need to take into account the CSS concepts of specificity and cascading.
In general, current practice is to use presentation attributes exclusively. CSS stylesheets are used for *re*styling a document, effectively ignoring or overriding the original styling.
--
Chris Lilley mailto:ch...@w3.org
Interaction Domain Leader
W3C Graphics Activity Lead
Co-Chair, W3C Hypertext CG
Wulf Berschin
> On Friday, February 29, 2008, 11:05:49 AM, Wulf wrote:
>
> WB> Hello,
>
> WB> I'm using Firefox 2.0.0.12 an I was wondering why SVGs exported by Visio
> WB> are not displayed correctly (text rendered to big); Since Inkscape,
> WB> Illustrator and Adobe SVG displayed these SVGs correctly I made some
> WB> test on Firefox to isolate the problem. The numbers relate to
> WB> demonstration SVG below.
>
> WB> (1) FF doesn't use the default font size given in inline stylesheet in
> WB> element style < defs. Instead FF uses browsers default font size
>
> Stylesheet (external, internal, and style attributes) are not permitted by CSS rules to be dimensionless, user-coordinate values. In this they differ from presentation attributes, where dimensionless, user-coordinate values are the most common use case.
>
> The SVG WG did ask the CSS WG to allow this, or to allow it in an SVG profile of CSS, but they refused.
>
> Thus, dimensionless units are not permitted in style sheets.
It seems that sometimes dimensionless are rendered as expected, e.g.
<path d="M2.399979,2.399979 h144.240005 v207.360001 h-144.240005 Z"
style="stroke:black;stroke-width:9;fill:none;"/>
as far I understood this is not CSS conformant too, so we should better
add "px" on all dimensionless CSS sizes, right?
> WB> (2) dimension-less font-size in an CSS style attribute is not evaluated
> WB> bey FF. This is probably a bug. When I change style="font-size:8;" to
> WB> style="font-size:8px;" the font-size is taken
>
> Yes. Also font-size="8" is legal and should work.
>
> Although the correct interpretation was not clear in the SVG 1.0/1.1 timeframe, the current interpretation is that this is correct, and not a bug in Firefox.
>
> WB> (3) In Inkscape Adobe SVG an element specific presentation attribute is
> WB> inferior to a global CSS property.
>
> That is correct, and as specified in SVG, which in turn gets this from CSS. The specificity of a presentation attribute is zero. See
> http://www.w3.org/TR/SVG11/styling.html#UsingPresentationAttributes
>
> WB> I'm pretty new to SVG, but this
> WB> behaviour seems strange to me... How is the collaboration between CSS
> WB> and presentation attributes is meant to work?
>
> If you use solely presentation attributes, then they will have the expected results; all you need to look for is inheritance.
>
> If you mix in style sheets as well (this includes the style attribute) then you need to take into account the CSS concepts of specificity and cascading.
>
> In general, current practice is to use presentation attributes exclusively. CSS stylesheets are used for *re*styling a document, effectively ignoring or overriding the original styling.
>
Well, since we have to handle the obviously invalid SVG created by Visio
we must get around missing namespace declaration as well as missing CSS
units.
Thank you very much, Chris, for your hints.
Chris Lilley
WB> Chris Lilley schrieb:
>> On Friday, February 29, 2008, 11:05:49 AM, Wulf wrote:
>> Thus, dimensionless units are not permitted in style sheets.
WB> It seems that sometimes dimensionless are rendered as expected, e.g.
WB> <path d="M2.399979,2.399979 h144.240005 v207.360001 h-144.240005 Z"
WB> style="stroke:black;stroke-width:9;fill:none;"/>
Sorry, I should have been more precise. Dimensionless units are not permitted for *font sizes*.
WB> as far I understood this is not CSS conformant too, so we should better
WB> add "px" on all dimensionless CSS sizes, right?
No. The stroke-width property is defined by SVG, and correctly works in user coordinates.
>> If you use solely presentation attributes, then they will have the expected results; all you need to look for is inheritance.
>> If you mix in style sheets as well (this includes the style attribute) then you need to take into account the CSS concepts of specificity and cascading.
>> In general, current practice is to use presentation attributes exclusively. CSS stylesheets are used for *re*styling a document, effectively ignoring or overriding the original styling.
WB> Well, since we have to handle the obviously invalid SVG created by Visio
WB> we must get around missing namespace declaration as well as missing CSS
WB> units.
XSLT may be a help to strip out any non-SVG namespace stuff. (inkscape, in the upcoming 0.46 release, does that to clean up Adobe illustrator-generated SVG on import).
Missing namespace declarations should of course be added; a simple script can do that.
Depending on how the file is constructed, it may be possible to have a script automatically change all style attributes to the equivalent sequence of presentation attributes.
WB> Thank you very much, Chris, for your hints.
My pleasure.