User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:42.0) Gecko/20100101 Firefox/42.0 Build ID: 20151030084315 Steps to reproduce: https://jsfiddle.net/b8effdwr/ 1. Have a look at the JSFiddle 2. In the console.log, there is the results of getBBox on the svg text element 3. Have a look in the inspector and put your mouse over the svg text element. 4. Look at the size reported by getBBox and by the inspector Actual results: The inspector is bigger than the dimensions of getBBox Expected results: They should have been the same. You can see that the rectangle, which is drawn according to the getBBox of the text element, is fitting around the text while the inspector reports a bigger size than the rectangle.

The highlighter uses getBoxQuads to determine the geometry of elements to be highlighted by the inspector. There seems to be difference between what text.getBBox() and text.getBoxQuads()[0].bounds return in terms of width and height. If you try to add a stroke to the text element in the jsfiddle then the difference is even bigger. So it looks like getBBox and getBoxQuads just work differently. Now, maybe we should use getBBox when highlighting SVG elements instead? Maybe there's no reason to use our usual BoxModelHighlighter for those elements but we should instead switch to a new SVGHighlighter that would know how to detect the geometry of SVG shapes correctly. See bug 714738 and its meta bug 1133682.