Note: There are a few cases of duplicates in user autocompletion which are being worked on.

svg figure is clipped to the viewBox even though we could display more on screen




6 years ago
6 years ago


(Reporter: oversky0, Unassigned)


8 Branch
Windows XP

Firefox Tracking Flags

(Not tracked)




6 years ago
User Agent: Mozilla/5.0 (Windows NT 5.1; rv:8.0.1) Gecko/20111122 Firefox/8.0.1
Build ID: 20111122185838

Steps to reproduce:

Actual results:

In this figure, the right most text "Screen" is clipped.

Expected results:

Full text "Screen" should be shown.
I test this svg in Inkscape and Chrome, both are rendered correctly.
Do not abuse the security-sensitive flag, it is meant for issues that must stay private due to security disclosure only.
Group: core-security
The text of "screen" is outside of the viewbox of the root <svg> element. I believe that Firefox only displays content which is inside the viewbox.
Component: General → SVG
Product: Firefox → Core
QA Contact: general → general
Summary: svg figure is clipped → svg figure is clipped to the viewBox even though we could display more on screen
Relevant text from the SVG 1.1 spec:


When an outermost svg element is stand-alone or embedded inline within a parent XML grammar which does not use CSS layout or XSL formatting, the ‘overflow’ property on the outermost svg element is ignored for the purposes of visual rendering and the initial clipping path is set to the bounds of the initial viewport.

It's not clear to me what the initial viewport is in this example should actually be, because my undereducated reading of the spec would have it being x=0 y=0 width=32cm height=4cm and not all of the image fits into that viewport either.

Comment 4

6 years ago
This is more about font sizing than clipping really.

The testcase specifies font-sizes without units. This is invalid CSS. You can either convert the font-size to an attribute e.g. font-size="12.7998" or add units to the css e.g. 

style="fill: #000000;text-anchor:start;font-size:12.7998px;font-family:sanserif;font-style:normal;font-weight:normal"

The text will then be smaller and won't overflow the bounds that the testcase has set.

Inkscape and Chrome accept the invalid CSS. Opera doesn't and it displays the same as Firefox.
Last Resolved: 6 years ago
Resolution: --- → INVALID

Comment 5

6 years ago
Checking with W3C Markup Validation Service

Result: 	Passed, 1 warning(s)

The warning message,
"Mismatch between Public and System identifiers in the DOCTYPE declaration",
is not related to the font-sizes without units.

The document located at <> was successfully checked as SVG 1.0. This means that the resource in question identified itself as "SVG 1.0" and that we successfully performed a formal validation of it. The parser implementations we used for this check are based on OpenSP (SGML/XML) and libxml2 (XML). 

I don't understand the SVG standard, but W3C think this is OK, and I think firefox should follow W3C. I will email this issue to W3C and see which is one is correct.
Resolution: INVALID → ---

Comment 6

6 years ago
The appropriate text is here since you are using inline CSS: specifically

You can report bugs in the validator at
Last Resolved: 6 years ago6 years ago
Resolution: --- → INVALID

Comment 7

6 years ago
I made another svg with "font-size:12.7998px" modification as suggested by Robert.
The text "Screen" is still clipped and displayed as "Screer"

Some questions here,
1. If Firefox rejects invalid CSS, why "Scree" is still displayed? Shouldn't the whole word disappear?
2. Other texts in this svg have the same "wrong unit" issue, but they are all displayed with full word at the correct places. Apparently, Firefox can deal with and access this "invalid CSS".
Resolution: INVALID → ---

Comment 8

6 years ago
Please don't keep reopening this bug.

1. The invalid CSS is ignored. The text is displayed as if it was not present.
2. No it can't but it may be getting some inherited text size or using the default.
Last Resolved: 6 years ago6 years ago
Resolution: --- → INVALID


6 years ago

Comment 9

6 years ago
Regarding the comments about the validator reporting the markup as valid, it is correct. It is the CSS that is invalid, not the Markup. There is a CSS validator at but it can't extract inline CSS from SVG. If I copy and paste some of the CSS into the direct input box, add a selector, and pick the SVG profile, it reports: Value Error : font-size only 0 can be a length. You must put a unit after your number : 12.7998
You need to log in before you can comment on or make changes to this bug.