How to create and use an SVG Sprite

Ғылым және технология

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

Пікірлер: 74

  • @perrosaurio725
    @perrosaurio7257 ай бұрын

    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

    @SelfTeachMe

    7 ай бұрын

    Yeah! Glad you found it helpful!

  • @DesignfulDev
    @DesignfulDev3 жыл бұрын

    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

    @SelfTeachMe

    3 жыл бұрын

    You're too kind.

  • @JamesQQuick

    @JamesQQuick

    3 жыл бұрын

    Truth!!!

  • @matteo.casetta
    @matteo.casetta3 жыл бұрын

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

  • @SelfTeachMe

    @SelfTeachMe

    3 жыл бұрын

    Sure thing! Glad you found it helpful!

  • @kotofun
    @kotofun2 жыл бұрын

    Thanks a lot! Very useful information.

  • @blazed-space
    @blazed-space8 ай бұрын

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

  • @SelfTeachMe

    @SelfTeachMe

    7 ай бұрын

    Thanks! Really appreciate the subscribe.

  • @colindante5164
    @colindante51642 жыл бұрын

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

  • @SelfTeachMe

    @SelfTeachMe

    2 жыл бұрын

    Yeah! Glad you found it helpful!

  • @kennyestrella7726
    @kennyestrella77263 жыл бұрын

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

  • @SelfTeachMe

    @SelfTeachMe

    2 жыл бұрын

    Thanks Kenny! Love hearing that feedback.

  • @michaeltung9664
    @michaeltung96643 жыл бұрын

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

  • @SelfTeachMe

    @SelfTeachMe

    3 жыл бұрын

    Thanks, Michael!!

  • @mehrdadkhorasani6009
    @mehrdadkhorasani60094 ай бұрын

    This video saved my life. Thank you so much.

  • @SelfTeachMe

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

  • @user-jt7wb3zc1m
    @user-jt7wb3zc1m3 жыл бұрын

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

  • @SelfTeachMe

    @SelfTeachMe

    2 жыл бұрын

    Awesome! Love hearing that!

  • @GH-pu3xc
    @GH-pu3xc2 жыл бұрын

    Damn, this is well explained! Thank you!

  • @SelfTeachMe

    @SelfTeachMe

    2 жыл бұрын

    Thank you! ❤️

  • @andrewdisher2086
    @andrewdisher20865 ай бұрын

    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

    @SelfTeachMe

    4 ай бұрын

    This is so great to hear ... (shameless plug) you may enjoy the video that I **JUST** released: kzread.info/dash/bejne/Y2F7zMecZJvUetY.html It shows how to dynamically generate an SVG sprite within a React project.

  • @ruthrojasp
    @ruthrojasp3 жыл бұрын

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

  • @SelfTeachMe

    @SelfTeachMe

    3 жыл бұрын

    Thanks Ruth!

  • @GLawSomnia
    @GLawSomnia4 ай бұрын

    You are a life saver!

  • @w2ytube
    @w2ytube3 жыл бұрын

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

  • @SelfTeachMe

    @SelfTeachMe

    3 жыл бұрын

    Awesome! Thank you!

  • @shivangigupta8691
    @shivangigupta869110 ай бұрын

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

  • @SelfTeachMe

    @SelfTeachMe

    7 ай бұрын

    You're so welcome!

  • @shaileshmankar1258
    @shaileshmankar12582 жыл бұрын

    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

    @SelfTeachMe

    2 жыл бұрын

    You're welcome 😊

  • @JorgeToledopomodoro
    @JorgeToledopomodoro3 жыл бұрын

    Thanks, i am learning a lot with your video

  • @SelfTeachMe

    @SelfTeachMe

    3 жыл бұрын

    That’s so good to hear!

  • @shifronim8950
    @shifronim89503 жыл бұрын

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

  • @SelfTeachMe

    @SelfTeachMe

    3 жыл бұрын

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

  • @archangel0137
    @archangel01372 жыл бұрын

    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?

  • @sanjeeva1203
    @sanjeeva12032 жыл бұрын

    very intersting tutorial thanks for making this.🤝👍

  • @SelfTeachMe

    @SelfTeachMe

    2 жыл бұрын

    Glad you liked it

  • @MfundoShabalala
    @MfundoShabalala2 жыл бұрын

    Wooooow!!! I love this channel.

  • @SelfTeachMe

    @SelfTeachMe

    2 жыл бұрын

    Thanks Mfundo!

  • @dmytrozaporozhskiy4848
    @dmytrozaporozhskiy48482 жыл бұрын

    Thank you

  • @kerrykreiter445
    @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
    @Grishopping2 жыл бұрын

    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

    @SelfTeachMe

    2 жыл бұрын

    Awesome!! So glad to hear that!!

  • @shamlikiruba
    @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.

  • @tabliqatchi6696
    @tabliqatchi66962 жыл бұрын

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

  • @cassandraspencer1476
    @cassandraspencer1476 Жыл бұрын

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

  • @gabrielcampos9948
    @gabrielcampos99482 жыл бұрын

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

  • @SelfTeachMe

    @SelfTeachMe

    2 жыл бұрын

    Yeah! I'm so glad!!

  • @stefanofattori89
    @stefanofattori895 күн бұрын

    and with ? it works?

  • @hansTrauwitz
    @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

  • @simrndeepsingh7121
    @simrndeepsingh71212 жыл бұрын

    How do i configure sprite generator cli in webpack?

  • @lianglaw6923
    @lianglaw69233 жыл бұрын

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

  • @SelfTeachMe

    @SelfTeachMe

    2 жыл бұрын

    Great!

  • @squaidinkarts
    @squaidinkarts3 жыл бұрын

    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

    @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

    @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

    @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

    @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

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

  • @DesignfulDev
    @DesignfulDev3 жыл бұрын

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

  • @SelfTeachMe

    @SelfTeachMe

    3 жыл бұрын

    LOL

  • @imkapilgehlot
    @imkapilgehlot2 жыл бұрын

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

  • @SelfTeachMe

    @SelfTeachMe

    2 жыл бұрын

    Yes! Check out this video: SVGs in CSS (kzread.info/dash/bejne/kZucsbxyfKeferw.html) and How to Use SVGs with Base64 (kzread.info/dash/bejne/eqyaya6ymrPXaNI.html)

  • @PouyaAtaei
    @PouyaAtaei Жыл бұрын

    wow Ajax in 2021. Adding sprite as an element... I hope nobody does this in production...

  • @chathurapriyashan5531
    @chathurapriyashan5531 Жыл бұрын

    " 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😢

Келесі