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

ViewBox Demo

SVG background generator

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

[photoinshot]

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.

[hamzasabri]

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

[jeffdog]

Thank you very much. finally what i was looking for. your the man

[vojtulek]

Thanks bro, you're an absolute legend! <3

[integrateur]

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

[snorklTV]

Learn Everything I know about GreenSock for only $2.95/mo

[MaxMov-sphr]

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

[Tony.Nguyen]

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