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.
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!! 😀
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).
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.
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 😁
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!
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! :)
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.
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.
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!
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.
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”)
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.).
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!!
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.
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
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
@@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
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!
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
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
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?
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.
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 👍
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
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
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.
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?
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
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?
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.
![How to create SVG shapes [ A beginners guide to SVG part 2 ]](http://i.ytimg.com/vi/9Y4P3FvZ5bg/mqdefault.jpg)
![How to create SVG shapes [ A beginners guide to SVG part 2 ]](/img/tr.png)
![What are SVG viewport and viewBox? [ A beginners guide to SVG part 3 ]](http://i.ytimg.com/vi/TBYJ2V1jAlA/mqdefault.jpg)
So I was in a bit of a time crunch with this one and completely missed one part with the green screen! 😳
That's alright...and Thank you for the series🙂
🥀🌹🌺
your audio is slightly out of sync too
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!! 🤗
Don't sweat it. This video is awesome.
I just took the courageous jump into the world of SVG, this has been a good first foray into SVG's.
You know man, I really like the way you present yourself, nothing hidden, just plain KEVIN POWELL!! Cheers, loving your videos daily!
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!
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.
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.
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!! 😀
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).
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.
Great video! In my opinion, SVGs are one of the best kept secrets of web design.
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 😁
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!
fantastic video! even 6 years later! Thank you!
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! :)
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!
But I have question about how it compare with Canvas.
2 years later and it's still helpful 🔥🔥🔥🖤
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.
I hope I'm able to clear some things up on it!
of course and waiting for more episodes
idk what I would be without your vids
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.
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!
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.
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”)
It is, I said it wrong :\ But glad you like my content, thanks for the kind words!
This really helped with my university coursework with everything going on right now
im in the same boat lol
A much needed topic to explore...take it to the limits!
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.).
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!!
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.
Yup, his book is good :)
Kevin, thank you very much. You have explained it really effectively.
Greetings from Italy Kevin! you are a hell of a teacher!
Thanks so much!
Yeeeaah!! Finally a video about SVG :) hope you do one about SVG animations!! Great Job! Ad always;)
I'll be looking at some basic animation stuff :)
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.
After this series, I would love to see a series for animation framework like GSAP, anime, velocity and KUTE
Depending on how this goes, I *might* look at some basics of GSAP and doing a simple animation using it on something.
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
GSAP with ScrollMagic for total control. Have been using free version for a while.
Kevin Powell Yes please!
Thanks Kevin, your explanation was very simple and easy to understand..
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
It's a little annoying that it plays differently in different situations, but I'm glad this helped :)
I just LOVE Scalar Vector Graphics because it is so much more fun that plain bitmap.
Thank you for this. SVG looked so intimidating at first for a noob like me.
This is such a great quality video!! you did a really great job. Very well explained
that's what I was searching for...thanks for the video...i am extremely happy...thank you very much sir!!😊
No problem at all!
I'm always liking your videos before watching coz i knw ur the best god bless you...😊
Thank you for this series.
No problem!
Great video, but 'deprecate', not 'depreciate'!
Hah, you're totally right... not sure what happened there, lol.
I was laughing after the second time. Awww well green screen, wrong word, but still a useful video.
I did it wrong my entire life lol
Perkin524
Actually "depreciate" is just another word for "deprecate", so Kevin Powell was very correct using that word. :)
@@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
I think you meant deprecated instead of depreciated ;-). But this is a great starting intro to svg.
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!
Your content is killer. Much appreciated.
Finally a clear explanation
14:21 Deprecated, not depreciated - though I guess it amounts to the same.
I was about to comment the green screen issue then I saw your comment in the video description ^^
Thank you. Like your voice, speed and content!
Fantastic tutorial. Thanks Kevin!
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.
YOUR TUTORIAL IS ORGANIZED ITS GOOD FOR SELF LEARNING .GOOD VERY GOOD
Thanks, really glad you enjoyed it?
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
Thanks, this explanation is very clear to me.
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
Thank you for this helping with my homework assignment.
your videos are absolute gold! Thanks!
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
Thank you for making this 4 part tutorial.
Thank you, Kevin.
I AM SO HAPPY.THANK YOU.
Really great video!
Thanks! You make things crystal clear!
Thank you very much! I have been looking for this for a long time...👍👍👌
really hepful. got lot of new info with just watching your videos. thanks again
Thanks Kevin for your videos..
good job man, I really appreciate your videos, keep it up
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?
Kevin, you love talking...
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.
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 👍
Too shy to leave a comment!!??🤔
NOT ME!! 😁😂
Ive been wanting to learn more of SVGs
Glad to hear it! Looks like you aren't the only one either, this seems like it's going to be a popular topic 👍
Kevin Powell yes sir!😀 The series will be great. It came right on tone for me. Can't wait to see part 2.
Amazing video! you are awesome Kevin, you make everything so easy.
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
Thanks a lot for this guide. Keep up the excellent work!
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
Skip to 2:03 to cut to the chase.
Can't wait for more!
5:58 Wow you got entirely new emoticon just playing with these anchors
great video, earned a sub!
Ditto!
very useful this video... you're one of the best
The red one in the end is soo creepy o.O
Such u great vid once again tho
I aam follow to viidio next timr
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.
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
Great series. Thanks.
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?
Appreciate the video as always. Keep up the good work :)
Thanks for these Kevin. Appreciate it!
great video!!
Thanks Kevin!
Well done!!!
Awesome! Thanks so much. I cant wait to start coding!
This is excellent
Great video. Thank you!
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
Show this to your friends if they really think the earth is flat. 4:51
tysm this was so easy to understand
you have clarity 😊
Thanks a lot for this vid! I helped me tons!
Nice, man! You are awesome!
Super interesting, and nice explained! Can we import SVGs from the file?
If you have an SVG, you should be able to open it up in your text editor without issue to get the code :).
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?
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.
Ok Kevin anyway that is a cool tip ;)
Used to work with the guy who wrote the O’Reily book - Eisenberg.
Thanx bro .. you helped me a lot with the tutorial and resources
According to caniuse, is now supported by Safari