SVG Path Tutorial • Easy to Understand!

Поділитися
Вставка
  • Опубліковано 28 лис 2024

КОМЕНТАРІ • 238

  • @pedrosilva2313
    @pedrosilva2313 2 місяці тому +2

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

  • @ramathannoor539
    @ramathannoor539 3 роки тому +3

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

    • @RobertoMusicHelp
      @RobertoMusicHelp  3 роки тому

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

  • @Joe-uw6rk
    @Joe-uw6rk 6 місяців тому +5

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

  • @DaggieBlanqx
    @DaggieBlanqx 5 років тому +17

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

  • @SuggonM
    @SuggonM Рік тому +2

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

  • @Dibadyare
    @Dibadyare 4 роки тому +4

    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.

  • @AlirezaRameshki
    @AlirezaRameshki 2 місяці тому

    Best tutorial on SVG paths I've seen.

  • @nivita9830
    @nivita9830 6 років тому +34

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

    • @RobertoMusicHelp
      @RobertoMusicHelp  6 років тому +1

      Happy to be of service!

    • @shilohcorey6666
      @shilohcorey6666 3 роки тому

      @Kayden Trace Instablaster :)

    • @kaydentrace9611
      @kaydentrace9611 3 роки тому

      @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
      @kaydentrace9611 3 роки тому

      @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
      @shilohcorey6666 3 роки тому

      @Kayden Trace happy to help :D

  • @victorybenshalon6612
    @victorybenshalon6612 14 днів тому +1

    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
      @RobertoMusicHelp  9 днів тому

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

  • @ferozalimeghani2561
    @ferozalimeghani2561 3 роки тому +1

    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.

  • @bl8nc
    @bl8nc Рік тому +3

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

  • @oscarpauzerfilho2003
    @oscarpauzerfilho2003 3 роки тому +1

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

  • @talkohavy
    @talkohavy 2 роки тому +2

    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
      @RobertoMusicHelp  2 роки тому

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

  • @jeyajourneys
    @jeyajourneys 9 місяців тому +1

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

  • @chellakand7714
    @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.

  • @RohitKumar-nb8qe
    @RohitKumar-nb8qe 2 роки тому +1

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

  • @labnol
    @labnol 3 роки тому +1

    Thank you. This is a great explanation of SVG.

  • @DiveSafariNZ
    @DiveSafariNZ 2 місяці тому +1

    Thank you Roberto, perfect introduction to paths

  • @JuliaNeubauer
    @JuliaNeubauer 6 років тому +9

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

  • @franktielemans6624
    @franktielemans6624 6 років тому +4

    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
      @RobertoMusicHelp  6 років тому

      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.

  • @JUNGELMAN2012
    @JUNGELMAN2012 Рік тому

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

  • @subway394
    @subway394 5 років тому +2

    Excellent tutorial!!! Thanks a lot!

  • @BUSCHILLING
    @BUSCHILLING 3 місяці тому +1

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

  • @VeerpalKaur-uv9dv
    @VeerpalKaur-uv9dv 4 роки тому +2

    thank you for this video

  • @creativedeveloper6921
    @creativedeveloper6921 2 роки тому +1

    nice video! thank you so much!

  • @Shaktish-kumar
    @Shaktish-kumar 4 роки тому +1

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

  • @ataladin87
    @ataladin87 2 роки тому +1

    The grid was Massive help.

  • @habibbellia2607
    @habibbellia2607 6 років тому +1

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

  • @delfodelfo
    @delfodelfo 11 місяців тому +1

    jesus christ dude, just look so simple
    really thanks man

  • @shvideo1
    @shvideo1 2 роки тому +1

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

  • @DallasVocals
    @DallasVocals 5 років тому +2

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

  • @JiriKrewinkel
    @JiriKrewinkel 6 років тому +1

    Very simple and thorough explanation of basic svg lines

  • @Ginfio
    @Ginfio 5 років тому +2

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

  • @dushyanttyagi6019
    @dushyanttyagi6019 4 роки тому +1

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

  • @pasalavdprasad7369
    @pasalavdprasad7369 4 роки тому +1

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

  • @RedEyedJedi
    @RedEyedJedi 4 роки тому +1

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

  • @waterislife9
    @waterislife9 3 роки тому +4

    Absolutely amazing job at teaching - thank you!

  • @rfrancett
    @rfrancett 3 роки тому +1

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

    • @RobertoMusicHelp
      @RobertoMusicHelp  3 роки тому

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

  • @diogobezerra1081
    @diogobezerra1081 4 роки тому +2

    Thank you! I finally understood!

  • @BobMazzo
    @BobMazzo 4 роки тому +1

    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
      @RobertoMusicHelp  4 роки тому +1

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

  • @Nik-sp3py
    @Nik-sp3py 4 роки тому +1

    Thank you for making this.

  • @fluidomatic
    @fluidomatic 7 років тому +11

    Beautifully explained
    Thanks

  • @VatsalJbp
    @VatsalJbp 5 років тому +1

    Great job Roberto.
    Thanks for sharing.

  • @annreid
    @annreid 3 роки тому +1

    Thank you, Roberto.

  • @srikant1497
    @srikant1497 2 роки тому +1

    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
      @RobertoMusicHelp  2 роки тому

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

  • @fireflysemanticsmedia6267
    @fireflysemanticsmedia6267 Рік тому +1

    Awesome tutorial!! Thanks!!

  • @kikevanegazz325
    @kikevanegazz325 3 роки тому +1

    Man, this was awesome! 😎

  • @Ershaad-ss3uc
    @Ershaad-ss3uc 3 місяці тому +1

    That was indeed easy to undrestand 💓💓

  • @chakabani123taftouf7
    @chakabani123taftouf7 9 місяців тому

    Excellent explanation, continue...

  • @adamadiallo845
    @adamadiallo845 5 років тому +1

    Excellent!

  • @jugibur2117
    @jugibur2117 Рік тому +1

    Really great explanations, many thanks!

  • @ksbalaji1287
    @ksbalaji1287 5 років тому +2

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

  • @roberto9369
    @roberto9369 6 років тому +1

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

  • @bikashroy72844
    @bikashroy72844 6 років тому +1

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

  • @TexasWatchman
    @TexasWatchman 6 років тому +1

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

  • @ddrapplications3237
    @ddrapplications3237 4 роки тому +1

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

  • @annizheng428
    @annizheng428 2 роки тому +1

    This is so helpful! Thanks!

  • @QuintJer
    @QuintJer 6 років тому +2

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

  • @venu9l
    @venu9l 5 років тому +1

    Good one👏

  • @dipeshsapkota844
    @dipeshsapkota844 6 років тому +1

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

  • @el07694
    @el07694 6 років тому +1

    Nice work - tutorial.
    Keep on!!

  • @ripplesr5655
    @ripplesr5655 4 роки тому +1

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

  • @Harlem1991
    @Harlem1991 6 років тому +1

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

  • @markkour3804
    @markkour3804 4 роки тому +1

    Really helped. Thank you so much

  • @gvigner
    @gvigner 6 років тому +1

    Excellent tutoriel ! Bravo!

  • @RebecaMarques
    @RebecaMarques 5 років тому +2

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

  • @anubhavsaxena3011
    @anubhavsaxena3011 10 місяців тому +1

    Super helpful man thanks a lot

  • @linhadireta4340
    @linhadireta4340 3 роки тому +1

    Thank's, this is a great tutorial

  • @ore_bear8045
    @ore_bear8045 3 роки тому +1

    Thank you so much, helped me a lot.

  • @FirdavsiGameDev
    @FirdavsiGameDev 5 років тому +1

    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
      @RobertoMusicHelp  5 років тому +1

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

    • @FirdavsiGameDev
      @FirdavsiGameDev 5 років тому

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

    • @RobertoMusicHelp
      @RobertoMusicHelp  5 років тому

      @@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!

  • @flavioarantesdoamorimbarce95
    @flavioarantesdoamorimbarce95 Рік тому +1

    Amazing. Thank you

  • @CarlWicker
    @CarlWicker Рік тому +1

    Amazing, thank you!!

  • @bengbeng2005
    @bengbeng2005 3 роки тому +1

    excellent content, thank you

  • @migueleduardosanmartinsuar5719
    @migueleduardosanmartinsuar5719 6 років тому +2

    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
      @RobertoMusicHelp  6 років тому

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

  • @shaikmahmoodsameer5366
    @shaikmahmoodsameer5366 4 роки тому +1

    thank you sir ,

  • @dexkode5558
    @dexkode5558 2 роки тому +1

    Wow
    This is too well done
    Thanks

  • @kesavanarayanaanaparthi6428
    @kesavanarayanaanaparthi6428 3 роки тому +1

    Super cool

  • @sambasivarao3392
    @sambasivarao3392 Рік тому +1

    Nicely explained

  • @mysteriouswarrior2995
    @mysteriouswarrior2995 4 роки тому +1

    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
      @RobertoMusicHelp  4 роки тому

      You're welcome, Mysterious Warrior! And yes, I do have a curves video....ua-cam.com/video/Xu28TZnH1kU/v-deo.html

  • @kylewalker4641
    @kylewalker4641 4 роки тому

    excellent tutorials thank you

  • @javascriptwar9525
    @javascriptwar9525 3 роки тому +1

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

  • @mo.ali.
    @mo.ali. 6 років тому

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

  • @mateenahmedkhan3780
    @mateenahmedkhan3780 4 роки тому +1

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

    • @RobertoMusicHelp
      @RobertoMusicHelp  4 роки тому

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

    • @mateenahmedkhan3780
      @mateenahmedkhan3780 4 роки тому +1

      @@RobertoMusicHelp no transform like make it smaller or bigger

    • @RobertoMusicHelp
      @RobertoMusicHelp  4 роки тому

      @@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
      @mateenahmedkhan3780 4 роки тому

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

  • @Dawa202
    @Dawa202 4 роки тому

    Very cool video, thank you dude!

  • @HHanna-sx9bn
    @HHanna-sx9bn 2 роки тому +1

    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
      @RobertoMusicHelp  2 роки тому

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

  • @georgelastun2480
    @georgelastun2480 3 роки тому +1

    Best tutorial

  • @tamayoz12000
    @tamayoz12000 3 роки тому +1

    Thank you very much!

  • @iamreg1965
    @iamreg1965 4 роки тому +1

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

    • @RobertoMusicHelp
      @RobertoMusicHelp  4 роки тому

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

    • @iamreg1965
      @iamreg1965 4 роки тому +1

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

  • @AnilMakkar9
    @AnilMakkar9 7 років тому +1

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

  • @adrianbartholomew3785
    @adrianbartholomew3785 4 роки тому +1

    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
      @RobertoMusicHelp  4 роки тому +1

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

  • @johnbritolima
    @johnbritolima 5 років тому +1

    That helped. Thanks.

  • @cliffmathew
    @cliffmathew Рік тому

    Excellent

  • @darrylpalaubsanon4103
    @darrylpalaubsanon4103 3 роки тому +1

    THANK YOU SO MUCH

  • @julianzjourney
    @julianzjourney 5 років тому +1

    This helped me so much thank you!

  • @all12jus
    @all12jus 5 років тому

    Can you take a font awesome icon and walk us thru each part of their svg code?

  • @jeyajourneys
    @jeyajourneys 9 місяців тому +1

    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!

  • @titusgzz
    @titusgzz 3 роки тому +1

    Very helpful

  • @melonenlord2723
    @melonenlord2723 2 роки тому

    I liked that tutorial. :)

  • @md.hasanmahmud1390
    @md.hasanmahmud1390 4 роки тому +1

    thank you very much

    • @RobertoMusicHelp
      @RobertoMusicHelp  4 роки тому

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

  • @boulderdennis
    @boulderdennis 6 років тому +1

    Thank you.