Menu
Trying to load an image in SVG using an HTML page:
<html>
...
<svg>
<image x="330" y="137" width="320" height="38" preserveAspectRatio="none" href="/img/title.png"></image>
</svg>
...
</html>
All other elements in the svg load up (paths shapes text) except image. Any way to get this working in browsers? I've tried Chrome, Firefox, IE. All browsers are missing the image.
Using Chrome I found that Chrome doesn't even send the request for the image. I have a hunch it's the same for IE and Firefox.
Any solutions?
867
If you are trying to use SVG like <img src="image. svg"> or as a CSS background-image , and the file is linked to correctly and everything seems right, but the browser isn't displaying it, it might be because your server is serving it with an incorrect content-type.
Chrome browser will not display svg image, if it doesn't have with attribute with value in svg source code. Edit your SVG source code and add width attribute with desired value.
How to use inline SVG images. 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.
You can embed SVG elements directly into your HTML pages.
You need to use:
<image ... xlink:href="...">
See the SVG Document Structure spec.
158
This is not the case in question, but I ran across a similar issue with an <image href="/path/to/file.svg"> tag not showing up in Edge, while working correctly in Firefox and Chrome.
It turns out that if you don't explicitly set both a height and a width attribute on the <image> tag Edge won't show the image. This is not the case in Chrome and Firefox where width alone was enough.
38
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
