Apply SVG Gradient filter to background image

Get Off My Lawn Published at Dev

Get Off My Lawn

I found this SVG code, and I was wondering how do I apply it to a background image?

<svg width="600px" height="600px" viewbox="0 0 600 600">
    <defs>
        <linearGradient id="alphaLinear">
            <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0%" />
            <stop offset="100%" stop-color="#FFFFFF" stop-opacity="100%" />
        </linearGradient>

        <mask id="Mask">
            <rect x="0" y="0" width="600" height="600" fill="url(#alphaLinear)"  />
        </mask>
    </defs>

    <image xlink:href="/media/images/body-bg.jpg" width="600" height="600" x="0" y="0" preserveAspectRatio="xMinYMin meet" mask="url(#Mask)"/>
</svg>

In the <image> tag I replaced the href url with the image I want to use. I then call the svg from the css like so:

body{
     background: url('/media/images/gradient.svg') center top no-repeat;
}

Nothing seems to be happening, all I am getting is a white background.

Paul LeBeau

There are a few things wrong:

For external files, you will need the xmlns and xmlns:xlink namespace declarations in the <svg> tag.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="600px" height="600px" viewbox="0 0 600 600">

viewbox should be viewBox
SVG files used as an external image in <img> or as a background-image need to be self contained. They cannot refer to other external files as you are doing here.

You can embed the external JPEG as a Data URI though if you want.
```
<image xlink:href="data:image/jpeg;base64,...Base64 encoded JPEG data here..."> 
```