Menu
I try to make an HTML that references to an SVG file, that SVG file is interactive (CSS hover):
<img src="algerie.svg"> I loose the interactivity.
If I use:
<svg viewBox="0 0 512 512"> <use xlink:href="algerie.svg"></use> </svg> Then nothing is shown, and worse, Chrome or Firefox do not detect the file in the network dev tool.
439
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. If you did everything correctly, your webpage should look exactly like the demo below.
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.
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.
SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element. In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.
You should embed the image by using <object> tag:
<object data="algerie.svg" type="image/svg+xml"></object> Refer to this question for the details: Do I use <img>, <object>, or <embed> for SVG files?
81
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
