Did this Sep 2022 and it's still relevant. I use Inkscape, and was able to follow along fine. I couldn't find Export Options in Inkscape, but I just changed the ids myself (I used IDs instead of classes) by looking at the fill colors. Fun tutorial - thanks!! 🍔
This is great Kevin. I've used Inkscape to create SVG graphics and stayed away from Illustrator. But this gives me some insight on making cleaner and more lean SVG graphics. Thank you.
I got sooo frustrated with Inkscape, haha. It's a fine software, but when you're so used to one way of working, it's amazing how hard it is to figure out. Adobe really has trapped me, lol.
Inkscape also has a widget for rounding corners, two dots, so you can round it *separately* ;) and yeah we also have Figma and Gravit Designer extra features in Inkscape SVG - is just canvas settings =)
Thanks Kevin ... awesome video. Just like you did prior to 2018, I've been putting off learning about SVG for a long while, and then stumbled on to your videos ... and you've genuinely made the subject accessible for me. Thanks a lot!
Thanks for the great video! You may have done a video already on it, but it'd be great to know how to remove excess margin from pre-designed svgs. I find some of them aren't cropped all the way to the content of the svg. That makes them hard to style on the web.
One of the problems I discovered using Inkscape is when I exported the svg (either plain svg or optimized svg) and included the xml inline my html, some rules/functions such as "vector effect" and "shape-inside" were unknown and there wasn't much online help, so bummer. :(
I see lots of "3D graphics using CSS/HTML only" but almost none of them describe using SVG shapes/paths to generate those 3D elements. Those that do invariably concern themselves with Cricut or Blender, not what I'm after ... simple icons and lightweight animations.
Sass doesn't add weight to your site. Everything is done before the site goes live, users will just get a regular CSS file. The benefits of Sass are that it let's you do some more complicated things a little easier than with vanilla CSS, and (arguably) stay more organized. I can use regular CSS without issue, and *love* it, but I find Sass just lets me work faster and easier, and since vanilla CSS is valid SCSS, the learning curve isn't too bad unless you get into some of the really advanced stuff.
Thanks bro . i m just learnt little bit sass in wch variable , Nesting , Mixin , Extends . its will use css but i will easy to understand advanced Stuff in youtube hehhehehe . i dnot like less . i m focusing main on Vanilla css n javascript . its more than enough . thanks again bro .
We didn't need a this is my Adobe illustrator workflow... And how I draw shapes.. stick to svg content in your svg videos.. now manipulating them (with js) is useful
![Animation with GSAP - the basics [ A beginners guide to SVG part 5 ]](http://i.ytimg.com/vi/4XJ8yS0zpa4/mqdefault.jpg)
![Animation with GSAP - the basics [ A beginners guide to SVG part 5 ]](/img/tr.png)
![What are SVG viewport and viewBox? [ A beginners guide to SVG part 3 ]](http://i.ytimg.com/vi/TBYJ2V1jAlA/mqdefault.jpg)
I am studying at an Online University and your explanation is the simplest way to understand SVG
Did this Sep 2022 and it's still relevant. I use Inkscape, and was able to follow along fine. I couldn't find Export Options in Inkscape, but I just changed the ids myself (I used IDs instead of classes) by looking at the fill colors. Fun tutorial - thanks!! 🍔
You explained step by step and easy to follow, thank you Kevin
This is great Kevin. I've used Inkscape to create SVG graphics and stayed away from Illustrator. But this gives me some insight on making cleaner and more lean SVG graphics. Thank you.
I got sooo frustrated with Inkscape, haha. It's a fine software, but when you're so used to one way of working, it's amazing how hard it is to figure out. Adobe really has trapped me, lol.
20:48 cool export menu! Great to have so many choices.
Inkscape also has a widget for rounding corners, two dots, so you can round it *separately* ;)
and yeah we also have Figma and Gravit Designer
extra features in Inkscape SVG - is just canvas settings =)
Thanks Kevin ... awesome video. Just like you did prior to 2018, I've been putting off learning about SVG for a long while, and then stumbled on to your videos ... and you've genuinely made the subject accessible for me. Thanks a lot!
I've never been so excited about SVG's! lol
Awesome!
Amazing as always! Keep going
Vídeo Fantástico! Apresentou inúmeras possibilidades com SVG!!!👌
Is this guy on plural sight? he should be. Top notch video
Thanks You Thank you Thank you Thank you Brother. It's really helpful...Thanks a lot
Thanks again Kevin! FYI, you have this video in "Autos & Vehicles" category. Just helping your SEO. :P
Ugh, keeps happening and I don't know why. Thanks for the heads up
People overhearing the tutorial in the bedroom thinking we are watching a cooking show.
SVGOMG is a game changer
thank you you are amazing!
im going to get really good at this.
Thanks for the great video! You may have done a video already on it, but it'd be great to know how to remove excess margin from pre-designed svgs. I find some of them aren't cropped all the way to the content of the svg. That makes them hard to style on the web.
Superb!!!
This is a great video. I think it would be nice for another video convert icons from png to svg with Illustrator
Excellent
One of the problems I discovered using Inkscape is when I exported the svg (either plain svg or optimized svg) and included the xml inline my html, some rules/functions such as "vector effect" and "shape-inside" were unknown and there wasn't much online help, so bummer. :(
I see lots of "3D graphics using CSS/HTML only" but almost none of them describe using SVG shapes/paths to generate those 3D elements. Those that do invariably concern themselves with Cricut or Blender, not what I'm after ... simple icons and lightweight animations.
Nice one!
Thats a great content sir! Kevin could you do some examples of morphing animated SVG shapes?
My next video will look at some basic animation stuff :) - Nothing too complicated though.
I hope to see some elastic paths, plz :D
Hi Kevin.. Can you please tell me how to include svg code from external svg file. Basically using () . Hope you understand my question.
you make this burger too real that meke me hungry
Bump 4 channel monetization
haha, thanks
I'm hungry now 😭
haha
i ate a pickle
Awesome
Thank you, Kevin. What is xmlns for? Inside svg...
xmlns stands for XML Namespace, get more info from here www.sitepoint.com/xml-namespaces-explained/
Is this the final part in the SVG tutorials?
Hi. Thank you for the video. I couldn't find a link to the source code. Could you please share it?
hi , can you create a video about creating different types of blur , like motion blur , background blur , zoom blur using svg
Added to the list, but it might be a long time as I'd need to do some research first.
@@KevinPowell ok thanks
SVGomg doesnt work for me i got the same code
Bro what is use or benefits of Sass . Normal Css is more than enough for coding and no need ruby or other compiler . its not make our website heavy
Sass doesn't add weight to your site. Everything is done before the site goes live, users will just get a regular CSS file. The benefits of Sass are that it let's you do some more complicated things a little easier than with vanilla CSS, and (arguably) stay more organized. I can use regular CSS without issue, and *love* it, but I find Sass just lets me work faster and easier, and since vanilla CSS is valid SCSS, the learning curve isn't too bad unless you get into some of the really advanced stuff.
Thanks bro . i m just learnt little bit sass in wch variable , Nesting , Mixin , Extends . its will use css but i will easy to understand advanced Stuff in youtube hehhehehe . i dnot like less . i m focusing main on Vanilla css n javascript . its more than enough . thanks again bro .
please put source code. Thanks for series. Really enjoyed it.
I learned eating burgers without a bun is for psychopaths
SQUARE TOOL?!?
Use regex! It would have make your life much easier
I can never wrap my mind around it, lol. I should just learn it one of these days.
vectr.com is a good free online software.
We didn't need a this is my Adobe illustrator workflow... And how I draw shapes.. stick to svg content in your svg videos.. now manipulating them (with js) is useful
Curious why you don't need to optimize your SVGs, and what your workflow is.