Search code examples
htmlcsssvg

Fullscreen svg similar to object-fit cover

I've read through a lot of questions and tutorials, but still couldn't figure out how to properly make an SVG take the full screen and cover it (just like you would with object-fit: cover and in my case object-position: 0) so that there are no scrollbars visible. The only thing I managed to get was a non-scrollable fullscreen with the parts of the SVG that could fit into it.

The svg is inside an <object>, as I need the links to work.

<div class="map">
  <object class="fullscreen-map" type="image/svg+xml" data="europe3.svg">
    Your browser does not support SVG
  </object>
</div>

The SVG itself has no viewBox by default and has width=1920 and height=1080, but I tried to include a viewBox with the same dimensions as well while trying out other stuff that I found.

Here's a link to the SVG I'm trying to get to fullscreen

The best I could come up with until now is to style the <object> around it, but it only crops and doesn't even try to scale the SVG:

.fullscreen-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-width: 1020px;
    object-fit: cover;
    object-position: 0;
    font-family: 'object-fit: cover;';
    z-index: -1;
}

I could get it to work by adding the SVG in an IMG tag, but then I'll lose the ability to click on links within it.

So here is the expected result and as you can see, the positioning of the links to the different locations doesn't really work if you change the viewport aspect ratio to something different than 16:9. If you have suggestions on how to implement that easily, I'd be really happy to hear them too :)

Thanks for helping me!

Solution

  • First change your CSS. Remove the object-fit and object-position properties.

    .fullscreen-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-width: 1020px;
    z-index: -1;
}

    Next, you need to modify your SVG. In the root <svg> tag, make the following changes:

    1. Remove the width and height attributes.

    2. Add the following attributes:

       viewBox="0 0 1920 1080"
 preserveAspectRatio="xMinYMin slice"

    Your SVG should look like this now:

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   viewBox="0 0 1920 1080"
   preserveAspectRatio="xMinYMin slice"
   id="svg3157"
   inkscape:version="0.92.1 r15371"
   sodipodi:docname="europe3.svg">
  <sodipodi:namedview
  ...etc...

    preserveAspectRatio="xMinYMin slice" is the SVG equivalent of object-fit: cover; object-position: 0; for img. The viewBox is needed so the browser knows how much it needs to scale the SVG contents`.

    Use preserveAspectRatio="xMidYMid slice" if you just want the default object-fit: cover; effect, showing the center of the image.