A beginners guide to SVG | Part One: The Why, What, and How
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): https://inkscape.org/en/ Some useful SVG links that have helped me in the past and with researching for this series: http://unicorn-ui.com/blog/svg-for-be... https://rafaltomal.com/svg-guide/ https://css-tricks.com/using-svg/ https://css-tricks.com/svg-line-anima... https://css-tricks.com/svg-use-with-e... http://taye.me/blog/svg/a-guide-to-sv... https://frontstuff.io/multi-colored-s... --- New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass --- My Code Editor: VS Code - https://code.visualstudio.com/ How my browser refreshes when I save: • How to automatically refresh your browser ... --- 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 YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: / kevinpowell.co Twitter: / kevinjpowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell
![How to create SVG shapes [ A beginners guide to SVG part 2 ]](https://i.ytimg.com/vi/9Y4P3FvZ5bg/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLCiNJk04TVrFhdjkt72aO-jIwMPcQ)
How to create SVG shapes [ A beginners guide to SVG part 2 ]
![What are SVG viewport and viewBox? [ A beginners guide to SVG part 3 ]](https://i.ytimg.com/vi/TBYJ2V1jAlA/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLB9R4EQlxq59YELJVClEpzoU0BXog)
What are SVG viewport and viewBox? [ A beginners guide to SVG part 3 ]

Floats, Flexbox, Grid? The progression of CSS layouts

How To Make Money With Claude's New Fable 5

Make Awesome SVG Animations with CSS // 7 Useful Techniques
![How to create, clean up, and optimize an SVG [ A beginners guide to SVG part 4 ]](https://i.ytimg.com/vi/cWh0de8IhX4/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLB8o5pPYPqqNMKH8Qldp_gG_SzuFg)
How to create, clean up, and optimize an SVG [ A beginners guide to SVG part 4 ]

Brain Focus Music ~ No Lyrics Work Playlist for Mental Clarity & Deep Work

Front End Center — Why Inline SVG is Best SVG

Trump Preps for 80th Birthday, Threatens to Hit Iran, Knicks Historic Win & Elon Musk Trillionaire!?

Design & Animate SVG Illustrations for Web Design

I turned an old van into a 2-STORY tiny house

God Says:"STOP HERE — LISTEN AND HEAR ME SPEAK"/God Message Now/God Message

Learn To Build An SVG Animation With CSS

Infantino stinksauer, leere Ränge, Buh-Rufe - und 200.000 Tickets übrig! RIP Fußball WM 2026

SVG Explained in 100 Seconds

SVG Tutorial: With CSS Animation

New Jellyfish Aquarium • Healing of Stress, Anxiety and Depressive States • Goodbye Insomnia #30

10 modern layouts in 1 line of CSS

The AI Breakthrough That Will Change Everything (Google DeepMind CEO Interview)

