Ultimate SVG preserveAspect Ratio Tutorial

preserveAspectRatio is used to control how an SVG is displayed when the viewBox and viewport have different aspect ratios. I break it all down for you with loads of visuals and demos.
My GreenSock Course Bundle (over 200 lessons for less than $3)
www.creativeco...
demo
codepen.io/sno...

[@fireflysemanticsmedia6267]

Awesome explanation!! I was trying to read the MDN documentation and was like "I hope to God there's a youtube on this!". You nailed it!!

[@ConorBailey]

Amazing video. Was struggling with the viewBox and aspect ratio concepts and this is super clear. You deserve more views!! Thanks!

[@snorklTV]

Thanks! Glad it helped you.

[@BigBlueRabbit]

Best explanation ever 🙂

[@snorklTV]

Wow. Thanks. So glad you liked it. Thx for the support.

[@pablocortes682]

Awesome video snorklTV, thank you very much!

[@snorklTV]

So glad you liked it. Thx for watching and commenting. Means a lot.

[@clevermissfox]

This is the first explanation that has made a lick of sense. Looking at the demo and watching you explain top left corner, bottom right corner reminded me of flexbox values xMinxYMin is like justify-start and align start xMaxYMid justify -end and align start, etc
and describing meet and slice like background-sizes ?! Made it click , thank you!

[@snorklTV]

So glad to hear it helped! Thx for watching.

[@PitueliY0]

Great explanation! I understood the concept well thanks to you. Unfortunately it won't let me access the demo page to see the example :(

[@snorklTV]

Thx for watching. Maybe codepen was down. Seems to work now. Pls try again