CODEWITHSUNDEEP
htmlcsssvg
henit
henit

Reputation: 1170

Adaptive svg backgrounds

I am trying to let an svg show different images based on screen size, so smaller devices show smaller images. For instance, if I want a background image covering the whole svg area, something like this:

<svg viewBox="0 0 1000 700">
    <defs>
        <style type="text/css">
            #theImage { 
                fill: url('#bg-large');
            }
            @media screen and (min-width: 401px) and (max-width: 800px) {
                #theImage {
                    fill: url('#bg-small');
                }
            }
        </style>

        <pattern id="bg-large" width="100%" height="100%">
            <image xlink:href="large.jpg" width="100%" height="100%" />
        </pattern>

        <pattern id="bg-small" width="100%" height="100%">
            <image xlink:href="small.jpg" width="100%" height="100%" />
        </pattern>
    </defs>

    <rect id="theImage" width="100%" height="100%" />
</svg>

It works, but the browser downloads both images at any screen size. Is there another (mabye a svg attribute way instead of css) to make the browser load only the image required for the active screen size?

Upvotes: 0

Views: 315

Answers (1)

Hector
Hector

Reputation: 21

The media query is referring to an id called "TheImage" while there's no object identified with this ID. Your images are identified with id's "bg-large" and "bg-small".

Still, according to the code written, both images would be downloaded. To display them or not, you'll need to use the "display" atribute by setting it to "none" whenever you want the image to be hidden

Upvotes: 1

Related Questions