SVG icon shows in DOM but invisible on page

HTML-CSS
1

I have SVG icon that shows in DOM but invisible on page. I am using the SVG sprite technique to display SVG icon by using the use element but can’t understand why it’s not showing on the screen.

   <svg class="user-nav__icon">
                        <use xlink:href="img/sprite.svg#icon-bookmark-add1"></use>
                    </svg>
2

It’s worth mentioning that the xlink:href technique is deprected see MDN so try using img tag instead.
for your problem, can you post a screenshot for your project directories? maybe the href isn’t properly written

3

If the xlink:href technique is departed then how can it works for other SVG icons that I have on my page. My folder structure goes like this with sprite file inside the img folder. Then which tag can I use to load SVG icon from sprite file. image

5

as stated in MDN

some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.

that’s why you still can use it but in modern web standards its not the best practice. Anyway, check the icon class name after the # if its right or not

6

I tried using the href and the img tag but still no luck. The icon name is correct .What’s so strange that it works for some svg icons and not others. Here is screen shot of the svg icons.svgerror

7

the icon class name should be img/sprite.svg#bookmark-add1, u put the class name as the file name without additions

8

That’s class prefix you need to have before the icon name when you download it.

9

what is the name of this icon package or the site you downloaded from?

10

I downloaded from the icomoon.

11

i tried it, downloaded few svg icons and converted them to sprite.svg using this site SVG Sprite Generator then used it like that img/sprite.svg#name-of-the-icon-file without any prefexies.

12

Same occurs to me sometimes and it was a stackoverflow link that explains that if the canvas is too large the svg may not render.

Try wrapping with a div and apply this style:

width: 100%;
max-width: 8rem;
height: auto;

See if works for you

13

The icomoon generates sprite.svg file so there’s no need to convert it to one. Anyway I will give it a go.

14

Did you mean wrap the svg element around div.

15

yeah I see, its just a work around test

16

still no luck. I have the same issue with some images not visible on the page but they are present in the DOM.

17

I would suggest you create a GitHub repo with your code, or create a Codesandbox with an example that shows the problem.

Without a working example, we are just guessing as to what is wrong.

19

I think it’s just the id name that is the problem. If I rename it to for example icon-bookmark it shows up (after removing the visibility hidden on the parent).

I’m not sure what the rules are for the id naming and I didn’t really bother looking for it. But I imagine it might be something stricter than normal HTML5 elements.

I didn’t see the other icon-bookmark I just saw icon-bookmarks, so I guess that isn’t it.

BTW, you should gitignore the node_modules folder.

20

OK, I think I get it.

It is serving from dist and the build process does not seem to add/update all the files. So I’m not sure if you manually moved some of the folders and files into the dist folder or what, but the files in src and dist do not match.

So the sprite.svg in dist (and whatever else) is not the same as in src. If you just copy over the files it should work (but that’s not really a build process).

21

Thanks man it worked. But I did not move the files manually to the dist folder. How can I achieve this without having to do it manually.

22

You can copy files using a plugin (if all you need is to copy files).