svgheightwidth

Set an SVG image to 100% width and height


How can I set the width and hight from this svg image? I don't get it.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <path fill="none" stroke="#0074c4" d="M80,80 A80,80 0 1,180.61117636732928,100.45116865416591" stroke-width="3" />
</svg>

I tried it with the width and height attr., with the viewBox attr. and with a div around the svg (i read in some post that an svg image with no width and height is auto. 100%) but nothing works.

fiddle here http://jsfiddle.net/k38Bv/1/


Solution

  • The mistake you had is that you forgot to add the viewBox property. You need it because it's important for scaling. Here's what the object should be like:

    HTML:

    <svg width="100%" 
       height="100%"
       viewBox="0 0 300 150"
       xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
       <path fill="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke="#0074c4" d="M80,80 A80,80 0 1,180.61117636732928,100.45116865416591" stroke-width="3" />
    </svg>
    

    Fiddle:

    http://jsfiddle.net/k38Bv/2/