How to create and use an SVG Sprite

Подписаться 8 тыс.

Просмотров 18 тыс.

50% 1

In this video, we explore several different ways to create an SVG Sprite and how to use it within your code.
0:00 Intro and Beginning
0:46 What's a Sprite?
2:16 SVG Sprite Generator
2:41 Sprite code walkthrough
5:26 Cleaning up a sprite with tooling
5:53 Installing svgo
6:56 Setting up the configuration for svgo
8:31 Setting up an alias with Oh My Zsh to run the svgo command
9:38 Generating a Sprite with the svg-sprite-generator tool from the command line
12:05 Putting our SVG code into an external file
13:18 Loading the SVG Sprite with AJAX
🎁 FREE SVG CHEAT SHEET: selfteachme.ck.page/ee58f2eb85
7️⃣ Ways to use SVGs
✅ Pros and ❌ Cons for each method
💎 Tips for implementing
🔗 LINKS
+ SVG Sprite Generator Tool (web interface) - svgsprit.es/
+ On xlink:href being deprecated in SVG - css-tricks.com/on-xlinkhref-b...
+ svgo - github.com/svg/svgo
+ svgo configuration - gist.github.com/ahaywood/6604...
+ Video: Oh My ZSH - • git for Beginners (Par...
+ SVG Sprite Generator Command Line tool - github.com/frexy/svg-sprite-g...
+ XMLHttpRequest documentation - www.w3schools.com/xml/xml_htt...
+ Video : Ultimate Icon Component - • Building the Ultimate ...
OTHER VIDEOS IN THIS SERIES
+ Playlist: • Comprehensive Guide to...
+ Part 1 - Getting Started with SVGs: • Getting Started with SVGs
+ Part 2 - SVG in CSS: • SVGs in CSS
+ Part 3 - Svgs with Base64 - • How to Use SVGs with B...
+ Part 4 - How to create and use an SVG Sprite - You are here, THAT'S THIS VIDEO
🤖 CODE
+ CodePen - Sprite embedded in HTML - codepen.io/ahaywood/pen/ZEBERqR
+ CodePen - Imported with AJAX - codepen.io/ahaywood/pen/mdOPbbM
👉🏻 Get Updates and Exclusive content at selfteach.me
💥 SelfTeach.me is a Zeal show: codingzeal.com

Наука

Опубликовано:

16 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 74

@perrosaurio725 7 месяцев назад

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.

@SelfTeachMe 7 месяцев назад

Yeah! Glad you found it helpful!

@DesignfulDev 3 года назад

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!

@SelfTeachMe 3 года назад

You're too kind.

@JamesQQuick 3 года назад

Truth!!!

@matteo.casetta 3 года назад

Great video! Also tanks for putting all the docs in the description!

@SelfTeachMe 3 года назад

Sure thing! Glad you found it helpful!

@colindante5164 2 года назад

Super glad I stumbled on this awesome tutorial. ))) Thanks a whole bunch. )))

@SelfTeachMe 2 года назад

Yeah! Glad you found it helpful!

@GH-pu3xc 2 года назад

Damn, this is well explained! Thank you!

@SelfTeachMe 2 года назад

Thank you! ❤️

@user-jt7wb3zc1m 3 года назад

Wow such a great, useful and funny teaching video! Thank you!

@SelfTeachMe 3 года назад

Awesome! Love hearing that!

@blazed-space 8 месяцев назад

Thank you so much for this awesome tutorial, how have I missed this channel all this time? No matter, subscribed.

@SelfTeachMe 7 месяцев назад

Thanks! Really appreciate the subscribe.

@kennyestrella7726 3 года назад

Very good tutorial, easy to follow, very good teacher!

@SelfTeachMe 3 года назад

Thanks Kenny! Love hearing that feedback.

@andrewdisher2086 5 месяцев назад

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.

@SelfTeachMe 4 месяца назад

This is so great to hear ... (shameless plug) you may enjoy the video that I **JUST** released: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-1-Gjec48nJs.html It shows how to dynamically generate an SVG sprite within a React project.

@ruthrojasp 3 года назад

You are so sweet and easy to hear. Thank you so much ☺️

@SelfTeachMe 3 года назад

Thanks Ruth!

@mehrdadkhorasani6009 4 месяца назад

This video saved my life. Thank you so much.

@SelfTeachMe 4 месяца назад

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. 🤩

@kotofun 2 года назад

Thanks a lot! Very useful information.

@w2ytube 3 года назад

Wow awesome content! Just discover your channel and I'm going to watch other of your vid. Thanks for sharing

@SelfTeachMe 3 года назад

Awesome! Thank you!

@michaeltung9664 3 года назад

what an underrated channel! explanations (voice, illustrations, etc.) are so clean and concise. Thank you so much for this video!

@SelfTeachMe 3 года назад

Thanks, Michael!!

@GLawSomnia 4 месяца назад

You are a life saver!

@shaileshmankar1258 2 года назад

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 👍

@SelfTeachMe 2 года назад

You're welcome 😊

@shivangigupta8691 10 месяцев назад

Such an awesome video.. Thanks girl.. Keep it up!!

@SelfTeachMe 7 месяцев назад

You're so welcome!

@JorgeToledopomodoro 3 года назад

Thanks, i am learning a lot with your video

@SelfTeachMe 3 года назад

That’s so good to hear!

@shifronim8950 3 года назад

waw! Thank you, I will try to follow your tutorial.

@SelfTeachMe 3 года назад

Awesome! Let me know if you run into any trouble. I'm happy to help!

@sanjeeva1203 2 года назад

very intersting tutorial thanks for making this.🤝👍

@SelfTeachMe 2 года назад

Glad you liked it

@archangel0137 2 года назад

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?

@MfundoShabalala 2 года назад

Wooooow!!! I love this channel.

@SelfTeachMe 2 года назад

Thanks Mfundo!

@kerrykreiter445 Год назад

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!!

@Grishopping 2 года назад

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 😀

@SelfTeachMe 2 года назад

Awesome!! So glad to hear that!!

@dmytrozaporozhskiy4848 2 года назад

Thank you

@tabliqatchi6696 2 года назад

OMG I wish we had more RU-vidrs like you Amy! This video is amazing, thank you.

@shamlikiruba Год назад

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.

@gabrielcampos9948 2 года назад

I TOTALLY LOVE YOUR VIDEOS!!!!!!!!!!!! THANK YOU!

@SelfTeachMe 2 года назад

Yeah! I'm so glad!!

@cassandraspencer1476 Год назад

How do I use this as a background graphic in my CSS definition??

@hansTrauwitz Год назад

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

@lianglaw6923 3 года назад

Hmm..., interesting. Ahahahah. Love it.

@SelfTeachMe 3 года назад

Great!

@stefanofattori89 6 дней назад

and with ? it works?

@simrndeepsingh7121 2 года назад

How do i configure sprite generator cli in webpack?

@DesignfulDev 3 года назад

LOL whoever's watching this, stick 'til the very end because it's the best part!

@SelfTeachMe 3 года назад

LOL

@squaidinkarts 3 года назад

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.

@squaidinkarts 3 года назад

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.

@squaidinkarts 3 года назад

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.

@squaidinkarts 3 года назад

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 :(

@squaidinkarts 3 года назад

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.

@SelfTeachMe 2 года назад

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.

@imkapilgehlot 2 года назад

Is there any way to use SVG sprite from CSS like background-image: ‘sprite.svg#logo’ ?????????

@SelfTeachMe 2 года назад

Yes! Check out this video: SVGs in CSS (ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_ghOZ9LD9JY.html) and How to Use SVGs with Base64 (ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HxfgLyjPq8o.html)