Full width and height 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.

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. :-)


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"));
}

Need Your Help

RSpec: How to test for a boolean return type?

rspec boolean

I'm using RSpec to test an API. I want to specify that one particular endpoint returns a boolean value, either true or false. This is an API to be used by other systems and languages, and so it's

VueJs child component props not updating instantly

asynchronous vue.js vue-component

I have a parent/child component setup where the parent is loading data from the server and passing it down to children via props. In the child I would like to instantiate a jQuery calendar with som...