I am nothing but praise for this channel! Incredibly well paced, editted and documented. Really fun and engaging! Thanks for putting up all this content. I'm super hyped for your podcast with James Quick!
This was a fantastic tutorial, especially for someone like me who is learning these types of web dev concepts while coming from the field of math and statistics and data. I use the R Shiny framework to create data dashboards, and I've been learning CSS, JS, and HTML to try and spruce my dashboards up. Learning about sprite maps from you was great and I really appreciate the video and all of the tools you showed how to use.
This is so great to hear ... (shameless plug) you may enjoy the video that I **JUST** released: th-cam.com/video/1-Gjec48nJs/w-d-xo.html It shows how to dynamically generate an SVG sprite within a React project.
Glad it helped! ... did you see the video I just released on using SVG Sprites with React? The video is long, but we write a script to generate the SVG Sprite for you. 🤩
Thank you so much for this tutorial. Great effort on your part. Helped me understand SVG Sprites much, much better! The only issue is that the SVGO command-line tool has now changed, and doesn't work the way you demonstrated here. So, could you make a separate video on SVGO with updated instructions on how to use it?
Hi Amy! Great video!! I’m wondering if the instructions could be modified a little to create a sprite sheet of svg’s to use in game development? I am trying to take a bunch of svg files and create an animation. Would you have any suggestions on how to do that? Thanks again for the great info!! Keep up the great work!!
Gracias por compartir; mi INGLES es muy malo pero con el TRADUCTOR te entendi todo... explicas muy bien.... saludos desde Venezuela..... Ya me SUSCRIBI te ganaste un nuevo seguidor 😀
Such a wonderful video. Thanks a lot! I want to know if there is a way to generate responsive sprites for raster images like png. There are many online tools but a npm package would be great to automate.
Hi, I'm having a problem with the generated svgs not carrying over the fill-styles of the original svg. Your method works for small simple icons that you'd want to color on the fly, but not for icons that are already colored and that you wouldnt want to re-color.. How should I go about this? Correction: Some colors show up, others do not. I have one icon that's all white, but it shows up black. I have another one that's quite colorful and some of the colors show up, but others on the same icon turn to black.
I think the problem is that none of the solutions you showed take into account for duplicate ID's of fill styles. The ID's overlap unless you remove them and make your SVG's fillstyles completely undefined.
Update - My assumption was correct. I made a program that takes a set of images and produces a sprite for me, in this I added *xmlns="**www.w3.org/2000/svg**" width=0 height=0 style="display:hidden;"* to the svg tag, and in each symbol I prepended each id with the symbol id. These two things are the solutions for the fill-related problems you'd experience with gradients.
There seems to be a new but similar issue surrounding external svg sprites when it comes to gradients. If you do not keep the svg within the same document then the gradients do not get rendered. This sucks :(
I found another fix for this. Put all the defs in the symbol tags at the top of the svg sprite instead of in the symbols. Then change the style to visibility:hidden.
Sorry for the delayed response. I think this comment came in while I was on vacation. Glad you got it figured out. You're right, my example was for simple, 1-color icon SVGs. When I've implemented more complex or multi-color SVGs (like a logo), I'll handle the implementation differently.
Yes! Check out this video: SVGs in CSS (th-cam.com/video/_ghOZ9LD9JY/w-d-xo.html) and How to Use SVGs with Base64 (th-cam.com/video/HxfgLyjPq8o/w-d-xo.html)
Thank you very much, your video is very good, but I'm going to watch it again with a few shots of tequila every time I hear it interesting, that's going to be interesting hahahaha greetings
Girl, I was figthing with sprites for a while. Now I just want to hug you, thank you very much, I love your videos. Keep up the good work.
Yeah! Glad you found it helpful!
I am nothing but praise for this channel! Incredibly well paced, editted and documented. Really fun and engaging! Thanks for putting up all this content. I'm super hyped for your podcast with James Quick!
You're too kind.
Truth!!!
This was a fantastic tutorial, especially for someone like me who is learning these types of web dev concepts while coming from the field of math and statistics and data. I use the R Shiny framework to create data dashboards, and I've been learning CSS, JS, and HTML to try and spruce my dashboards up. Learning about sprite maps from you was great and I really appreciate the video and all of the tools you showed how to use.
This is so great to hear ... (shameless plug) you may enjoy the video that I **JUST** released: th-cam.com/video/1-Gjec48nJs/w-d-xo.html It shows how to dynamically generate an SVG sprite within a React project.
Thank you so much for this awesome tutorial, how have I missed this channel all this time? No matter, subscribed.
Thanks! Really appreciate the subscribe.
what an underrated channel! explanations (voice, illustrations, etc.) are so clean and concise. Thank you so much for this video!
Thanks, Michael!!
Great video! Also tanks for putting all the docs in the description!
Sure thing! Glad you found it helpful!
Very good tutorial, easy to follow, very good teacher!
Thanks Kenny! Love hearing that feedback.
How do I use this as a background graphic in my CSS definition??
Wow awesome content! Just discover your channel and I'm going to watch other of your vid.
Thanks for sharing
Awesome! Thank you!
This video saved my life. Thank you so much.
Glad it helped! ... did you see the video I just released on using SVG Sprites with React? The video is long, but we write a script to generate the SVG Sprite for you. 🤩
Such an awesome video.. Thanks girl.. Keep it up!!
You're so welcome!
For a long time I was searching for same thing how to add multiple color vector icons in single SVG sprite image, Thanks Amy for this video 👍
You're welcome 😊
You are so sweet and easy to hear. Thank you so much ☺️
Thanks Ruth!
very intersting tutorial thanks for making this.🤝👍
Glad you liked it
Super glad I stumbled on this awesome tutorial. ))) Thanks a whole bunch. )))
Yeah! Glad you found it helpful!
Wow such a great, useful and funny teaching video! Thank you!
Awesome! Love hearing that!
Damn, this is well explained! Thank you!
Thank you! ❤️
OMG I wish we had more TH-camrs like you Amy! This video is amazing, thank you.
Thank you so much for this tutorial. Great effort on your part. Helped me understand SVG Sprites much, much better! The only issue is that the SVGO command-line tool has now changed, and doesn't work the way you demonstrated here. So, could you make a separate video on SVGO with updated instructions on how to use it?
You are a life saver!
Thanks, i am learning a lot with your video
That’s so good to hear!
Hi Amy! Great video!! I’m wondering if the instructions could be modified a little to create a sprite sheet of svg’s to use in game development? I am trying to take a bunch of svg files and create an animation. Would you have any suggestions on how to do that? Thanks again for the great info!! Keep up the great work!!
How do i configure sprite generator cli in webpack?
waw! Thank you, I will try to follow your tutorial.
Awesome! Let me know if you run into any trouble. I'm happy to help!
and with ? it works?
Thanks a lot! Very useful information.
Gracias por compartir; mi INGLES es muy malo pero con el TRADUCTOR te entendi todo... explicas muy bien.... saludos desde Venezuela..... Ya me SUSCRIBI te ganaste un nuevo seguidor 😀
Awesome!! So glad to hear that!!
Such a wonderful video. Thanks a lot! I want to know if there is a way to generate responsive sprites for raster images like png. There are many online tools but a npm package would be great to automate.
Wooooow!!! I love this channel.
Thanks Mfundo!
I TOTALLY LOVE YOUR VIDEOS!!!!!!!!!!!! THANK YOU!
Yeah! I'm so glad!!
Hi, I'm having a problem with the generated svgs not carrying over the fill-styles of the original svg. Your method works for small simple icons that you'd want to color on the fly, but not for icons that are already colored and that you wouldnt want to re-color.. How should I go about this?
Correction: Some colors show up, others do not. I have one icon that's all white, but it shows up black. I have another one that's quite colorful and some of the colors show up, but others on the same icon turn to black.
I think the problem is that none of the solutions you showed take into account for duplicate ID's of fill styles. The ID's overlap unless you remove them and make your SVG's fillstyles completely undefined.
Update - My assumption was correct. I made a program that takes a set of images and produces a sprite for me, in this I added *xmlns="**www.w3.org/2000/svg**" width=0 height=0 style="display:hidden;"* to the svg tag, and in each symbol I prepended each id with the symbol id. These two things are the solutions for the fill-related problems you'd experience with gradients.
There seems to be a new but similar issue surrounding external svg sprites when it comes to gradients. If you do not keep the svg within the same document then the gradients do not get rendered. This sucks :(
I found another fix for this. Put all the defs in the symbol tags at the top of the svg sprite instead of in the symbols. Then change the style to visibility:hidden.
Sorry for the delayed response. I think this comment came in while I was on vacation.
Glad you got it figured out. You're right, my example was for simple, 1-color icon SVGs. When I've implemented more complex or multi-color SVGs (like a logo), I'll handle the implementation differently.
Hmm..., interesting. Ahahahah. Love it.
Great!
Thank you
Is there any way to use SVG sprite from CSS like
background-image: ‘sprite.svg#logo’
?????????
Yes! Check out this video: SVGs in CSS (th-cam.com/video/_ghOZ9LD9JY/w-d-xo.html) and How to Use SVGs with Base64 (th-cam.com/video/HxfgLyjPq8o/w-d-xo.html)
Thank you very much, your video is very good, but I'm going to watch it again with a few shots of tequila every time I hear it interesting, that's going to be interesting hahahaha greetings
LOL whoever's watching this, stick 'til the very end because it's the best part!
LOL
wow Ajax in 2021. Adding sprite as an element... I hope nobody does this in production...
" Use xlink:href= " i used my every project its workin fine , but in webpack all ways give error to me...do you know what is the reson , plzzz help😢