Search code examples
svgsvg-font

Rendering style attributes (@style vs font-size)


I have found that on both IE and Firefox the SVG @style attribute does not render font-sizes, but that the @font-size attribute works. (I am not sure whether the failed display is too small to see, has no colour or is not displayed at all).

<text style=" stroke:green; fill:black; font-size:26.548;"  
       x="265.1651888" y="737.1567768" >o</text> 
<!-- fails to render -->

<text style=" stroke:blue; fill:black; "  x="265.1651888" y="737.1567768"
       font-size="16.548">o</text> 
<!-- renders OK -->

The standard seems to imply that @style and specific attributes are alternatives. Is this correct? If so, is this a limitation in the browsers and what is defensive coding (e.g. should I always use both for safety?). I am generating my own SVG, so maybe there are global attributes that can affect this.


Solution

  • This is correct, you must put units in if you specify a font-size via CSS per http://www.w3.org/TR/CSS2/fonts.html#font-size-props.

    Units are optional for font-size when specified as an SVG property though as that usage and syntax is covered by the SVG specification.