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.

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

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

[@dwayne6402]

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

[@neutilu_sss2308]

fantastic video! even 6 years later! Thank you!

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

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

[@anuragyadav1813]

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

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

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

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

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

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

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

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

[@GetTheGames]

idk what I would be without your vids

[@darrencorona3695]

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

[@999sian]

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

[@R4eWclan]

im in the same boat lol

[@mrMinstrel]

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

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

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

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

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

[@francescofaccia]

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

[@KevinPowell]

Thanks so much!

[@hemanttewari7529]

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

[@morganpantoja5583]

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

[@mohammedriyazuddin5649]

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

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

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

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

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

[@einzelstein5291]

Thank you. Like your voice, speed and content!

[@Djchristian15]

Thanks, this explanation is very clear to me.

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

[@erwin3760]

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

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

[@ChristinaOstil115]

Thank you for this helping with my homework assignment.

[@technicallygeckley14]

Your content is killer. Much appreciated.

[@FederationOfLight]

Fantastic tutorial. Thanks Kevin!

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

[@japhetmnyetta6826]

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

[@KevinPowell]

Thanks, really glad you enjoyed it?

[@KartikSharma1607]

Thank you for this series.

[@KevinPowell]

No problem!

[@RD-jr8nv]

Finally a clear explanation

[@jefffarmer592]

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

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

[@benzflynn]

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

[@sohail24x7]

your videos are absolute gold! Thanks!

[@abdullahalnayem1849]

Thanks! You make things crystal clear!

[@EnglishRain]

Thank you for making this 4 part tutorial.

[@gandalfsnowgrey7037]

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

[@augustomeza8313]

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

[@YasirMalik24]

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

[@melvinaaron7323]

Thanks Kevin for your videos..

[@suzuranguru9673]

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

[@resulmevlutsahin7360]

I AM SO HAPPY.THANK YOU.

[@norbertweinkauf5757]

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

[@sabuein]

Thank you, Kevin.

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

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

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

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

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

[@downrodeo]

Thanks for these Kevin. Appreciate it!

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

[@PriyaSingh-rf4jy]

Really great video!

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

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

[@mareksawinski8225]

Can't wait for more!

[@IsmaelFloresgenerasiondefuego]

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

[@everettmusicdojo]

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

[@Buzca]

Great video. Thank you!

[@luisejaureguivera4241]

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

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

[@expukpuk]

Kevin, you love talking...

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

[@mycomputerfund]

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

[@0the0ambient0]

Great series. Thanks.

[@abed-almajeedmansour9015]

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

[@Jade-gj4tn]

tysm this was so easy to understand

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

[@ghosthookcc2050]

great video, earned a sub!

[@philharland9591]

Ditto!

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

[@dopetag]

According to caniuse, is now supported by Safari

[@chickenleg8824]

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

[@thecoderabbi]

Thanks Kevin!

[@AdamCClark]

Well done!!!

[@mirlamontano6640]

great video!!

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

[@BenjaminRay]

This is excellent

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

[@user-co9du9xd4k]

Very informative video, thx !

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

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

[@bbzitopirulito8915]

Nice, man! You are awesome!

[@paulgallant3675]

Hi trying to do SVG file but not a programmer struggling

[@nikhiltyagi1080]

Amazing as always!!!!

[@shyamalkar2580]

Mane mane thanks