CODEWITHSUNDEEP
htmlcssimagesvg
Golinmarq
Golinmarq

Reputation: 1006

SVG doesn't display images I linked

I generate an SVG image using Adobe Illustrator CS6. This image is located at my site media folder (root/sitemedia/images/). I put as a background of a jumbotron but it doesn't display anything, just a blank image. When I openned in the browser (Safari, FF, Chrome) it displays the image that I want.

The css code I'm using is

.jumbotron{
         background: url(../images/jumbo-bg.svg) center no-repeat #FFF;
         background-size: cover;
}

The code generated by Illustrator is 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="central" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="640px" height="480px" viewBox="0 0 640 480" enable-background="new 0 0 640 480" xml:space="preserve">
<image overflow="visible" width="640" height="480" id="image1" xlink:href="folder/image1.png"  transform="matrix(1.0002 0 0 1.0002 0 0)">
</image>
</svg>

I already changed the xlink:href of the image for the root folder but it doesn't work. What's happen with this image?

Upvotes: 4

Views: 2140

Answers (1)

Robert Longson
Robert Longson

Reputation: 124229

If you display an SVG file as a background-image (or any other image type such as an html <img> or SVG <image>) it must be complete within a single file to prevent privacy leaks.

Encode your png as a data URI within the SVG document and it should work.

Upvotes: 5

Related Questions