CODEWITHSUNDEEP
csssvgxlinksvg-sprite
by-brt
by-brt

Reputation: 29

When I open the index file directly, svg does not appear

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. enter image description here

But when I open it directly from the file, it does not appear.

enter image description here

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?

Upvotes: 1

Views: 272

Answers (2)

Alexandr_TT
Alexandr_TT

Reputation: 14545

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>

Update

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>

Upvotes: 1

NrdyBhu1
NrdyBhu1

Reputation: 383

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.

Upvotes: -3

Related Questions