Background Image Svg With Mask Using External Image Not Working

I'm attempting to use an SVG image as a css background image. The SVG(s) in question will ultimately use a number of large JPEG images (embedded or linked) as a mask for other SVG

Solution 1:

For privacy reasons SVG-as-an-image must be complete in one file. Browsers will never support external references in SVG-as-an-image. The basic premise is that you can only do things with SVG-as-an-image that you could do with a raster image.

If you need external references use <object> or <iframe>

Solution 2:

As Robert Longson mentions, browsers will not load external files referenced from SVGs used as images (HTML <img> or CSS background images).

<embed> tags should work, with the entire SVG and linked images loaded. However, <embed> have only become standardized recently, so there may be some inconsistencies. To ensure the greatest support, use a mix of <object> tags and <embed> tags:

<objectclass="sml" data="test1.svg"type="image/svg+xml">
    <embedclass="sml"src="test1.svg"type="image/svg+xml" />
</object>