A beginners guide to SVG | Part One: The Why, What, and How

There are a lot of good reasons that we should be using SVGs, but they can seem complicated and scary. This video, which is part one of a mini-series exploring SVGs, looks at why we should be using SVGs and what they actually are (it stands for scalable vector graphic), and then the absolute, very basics of using them in your work.
This video will be followed up by how to make your own SVGs, creating an icon system and adding in some basic animations.
Also, I had some video issues with this one, so sorry for any quality issues. Already figured out the cause and it'll be fixed for the next video :). I also TOTALLY missed a part with the greenscreen, haha. Ooops.
Inkscape (for vector software): inkscape.org/en/
Some useful SVG links that have helped me in the past and with researching for this series:
unicorn-ui.com/...
rafaltomal.com...
css-tricks.com...
css-tricks.com...
css-tricks.com...
taye.me/blog/sv...
frontstuff.io/...
---
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowel...
---
My Code Editor: VS Code - code.visualstu...
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...

[@KevinPowell]

So I was in a bit of a time crunch with this one and completely missed one part with the green screen! 😳

[@darshanmehta4743]

That's alright...and Thank you for the series🙂

[@AhmedTolys]

🥀🌹🌺⁦

[@smickandily]

your audio is slightly out of sync too

[@DonatellaSafir]

Hi Kevin!! Thanks for the video, and I will like to ask you how do you get the code of example svg??? 😮 It appears at 7:11 thanks a lot!! 🤗

[@zachwhite8054]

Don't sweat it. This video is awesome.

[@nishanthsubramanya1931]

You know man, I really like the way you present yourself, nothing hidden, just plain KEVIN POWELL!! Cheers, loving your videos daily!

[@KevinPowell]

So glad you like my videos, and very nice of you to say that I'm authetic! I try to be, so I appreciate the comment!

[@TheElkster]

Wow! Absolutely fantastic video! Really looking forward to watching the others in this series and trying it out for myself! I have known about SVG for years but until watching your video, I never thought about delving into it! Thanks Kevin!! 😀

[@KevinPowell]

Glad you enjoyed the video Paul! SVG still scares me a little, even after making this series, lol. It's like this whole other world, but it opens up some awesome possiblities and you can do some really fun stuff with it (beyond saving some KBs).

[@luiscolome75]

This Christmas holidays I'm digging into SVG's, and I knew you would have at least a couple of videos about it. Thanks million Kevin.

[@trudyandgeorge]

I'm just starting out and am loving your channel, thank you. One quick thing: features deprecate, cars depreciate. And to any haters I say this: whenever someone mispronounces a word it's because they've learned it through reading rather than hearing which deserves mad respect.

[@MrWyldWolf]

Great video! In my opinion, SVGs are one of the best kept secrets of web design.

[@KevinPowell]

Someone said to me that they seemed like a dark art, and that's how I saw them too for so long. They're scary because they look different (in the code), and have lots of numbers, but it's not so bad 😁

[@neutilu_sss2308]

fantastic video! even 6 years later! Thank you!

[@thewadegreen]

I just saw you for the first time on your CSS battle on Web Dev Simplified, and then I searched for a SVG tutorial and this video came up. Thanks for all the helpful videos! Can't wait to watch through the rest of your content.

[@facundocorradini]

Great video! I find SVGs to be the most underrated web technology (and a really useful one). Can't wait to see the rest of the series!

[@bambooindark1]

But I have question about how it compare with Canvas.

[@pixelum2023]

VERY interesting! I knew about SVGs way back in the 90s or early 2000s. But back then we had to convert them to raster, since browsers did not support them! And I did not know that they're just code that can be embedded and manipulated DIRECTLY via CSS. Wow! That's a real game changer! It open-up tons of possibilities! Thanks!

[@branislavcavic5886]

Great timing haha. Just building a website for a friend and I started using svg for the first time and it bothered me that I have to put my svg with the rest of the html in order to use fill and other cool stuff but now with symbol at least it is in the bottom of the page. Thanks again! :)

[@solomondavid210]

Thank you, Kelvin Powell, i am a big fan of your works and i really appreciate what you do because it has made programming easier and more comfortable for me, thanks again!

[@thelonercoder5816]

this is amazing! Literally never knew how powerful SVGs were until now. I can imagine all the things I can create with them haha. I'm creating a map app so I plan on using them.

[@gmangsxr750]

Thanks for all the content Kevin. You’re like the Derek Banas of CSS. Clean, clear, to the point, and live examples. Demystifying on the fly, thanks!!! (Side note, I think it’s “deprecated” not “depreciated”)

[@KevinPowell]

It is, I said it wrong :\ But glad you like my content, thanks for the kind words!

[@anuragyadav1813]

2 years later and it's still helpful 🔥🔥🔥🖤

[@efremmallach6501]

Excellent video. Very clear explanations. I'm going to recommend it to my intro web development students. However, I'd suggest you look up the difference between "depreciated" (lost value, like a used car) and "deprecated" (an outdated feature we shouldn't use, which is what you meant at 12:41 and 12:57). The words are similar, but they're not the same.

[@abdelmonaemshahat412]

this is the most interesting issue we face it and we couldn't understand it. thanks kevin for explaining that weird issue . i hope we finally understand it.

[@KevinPowell]

I hope I'm able to clear some things up on it!

[@abdelmonaemshahat412]

of course and waiting for more episodes

[@shvideo1]

When using the tag, it's not just wrapping your SVG in this tag. I did just that on my SVG and transferred the width, height and viewBox properties to the tag and now it's not rendering!! It would have been nice if you wrapped the code in your VS Code so we could compare! My SVG is a desk lamp and uses tags. May be that's why! Who knows!!

[@darrencorona3695]

Kevin, thank you very much. You have explained it really effectively.

[@mrMinstrel]

A much needed topic to explore...take it to the limits!

[@GetTheGames]

idk what I would be without your vids

[@999sian]

This really helped with my university coursework with everything going on right now

[@R4eWclan]

im in the same boat lol

[@francescofaccia]

Greetings from Italy Kevin! you are a hell of a teacher!

[@KevinPowell]

Thanks so much!

[@morganpantoja5583]

This is such a great quality video!! you did a really great job. Very well explained

[@hemanttewari7529]

Thanks Kevin, your explanation was very simple and easy to understand..

[@francescopasin1928]

Yeeeaah!! Finally a video about SVG :) hope you do one about SVG animations!! Great Job! Ad always;)

[@KevinPowell]

I'll be looking at some basic animation stuff :)

[@mohammedriyazuddin5649]

I'm always liking your videos before watching coz i knw ur the best god bless you...😊

[@blokche_dev]

The SVG format is amazing! =) For a quick and comprehensible introduction, you can also check out the book Chris Coyer - from CSS Tricks - has written. Only what you need to know as a frontend developer.

[@KevinPowell]

Yup, his book is good :)

[@sheriffcrandy]

2:19 the reason scalable is part of the name is because the image automatically scales to appropriate coordinate sizes when being displayed on different screens (desktop, mobile device, etc.).

[@parasarora5869]

that's what I was searching for...thanks for the video...i am extremely happy...thank you very much sir!!😊

[@KevinPowell]

No problem at all!

[@KartikSharma1607]

After this series, I would love to see a series for animation framework like GSAP, anime, velocity and KUTE

[@KevinPowell]

Depending on how this goes, I *might* look at some basics of GSAP and doing a simple animation using it on something.

[@KartikSharma1607]

Kevin Powell while GSAP is gold standard for animation, most of the plugins are paid. I haven't seen lots of tutorials for KUTE.js you might wanna take a look at that too

[@sunshineremovalsvic4576]

GSAP with ScrollMagic for total control. Have been using free version for a while.

[@12ty]

Kevin Powell Yes please!

[@jonathanhammond2731]

YOU DID GREAT! One day, I will have plenty of money and will be able to support you financially. In the meantime, I gave you the thumbs up. See you in the RWD Slack!

[@Djchristian15]

Thanks, this explanation is very clear to me.

[@terellemontalvo7381]

Hi Kevin!, Thank you so much for this tutorial, it helped me get started with SVG's. Just one thing, I took your example and used and tags with my own SVG's, but the stored SVG's at the bottom are taking up space even though they are not visible. I tried display: none; but can't find a way to hide the bottom SVG's without also hiding where I call them using the tag. Any advice?

[@KartikSharma1607]

Thank you for this series.

[@KevinPowell]

No problem!

[@ChristinaOstil115]

Thank you for this helping with my homework assignment.

[@einzelstein5291]

Thank you. Like your voice, speed and content!

[@BobMazzo]

Thanks for this video. It was great. Sorry for the correction, but I believe he meant to say "This has been deprecated" at 12:40.

[@technicallygeckley14]

Your content is killer. Much appreciated.

[@Michael-yu9ix]

Great video. Thanks for the upload! Just one question: How did you manage the CSS code to overwrite the inline styles? I assume there must be inline styles in the circle elements in the svg code otherwise they shouldn't have colours from the start right? Thanks Michael

[@RD-jr8nv]

Finally a clear explanation

[@sabuein]

Thank you, Kevin.

[@FederationOfLight]

Fantastic tutorial. Thanks Kevin!

[@sohail24x7]

your videos are absolute gold! Thanks!

[@verbulent_flow6229]

I just LOVE Scalar Vector Graphics because it is so much more fun that plain bitmap.

[@Itz_me_JB]

Thank you for this. SVG looked so intimidating at first for a noob like me.

[@decorummortis5175]

I just saw this recently at work and had no idea how to use it. Coworkers were trying to get the fill of an external sourced svg to go to a hover color and we couldn't. This explains it though yay

[@KevinPowell]

It's a little annoying that it plays differently in different situations, but I'm glad this helped :)

[@gandalfsnowgrey7037]

Thank you very much! I have been looking for this for a long time...👍👍👌

[@abdullahalnayem1849]

Thanks! You make things crystal clear!

[@resulmevlutsahin7360]

I AM SO HAPPY.THANK YOU.

[@jefffarmer592]

I think you meant deprecated instead of depreciated ;-). But this is a great starting intro to svg.

[@melvinaaron7323]

Thanks Kevin for your videos..

[@coming..back..in..2027]

I google svg and when I saw your face in one of the videos I said yesss I will understand svg and that you I did thump up

[@augustomeza8313]

Amazing video! you are awesome Kevin, you make everything so easy.

[@palmwaytech]

On a web site which im editing , trying to get these to work ,how to use them, using the mail icon an svg, and great tutorial. Thank you.

[@japhetmnyetta6826]

YOUR TUTORIAL IS ORGANIZED ITS GOOD FOR SELF LEARNING .GOOD VERY GOOD

[@KevinPowell]

Thanks, really glad you enjoyed it?

[@erwin3760]

I was about to comment the green screen issue then I saw your comment in the video description ^^

[@EnglishRain]

Thank you for making this 4 part tutorial.

[@YasirMalik24]

really hepful. got lot of new info with just watching your videos. thanks again

[@septruiz3446]

Hi Kevin, awesome video! I just have a little doubt. I don't understand why when you paste the "symbol" SVG code at the bottom of the HTML markup, the SVG doesn't render in viewport and you need to recur to the "use" statement. I tried to follow the tutorial, but the SGV always show without any help. Please help. I feel I am missing something important here. Once again thank you for an awesome tutorial. Sept

[@norbertweinkauf5757]

Thanks a lot for this guide. Keep up the excellent work!

[@suzuranguru9673]

good job man, I really appreciate your videos, keep it up

[@stefanbengtsson3230]

Kevin, you're the best. I think I've seen all your videos. A question outside this topic. I read an article about "Full Width Containers in Limited Width Parents". Can't you make a video about that.

[@KevinPowell]

I think I've done something like that in a video in the past... I forget which one I might have done it in though, it would have been a long time ago! I could make a video specicially looking at it though, for sure. I'll add it to my list 👍

[@XeiDaMoKaFE]

a vector is a reference of direction right , is the actual motion right , therefore the "scalable" is meant to to reference that is not static , it's only a pleomasm if vectors couldn't be static

[@rawr2196]

The red one in the end is soo creepy o.O Such u great vid once again tho

[@shyamalkar2580]

I aam follow to viidio next timr

[@downrodeo]

Thanks for these Kevin. Appreciate it!

[@mareksawinski8225]

Can't wait for more!

[@perkin524]

Great video, but 'deprecate', not 'depreciate'!

[@KevinPowell]

Hah, you're totally right... not sure what happened there, lol.

[@misterhtmlcss]

I was laughing after the second time. Awww well green screen, wrong word, but still a useful video.

[@jboxy]

I did it wrong my entire life lol

[@job4810]

Perkin524 Actually "depreciate" is just another word for "deprecate", so Kevin Powell was very correct using that word. :)

[@mitchpowell]

@@job4810 - not quite the same word. Deprecated means that it is still in use, but only for historical purposes and it will be removed probably in the next big release. Depreciated means the monetary value of something has decreased over time. E.g., cars typically depreciate in value. stackoverflow.com/questions/9208091/the-difference-between-deprecated-depreciated-and-obsolete/9208164

[@Natali-gl4tr]

Thank you!Very helpful video!👍👍👍

[@benzflynn]

14:21 Deprecated, not depreciated - though I guess it amounts to the same.

[@PriyaSingh-rf4jy]

Really great video!

[@Penfinity]

Hey Kevin, I have an issue whent I'm using because it draw a box of 300x150 and I have to manually resize the path inside to fit the height and width I give to the svg. Is that normal?

[@Buzca]

Great video. Thank you!

[@stableschippenham]

Nice, any tips on including the svg from a file so the styles still work eg with js? And or building up svgs from components

[@IsmaelFloresgenerasiondefuego]

very useful this video... you're one of the best

[@0the0ambient0]

Great series. Thanks.

[@mycomputerfund]

Appreciate the video as always. Keep up the good work :)

[@thecoderabbi]

Thanks Kevin!

[@jnoah7537]

Too shy to leave a comment!!??🤔 NOT ME!! 😁😂 Ive been wanting to learn more of SVGs

[@KevinPowell]

Glad to hear it! Looks like you aren't the only one either, this seems like it's going to be a popular topic 👍

[@jnoah7537]

Kevin Powell yes sir!😀 The series will be great. It came right on tone for me. Can't wait to see part 2.

[@Jade-gj4tn]

tysm this was so easy to understand

[@ghosthookcc2050]

great video, earned a sub!

[@philharland9591]

Ditto!

[@MrConway007]

Hi Kevin, but how do you export an SVG out from Illustrator? There seems to be a multitude of options and it's very overlwelming to know which options to choose

[@chips3393]

How did you comment out multiple lines of code after painting the area with your mouse? I have never seen that and it seems super efficient! :O

[@anshul9856]

ctrl + ? is the shortcut

[@hugocsl]

Hey yo Kevin, thx for that great video man! I have a question, there is a way to keep this SVG symbols in some kind of "sprite", (in one huge external file), and still be able apply some CSS in it by SVG+href from that external symbol file? So, can I call this symblo from oneother file an still can put some CSS in it like fill color or stroke?

[@KevinPowell]

When I look at making an icon system, I'll explore using a sprite as well as other ways. If it's an external file though, there isn't much you can do to style it.

[@hugocsl]

Ok Kevin anyway that is a cool tip ;)

[@andrew.schaeffer4032]

Thanks so much for putting this together. Question: Do you know if there's any way to be able to control the color of an svg that's been embedded as an image like ? I tried putting custom css variables in the fill and height section of the svg before embedding the image as an svg - but the svg doesn't seem to link to the stylesheet. But how cool would that be eh?

[@sespider]

Thank you. I've been using PNGs for the longest time. And now switching to SVGs. However, the SVGs always looks weird. The vectors keep changing out of shape. Mostly in the text shapes, although they are no longer fonts.

[@luisejaureguivera4241]

Thanks a lot for this vid! I helped me tons!

[@abed-almajeedmansour9015]

Thanx bro .. you helped me a lot with the tutorial and resources

[@jannis1627]

Great Video! What syntaxt color theme are you using?

[@KevinPowell]

Atom Dark One

[@everettmusicdojo]

Awesome! Thanks so much. I cant wait to start coding!

[@JimKernix]

How do you get an svg file to only show the tag info in VS Code? You svg file when viewed in VS Code has an SVG tag, and inside of that thee are CIRCLE tags and a PATH tag. However, when I open an SVG file in VS Code there are 100's of lines of code: a g tag, a script tag, defs, lineargradient, stop, metadata, a bunch of xmlns attributes, ... How do you create an SVG and export/save as without all that junk? Is it a settings thing for the program you use to create them? I do not have Illustrator, I have Inkscape. And downloading an SVG from Pixabay was even worse. I ask because I need to make/build 1000's of guitar chords but building them manually in Inkscape would take a really long time. I want to see if I can use JavaScript to build them, but I need a clean working template before I can start trying that. Any help appreciated. Would this be better to ask in your discord server?

[@bbzitopirulito8915]

Nice, man! You are awesome!

[@nikhiltyagi1080]

Amazing as always!!!!

[@shyamalkar2580]

Mane mane thanks

[@BenjaminRay]

This is excellent

[@mohammedriyazuddin5649]

you have clarity 😊

[@hookedupfishinghardhitta]

Hope this helps a friend of mine's that I have helping me with my logo designs. I've sent him your video in hopes that he can learn to send an SVG file to the lady doing my logo. Thanks

[@dopetag]

According to caniuse, is now supported by Safari

[@AdamCClark]

Well done!!!

[@mirlamontano6640]

great video!!

[@Ione1916]

The only reason I am interested in SVG files is that they are use to cut fabric when used in cutting machines - like cricut or brother scan and cut.