CODEWITHSUNDEEP
svg
Brad Wickwire
Brad Wickwire

Reputation: 1153

SVG image is not showing background image

Im having a weird issue that I can not figure out. If you go to https://www.stubwire.com/events/redneckswithpaychecks/2015springbreak/maps/sample_page.php you will see a SVG image being displayed which works fine in IE but not in Chrome or Firefox. In Chrome & Firefox the background image is not displayed unless you call load the image directly in the browser ( https://www.stubwire.com/events/redneckswithpaychecks/2015springbreak/maps/sample_image.php ) Below is the XML inside the SVG file which I know I could embed the background image but I would like to split it out so I could use the same background image for multiple files. Anyone have an idea on why this is not working?

<g id="Image">
        <image overflow="visible" width="4928" height="3264" xlink:href="A_bg.jpg"  transform="matrix(0.3531 0 0 0.3531 0 75.2471)"></image>
</g>

Upvotes: 1

Views: 757

Answers (1)

Robert Longson
Robert Longson

Reputation: 124279

If you display an SVG file in an image context i.e. as a background-image or via an html <img> or SVG <image> it must be complete within a single file to prevent privacy leaks.

Encode your jpeg as a data URI and it should work.

Upvotes: 1

Related Questions