preserveAspectRatio is the partner in crime of the SVG viewBox.
If you do not understand the viewBox just yet, then go check out my other article here explaining it.
preserveAspectRatio gives us the ability to tell our graphic how to scale when the aspect ratio of the viewBox and viewPort are different. By default our preserveAspectRatio will tell our image to scale to fit the viewPort and to be centered. To explicitly set the default preserveAspectRatio, we do the following:
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
Let’s break this down a little so it’s not so scary looking!
xMidYMid- center theviewBoxregion within theviewPortregionmeet- scale our graphic until it meets the height and width of ourviewPort
Yikes! This is still pretty confusing, so let’s use an example to understand. We will use the famous Alligator.io logo to help our understanding.
Delving into preserveAspectRatio
The following is the markup for our SVG:
As you can see we haven’t defined a preserveAspectRatio for our SVG so it will default to preserveAspectRatio="xMidYMid meet".
The scale ratio of our image is 1:1 so when the height and width of our viewPort matches, we won’t have to worry about our preserveAspectRatio
What will happen when the aspect ratio of our viewPort and viewBox are different?
Let’s look at a few examples:
In the above example our viewPort has the dimensions 100x100 so our preserveAspectRatio does not matter here.
Now our dimensions are 500x100 , as you can see the image is now centered and the aspect ratio stays the same.
If we were to set preserveAspectRatio="none", our image would stretch to fit the viewPort just like a raster image:
I think you can now see why preserveAspectRatio is so useful!
Meet vs Slice
So far we have only used the meet value, this tells our image to be contained within the viewPort, similar to background-size: contain. What would happen instead if we changed this to slice?
Hmm, so what exactly has happened? slice behaves similarly to background-size:cover , our image will basically scale to the dimensions of the viewPort and slice off any excess. This can be quite useful for background images or a background on a banner.
Mid/Min/Max
Above we have used xMidYMid,which is what you will use the majority of the time but we can also use Min and Max.
Let’s take the following:
Our alligator is centered here due to xMidYMid, if we wanted to align our alligator to the left, we would just do xMinYMid.
As a little test, ask yourself how would you align the alligator to the right?
Now let’s take the following dimensions:
If in this example, we wanted to align our alligator to the top we would do xMidYMin and it would give us the following:
Again ask yourself, how would you align this to the bottom?
Conclusion
This should give you a very solid understanding of preserveAspectRatio and how to scale your graphics. Thank you for reading!
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
About the author
Still looking for an answer?
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
This work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.