Menu
For some reason, Chrome is displaying the SVG without the images in its Image tags.
Here is a sample from my SVG:
<image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/> blocker.png is a local file, but I also tried uploading it to imgur, but that didn't work either.
Here is the svg tag:
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> Here is what it looks like locally:
http://i.imgur.com/BDP8KpG.png
Here is what it looks like on a live webpage:
http://i.imgur.com/KVuxLI1.png
As you can see, the two players are missing. This doesn't happen when I upload the SVG online, but when I try to link that URL to my page, the same thing happens
Not sure if it's relevant, but here is the HTML code for the page:
<!DOCTYPE HTML> <html> <head> <title>SVG</title> <style> img{ width: 100%; height:auto; max-width: 800px; } </style> </head> <body> <div> <img src="svg.svg"/> </div> </body> </html> 
980
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.
From Chrome and Edge to Safari and Firefox, all the major browsers allow you to open SVG files these days — whether you're on a Mac or Windows. Just launch your browser and click on File > Open to choose the file you want to view. It'll then be displayed in your browser.
The quick way: img elementTo embed an SVG via an <img> element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.
PaulLeBeau's answer is right. But another solution is to use an embed tag instead of an img tag for the picture.
<embed src="svg.svg"> Here are some ways to embed svg images in HTML.
142
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
