Search code examples
htmlfirefoxwebsvgrect

Firefox SVG rect size not drawn for size greater than 300,150

The following jsfiddle works correctly in chrome but not in firefox(at least in 16 and 21) (Look for size of rect) http://jsfiddle.net/ej5Zk/9/

    <svg>
<g>
    <rect y="0" x="0" width="400"  height="463"  />
</g>
</svg>
Solution

  • Actually it works incorrectly in Chrome and correctly in Firefox.

    You generally want to set a width and height when embedding SVG in html

    Per the SVG Specification

    The ‘width’ attribute on the outermost svg element establishes the viewport's width, unless the following conditions are met:

    • the SVG content is a separately stored resource that is embedded by reference (such as the ‘object’ element in XHTML [XHTML]), or the SVG content is embedded inline within a containing document;
    • and the referencing element or containing document is styled using CSS [CSS2] or XSL [XSL];
    • and there are CSS-compatible positioning properties ([CSS2], section 9.3) specified on the referencing element (e.g., the ‘object’ element) or on the containing document's outermost svg element that are sufficient to establish the width of the viewport.

    Under these conditions, the positioning properties establish the viewport's width.

    Since all the above conditions are true you need to use a style which means an explicit width since that maps to style, or a CSS width property. It seems most other UAs ignore the above specification requirements.