Using svg with width = 100 and height = 100 I got extra space in Safari Chrome

Question

testing a simple page with some text and svg with a percentage of height and weight, I got extra space before and after svg. There is no extra space in Firefox, but you can find it in Safari and Chrome. You can see it here: http://www.venerandi.com/svg_space.xhtml

This is the svg code:

<svg id="uno" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 250" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"> <polygon points="1, 20 500, 1 220, 250" style="fill:#FFFFFF; stroke:#000000;stroke-width:5"/> <text x="47" y="42" font-size="24" fill="red" font-weight="bold">Colombini Locusta</text> <text x="45" y="44" font-size="24" color="black" font-weight="bold">Colombini Locusta</text> <rect x="200" y="100" width="70" height="70" style="fill:red"/> </svg> 

Some suggestion to understand why extra space is created?

Thanks.

Answer 1

This is a common question. Unfortunately, you encountered a bug in Webkit-based browsers. It is assumed that it will calculate the appropriate height based on the width and proportion of the viewBox. Unfortunately, this is not so. It treats the height "100%" as "page height". You can't do it.

You must either use Javascript to calculate and set the size of the SVG explicitly yourself, or set it to a fixed size and live with it.