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 svgsprite.es 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.
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.
