Understanding SVG viewBox and viewport

The svg viewBox and viewport work together to give you control over what parts of your svg are visible. It's imperative to know how these work when embedding and svg in an html document. I'll give you a gentle walkthrough and even show you how to animate the svg viewBox with GreenSock. GSAP can animate it like any other attribute.
Check out my comprehensive GreenSock training
www.creativecodingclub.com/bu...
ViewBox Demo
codepen.io/snorkltv/pen/xxjqEvj
SVG background generator
codepen.io/snorkltv/pen/JjvyKPZ

[@rorysimmonds]

This video did a WAY better job of explaining these concepts than all of the other resources I've seen so far (some of which you showed previews of).
Massive thanks for putting this together!

[@snorklTV]

Awesome. So glad you liked it!

[@hamzasabri5610]

thank you so much for the amzing content bud, this is a treasure wish you the best man

[@snorklTV]

It’s so good to be appreciated. Thx so much for watching and the nice comment.

[@photoinshot1355]

Brilliant! Crisp, clear and sharp tutorial. Crisp presentation, clear in explanation and sharp and quickly to the point, many thanks I now understand viewBox much better.

[@snorklTV]

Thanks so much for watching and commenting. So glad it helped.

[@zhenquan1846]

wonderful stuff, thank you so much.

[@snorklTV]

Glad you liked it.

[@snorklTV]

Learn Everything I know about GreenSock for only $2.95/mo
www.creativecodingclub.com/bundles/creative-coding-clubs?src=viewBox

[@integrateur]

Thank you very much, your videos are always clear to understand for newbies like me! :)

[@snorklTV]

So glad you enjoyed it. Thx so much for the feedback!

[@MaxMov-sp8hr]

Dog hack is awesome! 😂 Good job, bro! 🤜

[@snorklTV]

Thx!

[@vojtulek7310]

Thanks bro, you're an absolute legend!

[@snorklTV]

Glad you liked it. Thx for watching.

[@JahirulIslamMamun]

absolutely awesome, thanks a lot.

[@Tailsxz]

Thank you so much!!!!!

[@hyposlasher]

thank you

[@Tony.Nguyen137]

@4:35 so you removed the viewport height and size of 200px. The svg stretchs to the body element, therefore its no longer 200x200 and the squares are no longer 100x100, right? So how comes the viewBox coordinates 100 100 100 100 give you the fish? If u didn’t remove the width and height 200x200 then it would make sense to me.

[@snorklTV]

Thank you for watching so carefully. It is a tricky subject but things are all working as they should as I demonstrated. SVG images have multiple coordinate systems. The viewBox coordinates of 100 100 100 100 are the "real" coordinates of the svg based on how it was originally designed, not how it is displayed in the browser according to the current view port settings. This whole subject took me awhile to fully understand. I strongly recommend this article by Sara Souiedan if you want to get more technical: www.sarasoueidan.com/blog/svg-coordinate-systems/ Thanks again for watching!