Svg sprites problem


I’m using sprite.svg on Mosh’s HTML and CSS course, part 3 building the website.
He provides all the svg icons in a folder and then I create a svg sprite file using one of the online
sprite generators.
All of them work except one (chevron) which just comes up as a black square.
Couldn’t figure it out at all so I decided to grab a free svg icon online similar and create a new sprite.svg file with that included.
Same problem occurs. All the other icons work fine but the new chevron svg I included in the new sprite.svg shows up as a black square too!
I can’t fathom it because in theory the two chevron svgs are totally none related.
I tried to take off all classes to make sure no CSS was messing things up but to no avail.
It’s driving me a bit mad haha. Hope someone can help.

Hi! my svg files are not displaying on chrome pls can u help? I downloaded the files from to images files. I have checked my code but seen no error.

I’m also having a problem with the chevron, maybe it is a design error or something. When I tried to add another icon from font awesome it worked fine.

I think there is a difference between svg sprite generator and normal generator.

In mine, non of the svg images are displaying on the chrome browser after using sprite generator, downloading and saving it in images. My file path is correct.

Is your image folder inside your CSS folder? I think it is something to do with the path.

Yeah. Its inside the CSS folder

So I believe the correct path should be: use xlink:href=“css/images/sprite.svg#wordpress”

or you can remove the images folder from the CSS folder. Leave the CSS shoulder only for normalize.css and style.css

you can go to the svg sprite file and edit the chevron circle to this

< circle cx=“25.5” cy=“25.5” r=“25.5” fill=“#393939”>.

You need to add the fill property which is not present in the svg file.

There are few bugs in the svg files, I don’t remember all but you can ask here if you face any issue. We will try to solve it together.
Happy coding :slight_smile:

1 Like

thanks very much. it worked.

Another fix for this is to download the .zip file give below in the video where he teaches the sprite and chevron stuff, then after downloading the file just extract it, locate to his chevron.svg file and just copy and paste, or just drag and drop and replace the chevron file or the whole sprite, this way if there is any other issue with your sprites, it will be fixed and be exactly like Mosh’s video. Hope this fixes any further issues faced.

1 Like

@D0ll4R worked great! thanks :slight_smile:

thank you that helped immensely, i went ahead and copied the sprite file from here and it fixed the issue. thanks