A beginners guide to SVG | Part One: The Why, What, and How
354,039
Publicado 2018-06-20
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/blog/svg-for-beginners.html
rafaltomal.com/svg-guide/
css-tricks.com/using-svg/
css-tricks.com/svg-line-animation-works/
css-tricks.com/svg-use-with-external-reference-tak…
taye.me/blog/svg/a-guide-to-svg-use-elements/
frontstuff.io/multi-colored-svg-symbol-icons-with-…
---
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically refresh your bro...
---
Support me on Patreon: www.patreon.com/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 YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: www.instagram.com/kevinpowell.co/
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
Todos los comentarios (21)
-
So I was in a bit of a time crunch with this one and completely missed one part with the green screen! 😳
-
You know man, I really like the way you present yourself, nothing hidden, just plain KEVIN POWELL!! Cheers, loving your videos daily!
-
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.
-
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.
-
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!! 😀
-
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!
-
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.
-
Great video! In my opinion, SVGs are one of the best kept secrets of web design.
-
2 years later and it's still helpful 🔥🔥🔥🖤
-
This is such a great quality video!! you did a really great job. Very well explained
-
Kevin, thank you very much. You have explained it really effectively.
-
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! :)
-
idk what I would be without your vids
-
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!
-
Thanks Kevin, your explanation was very simple and easy to understand..
-
Amazing video! you are awesome Kevin, you make everything so easy.
-
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.
-
A much needed topic to explore...take it to the limits!
-
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 a lot for this guide. Keep up the excellent work!
