SVG Path Tutorial • Easy to Understand!

[@pedrosilva2313]

This video has been posted 7 years ago and still helped me a lot to understand the basics of SVG! ABSOLUTE CINEMA

[@RobertoMusicHelp]

Happy to be of service!

[@ramathannoor539]

Best 16 minutes of my life in the history of SVG path without using an online SVG generator. Shout out to this channel

[@RobertoMusicHelp]

Thank you for this wonderful comment! I’m happy to be of service.

[@Joe-uw6rk]

Best tutorial on SVG paths I've seen. Laying the grid first was an excellent way to demonstrate it. Great job!

[@RobertoMusicHelp]

Wow, thanks!

[@DaggieBlanqx]

Wow! This is the best step-by-step visual tutorial, on SVG path , that I've seen.

[@RobertoMusicHelp]

Muchas gracias. Much appreciated.

[@SuggonM]

My mind was going insane trying to understand it through reading the w3c spec. This video is such a blessing.

[@RobertoMusicHelp]

So happy this video helped!

[@Dibadyare]

After having much confusion and ambiguity in understanding how SVG paths work, I finally understand it very well and clearly when I watch this tutorial video. Thank you so much Buddy. Please make more like these videos.

[@RobertoMusicHelp]

Glad it helped! You're welcome, 24-7 Official!

[@victorybenshalon6612]

This is the best so far ..cos I have been lost since I made a design for a webpage and it included complex shapes that I didn't know how to configure .😊Thanks Roberto

[@RobertoMusicHelp]

@@victorybenshalon6612, so happy that you could use this video!

[@ferozalimeghani2561]

SVG Path Tutorial is very helpful video to learn SVG drawing without using any drawing tool. Thanks for this nice tutorial on absolute and relative svg paths.

[@RobertoMusicHelp]

You're welcome, Feroz Ali Meghani!

[@AlirezaRameshki]

Best tutorial on SVG paths I've seen.

[@talkohavy]

So happy i've stumbled upon this video! I feel like i've earned a new toy! :) Thank you. The posibilities after seeing this video are endless.

[@RobertoMusicHelp]

You're welcome, Tal Kohavy! I hope you enjoy everything SVG has to offer!

[@nivita9830]

Drawing the grid first (which is cool in and of itself) REALLY helped me understand how these points are plotted - thank you!

[@RobertoMusicHelp]

Happy to be of service!

[@shilohcorey6666]

@Kayden Trace Instablaster :)

[@kaydentrace9611]

@Shiloh Corey i really appreciate your reply. I got to the site thru google and im trying it out atm. Takes quite some time so I will get back to you later with my results.

[@kaydentrace9611]

@Shiloh Corey it did the trick and I now got access to my account again. I'm so happy! Thanks so much you saved my account !

[@shilohcorey6666]

@Kayden Trace happy to help :D

[@jeyajourneys]

This is SO FUN!!! Thank you for gifting us with the ability to use a new creative resource! So awesome!

[@bl8nc]

Good in a way that you couldn't possibly not understand, thank you!

[@RobertoMusicHelp]

Glad I could be of Service!

[@Jana-ns5sg]

Perfect video for me as an absolute svg beginner! Thank you.

[@franktielemans6624]

Exellent! You know you understand the lesson when you start drawing the lines before the teacher is ready with his explanation :) fantastic tutorial and sure I want to know more about this!

[@RobertoMusicHelp]

Thank you for watching and I'm glad you enjoyed the tutorial. Check the description if you want to learn about the other SVG shapes.

[@oscarpauzerfilho2003]

Yes!!! You Did a Wonderful Job. Visual Explanations are Really More Efficient!!! Congrats!!!👏👏👏👏👏👍👍👍👍👍👍👍👍

[@RobertoMusicHelp]

Thank you! Happy to be of service!

[@chellakand7714]

Awesome tutorial. This is how i learned drawing in my childhood to redraw(Copy) existing pictures. Thats why in school they teach Graphs and co-ordinates.

[@RobertoMusicHelp]

Glad it was helpful!

[@RohitKumar-nb8qe]

Perfectly simplified a complicated topic..Thank you sir..

[@RobertoMusicHelp]

You're very welcome.

[@labnol]

Thank you. This is a great explanation of SVG.

[@RobertoMusicHelp]

Glad I could be of Service!

[@DiveSafariNZ]

Thank you Roberto, perfect introduction to paths

[@RobertoMusicHelp]

Glad you think so!

[@BUSCHILLING]

Thank you man, super well explained and helped me a lot to understand paths in SVG.

[@RobertoMusicHelp]

Glad I could be of Service!

[@RobertoMusicHelp]

Glad it helped!

[@JuliaNeubauer]

Excellent. This is a perfect example of a step-by-step method of teaching.

[@RobertoMusicHelp]

Glad I could be of Service!

[@JUNGELMAN2012]

Thx. You made me study in depth how SVG path works.

[@RobertoMusicHelp]

You are welcome!

[@dushyanttyagi6019]

Nicely narrated , very good video. It helped me understanding the svg path. Lovely. Very nice of you. Thanks a lot.

[@RobertoMusicHelp]

glad to be of service!

[@subway394]

Excellent tutorial!!! Thanks a lot!

[@RobertoMusicHelp]

Happy to be of service!

[@shvideo1]

Brilliant tutorial. Exactly what I was looking for. Fantastic job. Thank you for sharing.

[@RobertoMusicHelp]

Glad I could be of service!

[@DallasVocals]

Excellent lesson. Thank you! Now I truly understand what I'm drawing.

[@RobertoMusicHelp]

Awesome! Glad I could help clear things up!

[@Shaktish-kumar]

Grid helped how X and Y cordinates works. Thank you !

[@RobertoMusicHelp]

You're welcome, Shaktish Kumar!

[@RedEyedJedi]

Does exactly what it says on the tin. That really was easy to understand. Thanks Roberto :)

[@RobertoMusicHelp]

I'm glad I could help you out!

[@JiriKrewinkel]

Very simple and thorough explanation of basic svg lines

[@delfodelfo]

jesus christ dude, just look so simple really thanks man

[@RobertoMusicHelp]

Glad I could help!

[@srikant1497]

This tutorial is very helpful and well explained. Could you please make one video on transform attribute with matrix value. How basically matrix value is impacting the calculation of co-ordinates.

[@RobertoMusicHelp]

Happy to be of service. As soon as my schedule allows, I will get on that tutorial. It's a very interesting subject.

[@diogobezerra1081]

Thank you! I finally understood!

[@RobertoMusicHelp]

Glad I could be of Service!

[@waterislife9]

Absolutely amazing job at teaching - thank you!

[@RobertoMusicHelp]

You're welcome, daniel!

[@creativedeveloper6921]

nice video! thank you so much!

[@RobertoMusicHelp]

You're welcome, creativedeveloper!

[@pasalavdprasad7369]

such a well explanation.. A 1000 claps from my side.. Thank you very much!!!!!!

[@RobertoMusicHelp]

you are quite welcome!

[@BobMazzo]

thank you - good job. nice and simple tutorial. and I think the big takeaway here is that the UPPERCASE is an absolute coordinate, whereas the lowercase is relative (H10 vs h10).

[@RobertoMusicHelp]

Happy to be of service. And yes, that's an important aspect.

[@FirdavsiGameDev]

I felt like your brain stopped during explaining the coordinates! But hey thank you so much for making this tutorial. Drawing svg is a complex thing.

[@RobertoMusicHelp]

Ha! You figured me out! Sometimes my mouth can't catch up to my thoughts!

[@FirdavsiGameDev]

@@RobertoMusicHelp why don't you make more tutorials and math technology or programming. You have a good way of explaining stuff!!

[@RobertoMusicHelp]

@@FirdavsiGameDev much appreciated. I see your channel is growing well, too. I'm thinking of doing more coding tuts. Even though people love gardening ones, too!

[@Nik-sp3py]

Thank you for making this.

[@RobertoMusicHelp]

You're welcome, Nikhil Nambiar!

[@fluidomatic]

Beautifully explained Thanks

[@Ginfio]

This is teaching. Thank You. I couldn't find any SVG videos like this.

[@RobertoMusicHelp]

Awesome! I'm glad I was able to help.

[@ataladin87]

The grid was Massive help.

[@RobertoMusicHelp]

Happy to be of service!

[@Ershaad-ss3uc]

That was indeed easy to undrestand 💓💓

[@RobertoMusicHelp]

Happy to be of service!

[@VeerpalKaur-uv9dv]

thank you for this video

[@RobertoMusicHelp]

You're welcome, 944 Veerpal Kaur!

[@jugibur2117]

Really great explanations, many thanks!

[@roberto9369]

nice work man. very well explained.and i've searched a lot about create svg things for beginners. thank you

[@roberto9369]

by the way, subscribed :)

[@RobertoMusicHelp]

Happy to be of service!

[@habibbellia2607]

Good job Roberto. Thanks for sharing. Please don't stop

[@rfrancett]

Hi Roberto. Thanks for that! I'd love to see another tutorial but about complex patja with both straight and curved segments.

[@RobertoMusicHelp]

Check the description of this video for more tutorials. I cover curves and lines.

[@fireflysemanticsmedia6267]

Awesome tutorial!! Thanks!!

[@RobertoMusicHelp]

You are so welcome!

[@ksbalaji1287]

Excellent tute! Thanx, buddy. Please make many more: particularly SVG animation tutes.

[@RobertoMusicHelp]

Much appreciated. Happy to help.

[@javascriptwar9525]

appreciate your work 🙏 it is very helpful for me..

[@RobertoMusicHelp]

Happy to be of service.

[@kikevanegazz325]

Man, this was awesome! 😎

[@RobertoMusicHelp]

Thanks!

[@adamadiallo845]

Excellent!

[@chakabani123taftouf7]

Excellent explanation, continue...

[@annreid]

Thank you, Roberto.

[@RobertoMusicHelp]

You're quite welcome!

[@ore_bear8045]

Thank you so much, helped me a lot.

[@RobertoMusicHelp]

Glad I could be of Service!

[@ripplesr5655]

Thank you very much man!u just cleared out the jumble i was in!

[@RobertoMusicHelp]

Glad I could be of Service!

[@ddrapplications3237]

Wow, just what i was looking for. Thanks !! Be sure to update some of my icons in my apps.

[@annizheng428]

This is so helpful! Thanks!

[@RobertoMusicHelp]

😀You're quite welcome!

[@VatsalJbp]

Great job Roberto. Thanks for sharing.

[@mateenahmedkhan3780]

superb you are just amazing, can you also please post a video on how to do drag, drop and transform in svg

[@RobertoMusicHelp]

Transform, as in change shape? I will work on drag and drop. Do you mean for a “Dress Up” game or similar?

[@mateenahmedkhan3780]

@@RobertoMusicHelp no transform like make it smaller or bigger

[@RobertoMusicHelp]

@@mateenahmedkhan3780 I can make a video about that, but it's not difficult. All you need is the following code in CSS... svg path { transform: scale(.50); } The scale is between 0 and 1. 50% is .5 and 25% is .25, etc.

[@mateenahmedkhan3780]

@@RobertoMusicHelp Thanks for the input, but it would be lot more helpful if you make a video for it! Thanks in advance!

[@markkour3804]

Really helped. Thank you so much

[@RobertoMusicHelp]

You're quite welcome.

[@dexkode5558]

Wow This is too well done Thanks

[@RobertoMusicHelp]

Much appreciated! Happy to be of service.

[@linhadireta4340]

Thank's, this is a great tutorial

[@RobertoMusicHelp]

You're welcome.

[@bikashroy72844]

Really Nice... Thanks... There is no reason for dislike...

[@anubhavsaxena3011]

Super helpful man thanks a lot

[@RobertoMusicHelp]

Glad it helped

[@dipeshsapkota844]

Thank you ! This help me to know about path more clearly.

[@RobertoMusicHelp]

Glad to be of service!

[@QuintJer]

Thank you Roberto. I appreciate your tutorial, it was very helpful.

[@mysteriouswarrior2995]

It helped me to know the difference between H and h and so on. I love the grid system it's easy to understand. I wonder if you have video regarding curves but Thank you UwU.

[@RobertoMusicHelp]

You're welcome, Mysterious Warrior! And yes, I do have a curves video....kzbin.info/www/bejne/jqaVaYeQo61kobc

[@shaikmahmoodsameer5366]

thank you sir ,

[@RobertoMusicHelp]

You're quite welcome.

[@Harlem1991]

Great video, you made it very clear. Well done.

[@flavioarantesdoamorimbarce95]

Amazing. Thank you

[@RobertoMusicHelp]

Glad you liked it!

[@mo.ali.]

you break it down what is amazing explain!! thank for sharing this i hope you deserve more subscribers

[@adrianbartholomew3785]

Great vid. You should edit out repetitive and tedious tasks. you would keep the attention of your audience. I had to fast forward many times.

[@RobertoMusicHelp]

Great idea, Adrian Bartholomew! But having been a teacher for so many years, I tend to repeat myself out of habit 😉

[@TexasWatchman]

Good job Roberto. Thanks for sharing. Please continue : )

[@venu9l]

Good one👏

[@RobertoMusicHelp]

Thanks.

[@kylewalker4641]

excellent tutorials thank you

[@HHanna-sx9bn]

really helpful Video , would you able to create animation in each arrow ' like painting each one by first part of it Then to all full colour } not one time fill color, that give an amazing animation view especially when we write a letters or characters if so that will be great help bro.thanks

[@RobertoMusicHelp]

Thanks for your question. Please be more specific on the what you need...

[@iamreg1965]

Great intro. Bless you. As an aside, how could anyone downvote this tut?

[@RobertoMusicHelp]

Perhaps not everyone is a visual learner and don't like the way I teach? Thanks for the compliment!

[@iamreg1965]

@@RobertoMusicHelp No worries mate. I thought everyone dreamed in pictures.

[@CarlWicker]

Amazing, thank you!!

[@bengbeng2005]

excellent content, thank you

[@RobertoMusicHelp]

You're welcome!

[@sambasivarao3392]

Nicely explained

[@RobertoMusicHelp]

Thank you, @sambasivarao3392! Glad to be of service.

[@el07694]

Nice work - tutorial. Keep on!!

[@gvigner]

Excellent tutoriel ! Bravo!

[@kesavanarayanaanaparthi6428]

Super cool

[@tamayoz12000]

Thank you very much!

[@RobertoMusicHelp]

You're welcome, حسين محمد!

[@RebecaMarques]

OMG! I finally understood it! THANK YOU!!!!!!!!

[@georgelastun2480]

Best tutorial

[@RobertoMusicHelp]

Thank you!

[@migueleduardosanmartinsuar5719]

I would appreciate a lot if you make an explanation video about the other svg d tools, such as C Q T S... and thanks for the explanation, it is very useful

[@RobertoMusicHelp]

Glad this helped you out. I’ve just uploaded a video about paths including C, Q, T, and S.

[@creativeprogrammer5850]

thanks alot ❤

[@RobertoMusicHelp]

You're welcome 😊

[@darrylpalaubsanon4103]

THANK YOU SO MUCH

[@RobertoMusicHelp]

You're welcome so much!

[@CyberSLlk]

Thank you

[@RobertoMusicHelp]

You're welcome, Cyber SL!

[@Dawa202]

Very cool video, thank you dude!

[@RobertoMusicHelp]

Thank you, D Villiers! Glad to be of service.

[@jeyajourneys]

Wow, big difference with the absolute and relative, I'm just thinking how much of a time saver that is and how huge of a headache it can be with absolute! LOL! Almost like a "cheat" version lol!

[@qasimsorameree6058]

Thank you so nice

[@RobertoMusicHelp]

Most welcome

[@johnbritolima]

That helped. Thanks.

[@RobertoMusicHelp]

glad I could help.

[@AnilMakkar9]

very beautifully and easily done, would like to make logos & clickable maps with svg. I like svg more than canvas element in html5.

[@md.hasanmahmud1390]

thank you very much

[@RobertoMusicHelp]

You are welcome! Glad to be Glad I could be of Service!

[@julianzjourney]

This helped me so much thank you!

[@titusgzz]

Very helpful

[@RobertoMusicHelp]

Glad it helped.