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: ruclips.net/video/1-Gjec48nJs/видео.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. 🤩
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 😀
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!!
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.
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
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 (ruclips.net/video/_ghOZ9LD9JY/видео.html) and How to Use SVGs with Base64 (ruclips.net/video/HxfgLyjPq8o/видео.html)
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: ruclips.net/video/1-Gjec48nJs/видео.html It shows how to dynamically generate an SVG sprite within a React project.
what an underrated channel! explanations (voice, illustrations, etc.) are so clean and concise. Thank you so much for this video!
Thanks, Michael!!
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.
Wow awesome content! Just discover your channel and I'm going to watch other of your vid.
Thanks for sharing
Awesome! Thank you!
Great video! Also tanks for putting all the docs in the description!
Sure thing! Glad you found it helpful!
OMG I wish we had more RUclipsrs like you Amy! This video is amazing, thank you.
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 😊
Very good tutorial, easy to follow, very good teacher!
Thanks Kenny! Love hearing that feedback.
Super glad I stumbled on this awesome tutorial. ))) Thanks a whole bunch. )))
Yeah! Glad you found it helpful!
Such an awesome video.. Thanks girl.. Keep it up!!
You're so welcome!
Wow such a great, useful and funny teaching video! Thank you!
Awesome! Love hearing that!
How do I use this as a background graphic in my CSS definition??
very intersting tutorial thanks for making this.🤝👍
Glad you liked it
Damn, this is well explained! Thank you!
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. 🤩
You are so sweet and easy to hear. Thank you so much ☺️
Thanks Ruth!
Thanks, i am learning a lot with your video
That’s so good to hear!
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!!
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!
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!
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!!
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.
and with ? it works?
How do i configure sprite generator cli in webpack?
I TOTALLY LOVE YOUR VIDEOS!!!!!!!!!!!! THANK YOU!
Yeah! I'm so glad!!
Wooooow!!! I love this channel.
Thanks Mfundo!
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
Hmm..., interesting. Ahahahah. Love it.
Great!
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.
Is there any way to use SVG sprite from CSS like
background-image: ‘sprite.svg#logo’
?????????
Yes! Check out this video: SVGs in CSS (ruclips.net/video/_ghOZ9LD9JY/видео.html) and How to Use SVGs with Base64 (ruclips.net/video/HxfgLyjPq8o/видео.html)
Thank you
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😢