Menu
Imagine the following SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="foo.png" x="0" y="0" width="100" height="100"/>
</svg>
The image, foo.png, resides in the same directory. If we open this SVG in the browser, it will display foo.png correctly. But if we try to use this SVG in <img src="...">, or in <image xlink:href="..."/> inside another SVG, there will be no foo.png displayed. Tested with latest Firefox and Chrome, both with file:// and http://. There is nothing in the console of either browser, and network monitor shows no attempts to load a bitmap.
Am I missing something? I know everything will be OK if I embed foo.png as "data:image/svg+xml;base64,...", but I really want to avoid that. Bitmaps I'm trying to include can be rather huge, so I would better prefer linking instead of embedding.
863
SVG's <a> element is a container, which means you can create a link around text (like in HTML) but also around any shape.
Embedding raster images Much like the img element in HTML SVG has an image element to serve the same purpose. You can use it to embed arbitrary raster (and vector) images. The specification requests applications to support at least PNG, JPEG and SVG format files.
The SVG format allows for the nesting of SVG graphics. It is possible for an “<svg>” elements, to be placed within another “<svg>” element. Though, within a nesting, the absolute placement is limited to the respective parent “<svg>” element.
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.
This is disabled by the browser for security reasons.
From MDN,
Restrictions
For security purposes, Gecko places some restrictions on SVG content when it's being used as an image:
- JavaScript is disabled.
- External resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through BlobBuilder object URLs or data: URIs.
- :visited-link styles aren't rendered.
- Platform-native widget styling (based on OS theme) is disabled.
Also, check the details at Bugzilla@Mozilla
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
