Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Full width and height SVG

Tags:

css

svg

The dilemma: make a full window svg image that fills WITH aspect distortion, WITHOUT using an SVG tag. Why no svg tag? Because I intend on swapping out the SVG later (if not frequently) in the life of the page, and I have not found an easy way to do that.

The failed attempts:

  <!-- for the record, my style are in a css file, 
       for example purposes they are style attrs-->

  <!-- Working in Webkit but not in firefox, in firefox blocks stretching 
       and places the svg in the middle of the tag-->
  <img src="my.svg" style="width:100%;height:100%;
       position:fixed;top:0;left:0;bottom:0;right:0;" />

  <!-- Both Webkit and Firefox block distortion, so the svg 
       appears centered in the div rather than conforming to the div-->
  <div style="width:100%;height:100%;position:fixed;top:0;
       left:0;bottom:0;right:0;background-size:cover;
       background-image:url(my.svg);" />

I have also tried

 background-size:contain;
 background-size:cover;
 background-size:100% 100%;
 background-postion: center center;

but no luck.

like image 581
Fresheyeball Avatar asked Feb 21 '12 17:02

Fresheyeball


People also ask

Does SVG have width and height?

SVG images, in contrast, can be drawn at any pixel size, so they don't need a clearly defined height or width. And they won't always have a clearly defined aspect ratio. You're going to need to explicitly provide this information (and more) if you want the SVG to scale to fit the dimensions you give it.

How do I set height and width in SVG?

We use viewBox to make the SVG image scalable. viewBox = “0 0 100 100”: defines a coordinate system having x=0, y=0, width=100 units and height=100 units. Thus, the SVG containing a rectangle having width=50px and height=50px will fill up the height and width of the SVG image, and all the dimensions get scaled equally.

What is SVG height?

For <svg> , height defines the vertical length for the rendering area of the SVG viewport. Note: Starting with SVG2, height is a Geometry Property meaning this attribute can also be used as a CSS property for <svg> .


2 Answers

I got this to work in Firefox, Chrome, and Safari using

<img src="my.svg" style="width:100%;height:100%;position:fixed;top:0;left:0;bottom:0;right:0;" />

The trick was to make sure the SVG I was displaying had preserveAspectRatio="none" set in the root. Also, I had to either delete the viewBox in the SVG, or make sure it tightly cropped the image content.

For example:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 5 3">
    <desc>Flag of Germany</desc>
    <rect id="black_stripe" width="5" height="3" y="0" x="0" fill="#000"/>
    <rect id="red_stripe" width="5" height="2" y="1" x="0" fill="#D00"/>
    <rect id="gold_stripe" width="5" height="1" y="2" x="0" fill="#FFCE00"/>
</svg>

Hopefully you have control over the content of the SVG files you are trying to display. :-)

like image 72
Michael Righi Avatar answered Sep 18 '22 13:09

Michael Righi


Here's a jQuery solution. As you can see, I'm using it with an SVG without <svg>

The css

#bgImage{
    position:absolute;
    left:0;
    top:0;
}

The html

<object width="10" height="10" id="bgImage" data="resources/runner.svg" type="image/svg+xml"></object>

The javascript

//resize the background image
function resizeImage($selection){
    //get the ratio of the image
    var imageRatio = $selection.width() / $selection.height();

    //get the screen ratio
    var screenRatio = $(window).width() / $(window).height();

    //if the image is wider than the screen
    if(imageRatio > screenRatio){
        $selection.height($(window).height()); //set image height to screen height
        $selection.width($(window).height()*imageRatio); //set the correct width based on image ratio
    }

    //if the screen is wider than the image
    else{
        $selection.width($(window).width()); //set the image width to the screen width
        $selection.height($(window).width()/imageRatio); //set the correct image height based on the image ratio
    }
}

Run this whenever you want to resize the image, typically on "onresize" and "onload"

$(window).resize(function(){
    resizeImage($("#bgImage"));
}
like image 31
Adam Avatar answered Sep 20 '22 13:09

Adam