I have a website. The file structure is as follows:
-index.html
-imgs
--sprite.svg
When I open the site on a port using live-server in vscode, svg's appear.
But when I open it directly from the file, it does not appear.
The svg code in index.html is as follows:
<svg class="sec-workflow__img">
<use xlink:href="imgs/sprite.svg#planning"></use>
</svg>
I do not understand the reason?
On
Try this:
First you need to load a sprite with icons
<object type="image/svg+xml" data="imgs/sprite.svg"></object>
And then use the icon from the sprite
<svg class="sec-workflow__img">
<use xlink:href="imgs/sprite.svg#planning"></use>
</svg>
As commented by @by-brt
Where do I write this code
Add code to Index.html
<!DOCTYPE html>
<html lang="en">
<body>
<object type="image/svg+xml" data="imgs/sprite.svg"></object>
<div>
<svg class="sec-workflow__img">
<use xlink:href="imgs/sprite.svg#planning"></use>
</svg>
</div>
</body>
</html>
PNG file to be displayed in case the browser fails to render the SVG. So therefore convert your svg to png. You can get image converter on the windows store if you are on windows from here.
If you use linux, you can use imagemagics to convert files from svg to png.