1

testing a simple page with some text and a svg with percent value in height and weight, I got an extra space before and after the svg. There is not extra space in Firefox, but You can found it in Safari and Chrome You can see this 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 the extra space is created?

Thank you.

Fabrizio Venerandi
  • 41
  • 1
  • 2

1 Answers1

1

This is a common question. Unfortunately you've struck a bug in Webkit-based browsers. It is supposed to be calculating an appropriate height based on the width and the viewBox aspect ratio. Unfortunately it isn't. It is treating the height of "100%" to mean "the height of the page". There is not much you can do about it.

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

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Thank you for the answer. Actually I'm testing the code for ePub. I see using only width="100%" Adobe Digital Edition is working fine, but Ibooks (that uses webkit as you said) is placing the svg in a white page. I hoped for a solution, but actually as you said there is not much I can do. I can not use Javascript, 'cause in ePub2 this is not allowed... – Fabrizio Venerandi Aug 11 '13 at 21:35
  • Update: it seems that using the svg in an object tag with width="100%" solves the problem. Not in ePub unfortunately :( – Fabrizio Venerandi Aug 12 '13 at 13:42