Playing with SVG’s preserveAspectRatio attribute
I’ve been working with a lot of SVG images lately, and I’ve noticed I often have to always refer back to MDN’s preserveAspectRatio page all the time. Their website is an amazing resource (can't wait to see W3Schools be removed from top search result spot whenever looking for this kind of reference), however I'm a more visual person and always get confused as to how this attribute can sometimes behave.
I've created a list showing the various behaviours of the preserveAspectRatio attribute as used in SVGs with a viewBox set. This SVG is then applied to an element as a background image, with further customisation enabled to show the variations. You can toggle the element size, background position, and change the type of background-size behaviour applied. Check it out below:
See the Pen Playing with SVG's preserveAspectRatio attribute by Matt Scheurich (@lvl99) on CodePen.
EDIT: I added in normal SVGs as well (not just as inline background images) just to see how the behaviours play there too.
