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

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

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

[@dwayne6402]

I just took the courageous jump into the world of SVG, this has been a good first foray into SVG's.

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

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

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

[@GetTheGames]

idk what I would be without your vids

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

[@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 😁

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

[@anuragyadav1813]

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

[@neutilu_sss2308]

fantastic video! even 6 years later! Thank you!

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

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

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

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

[@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! :)

[@benzflynn]

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

[@mrMinstrel]

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

[@francescofaccia]

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

[@KevinPowell]

Thanks so much!

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

[@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 :)

[@darrencorona3695]

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

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

[@morganpantoja5583]

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

[@999sian]

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

[@R4eWclan]

im in the same boat lol

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

[@SharifulIslam-gn3dy]

Very comprehensive tutorial, thanks❤

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

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

[@hemanttewari7529]

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

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

[@einzelstein5291]

Thank you. Like your voice, speed and content!

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

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

[@jefffarmer592]

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

[@KartikSharma1607]

Thank you for this series.

[@KevinPowell]

No problem!

[@technicallygeckley14]

Your content is killer. Much appreciated.

[@sohail24x7]

your videos are absolute gold! Thanks!

[@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 :)

[@RD-jr8nv]

Finally a clear explanation

[@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 :)

[@Djchristian15]

Thanks, this explanation is very clear to me.

[@mareksawinski8225]

Can't wait for more!

[@PriyaSingh-rf4jy]

Really great video!

[@FederationOfLight]

Fantastic tutorial. Thanks Kevin!

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

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

[@chickenleg8824]

5:58 Wow you got entirely new emoticon just playing with these anchors

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

[@suzuranguru9673]

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

[@vibonacci]

12:40 What does "deprecciated" mean?

[@Itz_me_JB]

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

[@obsidianmd]

8:55 how did you do that? O.o What's the shortcut for it? Uh ok, I found it, it's ctrl+k+c for windows.

[@mohammedriyazuddin5649]

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

[@japhetmnyetta6826]

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

[@KevinPowell]

Thanks, really glad you enjoyed it?

[@gandalfsnowgrey7037]

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

[@abdullahalnayem1849]

Thanks! You make things crystal clear!

[@augustomeza8313]

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

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

[@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?

[@ghosthookcc2050]

great video, earned a sub!

[@philharland9591]

Ditto!

[@nikhiltyagi1080]

Amazing as always!!!!

[@shyamalkar2580]

Mane mane thanks

[@IsmaelFloresgenerasiondefuego]

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

[@norbertweinkauf5757]

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

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

[@EnglishRain]

Thank you for making this 4 part tutorial.

[@YasirMalik24]

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

[@mycomputerfund]

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

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

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

[@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 👍

[@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?

[@verbulent_flow6229]

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

[@erwin3760]

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

[@resulmevlutsahin7360]

I AM SO HAPPY.THANK YOU.

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

[@ChristinaOstil115]

Thank you for this helping with my homework assignment.

[@bensmith807]

If I exported all of my assets from adobe xd, would it be better to export it as svg instead of png since it is smaller?

[@KevinPowell]

It depends on the asset? I wouldn't export images as SVG (and would be surprised if they'd be smaller!). SVG tends to be best for icons and stuff, but it can get complicated at a certain point. My general rule of thumb is svg for icons/symbols, jpg for normal images, and png if I need transparency.

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

[@nabuystudio]

i have a trouble with external svg css. i used it in a ankertext markup ( a>img{example.svg}). The problem is the hight of ankertext is not the same with image file when i look at inspect element .

[@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?

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

[@amrs.3040]

Sorry Kevin . Still i am very confused of what SVG need to use if i can add things by CSS like gradient , reform shapes by transform method , background -image method with vector result .

[@codemaster9513]

This is pretty much a very basic svg. You can do so many cool things with svg. Go to tympanus.net/codrops/ and search for svg. You'll get a lot of cool interactive effects made with svg. Svg is the after effects in HTML world.

[@TheProDat]

Please do a video on making a CSS Road Map. Also SCSS would help more.

[@KevinPowell]

I've got some videos on SCSS coming out once this series is done :). As for a roadmap, do you mean a timeline type of thing?

[@TheProDat]

That's Great. Yaa like a timeline.

[@bbzitopirulito8915]

Nice, man! You are awesome!

[@downrodeo]

Thanks for these Kevin. Appreciate it!

[@jonvthvnz]

Skip to 2:03 to cut to the chase.

[@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?

[@0the0ambient0]

Great series. Thanks.

[@melvinaaron7323]

Thanks Kevin for your videos..

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

[@milanm6538]

Super interesting, and nice explained! Can we import SVGs from the file?

[@KevinPowell]

If you have an SVG, you should be able to open it up in your text editor without issue to get the code :).

[@luisejaureguivera4241]

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

[@sabuein]

Thank you, Kevin.

[@Buzca]

Great video. Thank you!

[@jannis1627]

Great Video! What syntaxt color theme are you using?

[@KevinPowell]

Atom Dark One

[@mirlamontano6640]

great video!!

[@tenminutetokyo2643]

Used to work with the guy who wrote the O’Reily book - Eisenberg.