Using SVG with referenced PNG as background image

user519477

Given an SVG that references a PNG image using <image xlink:href="http://... why can't I use the SVG as background image with CSS? If I call the SVG directly in the browser (tested with Chrome and Firefox), it shows me the SVG with the PNG and the debugging tools (Network tab) also show that the external graphic was called. Using an <object> tag in HTML pointing to the SVG also works. What also works is embedding the PNG into the SVN using base64, that allows me to use the SVG a background image, but not if the image is a path. Test page, CSS, SVG and the image I am linking to in the SVG are all on the same server.

Robert Longson

The functionality is documented in the SVG Integration specification

When you use SVG as a background image its functionality is that of an

animated image document

It therefore runs in secure animated mode.

And one of secure animated mode's restrictions is that external references are not allowed.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Using WebP as a background image in SVG

From Dev

Using a raster image as tiled background in a scaled svg

From Dev

Extract an image from a PNG image using its background position

From Dev

Download SVG as a PNG image

From Dev

Download SVG as a PNG image

From Dev

Image cropped while converting from SVG to PNG using ImageMagick

From Dev

Image cropped while converting from SVG to PNG using ImageMagick

From Dev

How to add a repeating png image in the background of a webpage using CSS?

From Dev

How to set opacity to png image with transparent background using Magick++

From Dev

Embedded <image> not rendered when using SVG as background-image

From Dev

SVG as background image

From Dev

SVG as background image

From Dev

filling svg background with an image

From Dev

How to add different background image (.png) to a SVG circle shape , and set stroke?

From Dev

ImageMagick png to svg Image Size

From Dev

Displaying a png image without the background

From Dev

Upload png image black background

From Dev

embedded image in svg disappear on converting svg to png

From Dev

Background image shows when referenced in HTML but not when referenced in CSS

From Dev

CSS: Using raw svg in the URL parameter of a background-image in IE

From Dev

Background image to SVG choropleth map using D3

From Dev

Using D3 to fill an svg with a background image

From Dev

ImageButton with PNG image with transparent background as background

From Dev

Appending svg into a background-image

From Dev

PHP Generated SVG as background image

From Dev

SVG background image not appearing on iPad

From Dev

Rotating stripes in SVG background image

From Dev

SVG triangle separator with image background

From Dev

Background SVG image inline not displayed

Related Related

  1. 1

    Using WebP as a background image in SVG

  2. 2

    Using a raster image as tiled background in a scaled svg

  3. 3

    Extract an image from a PNG image using its background position

  4. 4

    Download SVG as a PNG image

  5. 5

    Download SVG as a PNG image

  6. 6

    Image cropped while converting from SVG to PNG using ImageMagick

  7. 7

    Image cropped while converting from SVG to PNG using ImageMagick

  8. 8

    How to add a repeating png image in the background of a webpage using CSS?

  9. 9

    How to set opacity to png image with transparent background using Magick++

  10. 10

    Embedded <image> not rendered when using SVG as background-image

  11. 11

    SVG as background image

  12. 12

    SVG as background image

  13. 13

    filling svg background with an image

  14. 14

    How to add different background image (.png) to a SVG circle shape , and set stroke?

  15. 15

    ImageMagick png to svg Image Size

  16. 16

    Displaying a png image without the background

  17. 17

    Upload png image black background

  18. 18

    embedded image in svg disappear on converting svg to png

  19. 19

    Background image shows when referenced in HTML but not when referenced in CSS

  20. 20

    CSS: Using raw svg in the URL parameter of a background-image in IE

  21. 21

    Background image to SVG choropleth map using D3

  22. 22

    Using D3 to fill an svg with a background image

  23. 23

    ImageButton with PNG image with transparent background as background

  24. 24

    Appending svg into a background-image

  25. 25

    PHP Generated SVG as background image

  26. 26

    SVG background image not appearing on iPad

  27. 27

    Rotating stripes in SVG background image

  28. 28

    SVG triangle separator with image background

  29. 29

    Background SVG image inline not displayed

HotTag

Archive