A beginners guide to SVG | Part One: The Why, What, and How
HTML-код
- Опубликовано: 29 сен 2024
- 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 RUclips channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
![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)
![Cody Johnson - I'm Gonna Love You (with Carrie Underwood) [Official Music Video]](http://i.ytimg.com/vi/yy9PuYMU29g/mqdefault.jpg)
![Tee Grizzley - Blow for Blow (feat. J. Cole) [Official Video]](http://i.ytimg.com/vi/wNLN5xsx5dc/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.
Thank you!
Thompson Daniel Hall Helen Harris Jose
I have an old version of illustrator and it is WAY better than the latest version of inkscape. I could not get inkscape to make good bezier curves. Adobe has the old versions for free, and if you want to be 100% ethical in doing it, I mean, you probably could get a cd rom from ebay
I think Adobe gives CS5 away for free now, doesn't it?
I'm just so used to Illustrator that it's hard for me to change.
I like your video
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!
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 😁
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).
14:21 Deprecated, not depreciated - though I guess it amounts to the same.
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.
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! :)
I think you meant deprecated instead of depreciated ;-). But this is a great starting intro to svg.
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
This really helped with my university coursework with everything going on right now
im in the same boat lol
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.
I'm always liking your videos before watching coz i knw ur the best god bless you...😊
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!
great video, but this smiley face is horrifying
Skip to 2:03 to cut to the chase.
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!
Kevin, you love talking...
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!!
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.
Your content is killer. Much appreciated.
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?
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
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?
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.
“Depreciated” -> “Deprecated”
These look similar, but the pronunciation is very different. You’re using the wrong one.
Depreciated means that it’s lost value.
Deprecated means that it’s obsolete.
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 :)
A much needed topic to explore...take it to the limits!
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
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
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.).
Oh no bro...
you just made Internet Explorer logo 6:04
Kevin, thank you very much. You have explained it really effectively.
Nice try, but for a nonprogrammer who just wants to open and use an svg file, I am still lost. My svg file is of a pattern of lines and curves for woodworking. I purchased it as a zipped file, unzipped the file and now have an svg file that is still useless to me. I understamd the advantage of being able to scale up to increase the pattern size but have no idea of how to use it at this point and am wondering if this is beyond my capabilities. I only have basic computer skills.
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
Jackson Christopher Lopez Barbara Gonzalez Christopher
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.
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.
Davis Jessica Allen Matthew Thomas Brenda
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.
Just looking for example code with a quick overview of how to work with svg but this is like 2 minutes at least of intro.
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.
Johnson Dorothy Lopez Sarah Rodriguez Lisa
According to caniuse, is now supported by Safari
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
Young Amy Martin William Young Michelle
Brown Sarah Garcia Shirley Lopez David
fantastic video! even 6 years later! Thank you!
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 such a great quality video!! you did a really great job. Very well explained
Brown Kevin Jackson Margaret Jackson Lisa
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!
Gonzalez Angela Harris Joseph Lee Daniel
so thats why there are no videos made of svgs or also you cant record something to svg as well..
Hi trying to do SVG file but not a programmer struggling
Taylor Amy White Timothy Martinez Daniel
Thank you for this helping with my homework assignment.
5:58 Wow you got entirely new emoticon just playing with these anchors
that's what I was searching for...thanks for the video...i am extremely happy...thank you very much sir!!😊
No problem at all!
Why o Why Kevin can't we use svgs for mails?
6:30 ur background... it's showing its true colors
Thank you. Like your voice, speed and content!
Rodriguez Laura Hernandez Gary Perez Jose
Robinson Karen Garcia Brian Smith Sarah
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?
Harris Sandra Lewis Paul Jones Carol
Thank you for this series.
No problem!
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.
what i do if i want to face move to center of the page. i try a lot but no use
Please can you help me with SVG Images. I mean can you help me with this type of image files you used on this video or any type of image files that I can use on video creations. I need your help. Thanks
Show this to your friends if they really think the earth is flat. 4:51
great video, earned a sub!
Ditto!
Great video, i watched it several times. I want to build a look-great responsive header with flexbox, so I downloaded some cool svg, but with it scales down, the content (input, anchor elements) does not size that way. I don't know how to fixate my svg in the header. Does anyone knows any trick for it? :)
Hey bro, I don't know if you explain it somewhere else but how to call the svg inline but from a different file if I don' t want to have the code in the bottom and prefer having it in another tsx file?
You could just do :)
2min of absolute nothing before any content ngmi
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!
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.
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?
How to use svg external file in HTML ?
It's XML. And it's even scalable.
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
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
Thanks Kevin for your videos..
When in doubt, go to Kevin.
Yeah too, exceptt I feel the exact sa way i did.
How to create a SVG images in Gimp?
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.
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 .
ALL vector graphics are scalable.
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 .
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.
I just LOVE Scalar Vector Graphics because it is so much more fun that plain bitmap.
I used to work with Eisenberg.
really hepful. got lot of new info with just watching your videos. thanks again
Thanks Kevin, your explanation was very simple and easy to understand..
it took 2 minutes for you to just get to "what is SVG" and then defining it.
The LOOOOOOOOOOOOng intros on RUclips have to stop.
HI, thanks for the video, do you know how to apply an antialiasing filter? I have one but is not enough
Hello, I
The word is deprecated, not depreciated.