Tutorial
Understanding SVG preserveAspectRatio
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
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 theviewPortregion -
meet- 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:
<svg width="100%" height="auto" viewBox="0 0 137 137" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M55.56 128.42a3.57 3.57 0 0 1-3.53-4.21c.03-.16 2.81-16.26-1.86-25.98-2.9-6.02-6.09-7.1-11.86-9.07-2.96-1-6.32-2.15-10.16-4.21-6.43-3.46-9.3-9.67-14.62-14.14C6.35 64.78-5.12 58.74 2.7 47.08c3.32-4.95 9.79-7.45 14.39-7.68a15 15 0 0 1 .73-.02c3.46 0 6.3 1.23 8.58 2.21 1.24.54 2.41 1.04 3.3 1.17.26.04.55.06.86.06.75 0 1.58-.1 2.46-.22 1.05-.14 2.22-.29 3.47-.29.88 0 1.7.07 2.5.23 1.25.23 2.54.47 3.65.47.46 0 .85-.04 1.18-.13.71-.17 1.46-.4 2.19-.64 1.35-.42 2.74-.85 4.29-1.12a11.69 11.69 0 0 1 3.67-.04c-3.42-2.46-6.18-5.5-5.1-9.09 1.29-4.32 6.91-4.82 11.04-4.82 2.1 0 4.53.15 7.23.46.52-4.97.67-13.19.67-13.27a3.6 3.6 0 0 1 2.13-3.21c.47-.21 4.91-2.08 13.6-2.08l2 .03c9.94.32 16.55 2.3 17.27 2.52.68.2 7.3 2.18 15.78 7.36 8.52 5.22 11.6 9.78 11.91 10.28.75 1.16.76 2.67.02 3.84-.5.79-4.58 7.32-6.75 11.51a53.62 53.62 0 0 1 8.14 4.94c1.42 1.09 5.74 4.4 4.49 8.61-1.06 3.55-5.04 4.52-8.7 4.76 1.75 4.74 1.65 9.3-.34 13.36l-.28.55c-1.01 2.05-1.12 2.26-.76 3.83.3 1.33.78 2.68 1.28 4.1.54 1.56 1.1 3.16 1.5 4.89l.26.95.02.08c.3 1.06.81 2.85 1.19 4.4.6 2.4 1.2 4.9-.94 6.5-.4.3-10.27 7.5-32.83 10.21-20.61 2.48-38.93 15.8-39.11 15.93-.63.46-1.36.7-2.13.7" fill="#FFFFFE"/>
<path d="M94.06 39.45c9.6 2.86 18.12 6.08 24.27 9a32.64 32.64 0 0 1 1.86-4.69c2.25-4.54 7.3-12.57 7.3-12.57s-2.72-4.23-10.77-9.16c-8.39-5.12-14.96-6.98-14.96-6.98s-6.51-2.06-16.34-2.37c-9.43-.3-14.03 1.74-14.03 1.74s-.17 9.48-.8 14.52c-.21 1.77-.59 3.42-.98 4.82 6.65.98 15.23 2.93 24.45 5.69" fill="#322549"/>
<path d="M132.97 57.14c-1.28 4.27-20.38 2.33-42.65-4.33-22.28-6.66-39.3-15.52-38.02-19.8 1.27-4.27 20.37-2.33 42.65 4.33 22.27 6.66 39.3 15.52 38.02 19.8" fill="#322549"/>
<path d="M121.36 54.91c-.72 2.42-14.43.45-30.6-4.4-16.19-4.83-28.72-10.7-28-13.11.71-2.41 14.42-.45 30.6 4.39s28.72 10.71 28 13.12" fill="#322549"/>
<path d="M64.58 37.85c-.54.23-1.06.49-1.56.8-2.73 1.72-4.12 4.6-5.8 7.22-2.09-.94-4.01-1.62-6.32-1.22-2.14.37-4.15 1.19-6.2 1.7-2.03.52-4.28.1-6.37-.3-3.2-.6-6.07.7-9.15.25-3.44-.49-7.02-3.57-11.9-3.33-4.15.22-9.23 2.57-11.6 6.1-2.28 3.4-2.18 11.1 2.82 12.21 2.2.5 3.8-.16 5.23 1.92 4.73 6.83 8.68 14.6 16.12 18.6 10.94 5.87 18.27 3.94 23.54 14.88 5.27 10.95 2.17 28.16 2.17 28.16s18.92-13.97 40.81-16.6c21.9-2.64 31.12-9.53 31.12-9.53.47-.35-1.73-7.56-1.88-8.26-.7-3.06-2.08-5.92-2.78-8.99-.7-3.04.02-4.12 1.31-6.76 2.28-4.64 1.09-9.59-1.4-13.89-2.25-3.9-5.7-7.3-9.94-8.94-7.53-2.9-10.14-3.41-10.14-3.41s-1.22-8.75-15.81-10.57c-5.42-.68-10.78-1.8-16.27-1.3-2 .18-4.11.48-6 1.26" fill="#322549"/>
<path d="M10.3 60.03s1.22 6.5 2.43 6.5c1.22 0 1.9-6.5 1.9-6.5H10.3" fill="#322549"/>
<path d="M17.03 49.9c-2.1.63-3.98.5-4.22-.3-.24-.8 1.26-1.96 3.35-2.59 2.1-.63 3.98-.5 4.22.3.24.8-1.26 1.96-3.35 2.59zm70.02 45.77c6.56-2.9 13.2-5.78 19.42-9.36 4.75-2.74 10.49-6.25 13.05-11.3 5.3-10.41-6.67-18.76-15.53-20.42-1.5-.28-12.81-1.72-13.23.85.41-2.54 3.22-3.68 4.56-5.64 2.12-3.07-.87-3.64-3.26-4.67-4.12-1.78-8.4-3.1-12.92-3.19-4.66-.08-8.55.45-12.05 3.88-.62.6-1.43 1.5-1.55 2.35-.35 2.51 4.67 3.29 6.1 2.4a28.4 28.4 0 0 1 10.78-3.73c2.48-.31 5.05-.44 7.46.32.65.21 1.35.46 1.91.85.06.04.48.45.52.45h-4.05s-2.43 3.82-8.1 5.44c-5.68 1.63-13.3-1.62-13.3-1.62s-5.56-2.64-10.58-1.99c-5.03.65-6.13 0-6.13 0v2.4s-2.43-1.63-5.27-2.4c-2.84-.77-6.9-2.67-11.96-1.84-5.07.84-6.09.18-10.75-1.84-4.66-2.01-9.68-1.43-12.57 3.68-2.89 5.12.81 8.4.81 8.4l4.22.11c.92-.06 1.84-.11 2.7-.1.29-1.77 1.12-5.6 3.08-6.55 2.56-1.24 1.36 3 1.63 5 .12.9.31 1.79.48 2.5 3.39 1.27 6.67 3.24 11.2 2.57 5.48-.82 11.36-4.61 16.63-1.7l.22.12c.51-1.15 1.76-3.67 3.03-4 1.66-.44.14 2.27-.13 3.7-.12.63-.2 1.26-.25 1.77.56.31 1.12.62 1.68.9.36-1.35 1.03-3.39 2.04-3.88 1.54-.74.57 2.21.59 3.66 0 .53.03 1.06.07 1.51 2.66 1.14 5.28 1.79 7.96 1.36 5.06-.81 5.83-3.02 13.58.14 2.27.92 4.68 2.99 7.05 3.31 1.5.2 5.88-.06 5.73-2.37.07 1.04.85 1.45.28 2.62-.43.9-1.45 1.45-2.35 1.75-2.72.94-4.85-.69-7.31-1.6-2.72-1.02-5.74-2.78-8.67-3.07-3.65-.37-8.52 2.06-13.38 1.25-4.87-.81-8.92-6.7-15.61-5.88-6.7.81-9.13 4.06-15 2.43-.91-.25-1.73-.52-2.49-.8-.05.2-.1.44-.14.72-.2 1.55.72 4.82-1.26 3.86-1.56-.76-2.2-4.6-2.4-6.2-2.23-1.01-4.22-1.83-7-1.83-.44 0-.85.02-1.25.05 1.63 2.74 5.84 9.4 10.89 14.15C32.7 80.27 39 80.46 39 80.46s-2.03-1.62-3.85-3.04c-1.83-1.42-4.46-5.92-4.46-5.92a64 64 0 0 0 10.94 7.34 501.7 501.7 0 0 0 13.59 6.9s-1.02-.2-3.45-.62c-2.43-.4-7.1-2.22-7.1-2.22s6.29 5.47 12.57 9.53c6.29 4.05 17.64 8.3 17.64 8.3s2.38-.74 12.17-5.06z" fill="#F5EA3C"/>
<path d="M72.96 31.3l-.12.62c6.56 1.51 13.7 3.4 21.13 5.65a324.6 324.6 0 0 1 22.61 7.71l.27-.63c-6.13-2.82-13.79-8.7-22-11.18-7.98-2.4-15.38-1.11-21.9-2.17M75.52 50.67s2.3 1.77 5.24 1.11c2.95-.64 5.25-2.82 5.25-2.82s-1.73-.32-3.92-.17c-.1.37-.21.78-.36 1.12-.35.78-1.2 1.19-1.2 1.19s-.24-.37-.41-1.34a2.78 2.78 0 0 1-.04-.7c-2.56.53-4.56 1.6-4.56 1.6M119.74 81.8s-5.31 4.91-17.9 10.61c-13.44 6.1-27.48 10.92-41.07 16.7l-.79 7.28s10.23-5.9 24.97-9.23c14.74-3.35 24.76-5.37 29.67-6.42a32.9 32.9 0 0 0 8.66-3.22l-3.54-15.72" fill="#FFFFFE"/><path d="M17.03 49.9c-2.1.63-3.98.5-4.22-.3-.24-.8 1.26-1.96 3.35-2.59 2.1-.63 3.98-.5 4.22.3.24.8-1.26 1.96-3.35 2.59zm89.44 36.4c4.75-2.73 10.49-6.24 13.05-11.29 5.3-10.41-6.67-18.76-15.53-20.42-1.5-.28-12.81-1.72-13.23.85.41-2.54 3.22-3.68 4.56-5.64 2.12-3.07-.87-3.64-3.26-4.67-4.12-1.78-8.4-3.1-12.92-3.19-4.66-.08-8.55.45-12.05 3.88-.62.6-1.43 1.5-1.55 2.35-.35 2.51 4.67 3.29 6.1 2.4a28.4 28.4 0 0 1 10.78-3.73c2.48-.31 5.05-.44 7.46.32.65.21 1.35.46 1.91.85.06.04.48.45.52.45h-4.05s-2.43 3.82-8.1 5.44c-5.68 1.63-13.3-1.62-13.3-1.62s-5.56-2.64-10.58-1.99c-5.03.65-6.13 0-6.13 0v2.4s-2.43-1.63-5.27-2.4c-2.84-.77-6.9-2.67-11.96-1.84-5.07.84-6.09.18-10.75-1.84-4.66-2.01-9.68-1.43-12.57 3.68-2.89 5.12.81 8.4.81 8.4l4.22.11c.92-.06 1.84-.11 2.7-.1.29-1.77 1.12-5.6 3.08-6.55 2.56-1.24 1.36 3 1.63 5 .12.9.31 1.79.48 2.5 3.39 1.27 6.67 3.24 11.2 2.57 5.48-.82 11.36-4.61 16.63-1.7l.22.12c.51-1.15 1.76-3.67 3.03-4 1.66-.44.14 2.27-.13 3.7-.12.63-.2 1.26-.25 1.77.56.31 1.12.62 1.68.9.36-1.35 1.03-3.39 2.04-3.88 1.54-.74.57 2.21.59 3.66 0 .53.03 1.06.07 1.51 2.66 1.14 5.28 1.79 7.96 1.36 5.06-.81 5.83-3.02 13.58.14 2.27.92 4.68 2.99 7.05 3.31 1.22.17 2.86.12 4-.4 1.71-.79.68-1.98-.89-1.89a3.02 3.02 0 0 1 2.4-1.4c3.41-.23 4.58 4.4 5.71 6.81 1.7 3.61 1.35 7.59-.5 11.07-5.6 10.49-22.03 17.44-22.03 17.44s2.38-.75 12.17-5.07c6.56-2.9 13.2-5.78 19.42-9.36z" fill="#409144"/>
<path d="M65.56 65.66c5.06-.81 5.83-3.02 13.58.14 2.27.92 4.68 2.99 7.05 3.31 1.02.14 3.38.06 4.73-.74l.44-.82c-1.63.37-5.75 1.02-7.92-1.01-2.75-2.58-4.64-4.2-11.54-3.26-5.73.8-9.33 1.01-14.3-1.4-.05.33-.08.65-.07.9 0 .54.03 1.07.07 1.52 2.66 1.14 5.28 1.79 7.96 1.36zm-9.92-4.83c-.43-.24-.87-.5-1.33-.8l-.66-.4a6.3 6.3 0 0 0-.18.7c-.12.64-.2 1.27-.25 1.78.56.31 1.12.62 1.68.9.17-.65.42-1.46.74-2.18zm-38.3-2.14c.09-.6.25-1.44.5-2.32-3.7-.64-7.19-.61-9.1-.53.5 1.81 1.67 2.85 1.67 2.85l4.22.11c.92-.06 1.84-.11 2.7-.1zm33.01 1.83l.22.12c.23-.52.62-1.33 1.1-2.09-5.17-2.49-8.23-1.34-12.39.25-4.82 1.86-8.34 2.23-15.58-.8a22 22 0 0 0-1.62-.6c.12.81.29 1.6.45 2.25 3.38 1.27 6.66 3.24 11.2 2.57 5.47-.82 11.35-4.61 16.62-1.7zM104 54.59c-1.25-.23-9.27-1.26-12.18-.13l-.18.07-.73.56a.92.92 0 0 0-.14.35c.01-.1.04-.19.06-.28L87.12 58s17.72-2.29 22.27 8.54c4.56 10.82-7.95 21.33-17.19 26.85 4.85-2.17 9.68-4.43 14.27-7.08 4.75-2.74 10.49-6.25 13.05-11.3 5.3-10.41-6.67-18.76-15.53-20.42zM69.9 50.92l-2.5-.45c.77.3 1.7.45 2.5.45zm.58 5.63c-2.59-1.2-5.03-3.69-6.46-5.33 1.7.52 2.83 1.06 2.83 1.06s7.63 3.24 13.3 1.62a16 16 0 0 0 1.97-.7l.05-.01c.16-.07.31-.13.48-.22l.06-.03c3.86-1.83 5.56-4.48 5.56-4.48h4.04s-1.34 4.69-7.24 7.48c-5.9 2.8-10.54 2.5-14.59.61z" fill="#317F3F"/>
<path d="M85.43 96.38l.15-.07-.15.07M75 100.7l-.05.01.04-.01M75.14 100.65c-.02 0-.03 0-.04.02l.04-.02M75.36 100.57l-.07.02.07-.02M30 65.52c8.31.75 12.91-1.93 16.1-1.68 3.2.26 3.72 3.2 12.15 4.6 8.44 1.41 11.8-2.17 16.2.13 3.34 1.75 6.7 3.77 10.4 4.72 1.1.28 2.71.5 4.23.35 2-.19 3.86-.99 4.19-3.06.26-1.7-.93-2.5-1.35-3.77.19.89.73 1.63.28 2.55-.43.9-1.45 1.45-2.35 1.75-2.72.94-4.85-.69-7.31-1.6-2.72-1.02-5.74-2.78-8.67-3.07-3.65-.37-8.52 2.06-13.38 1.25-4.87-.81-8.92-6.7-15.61-5.88-6.7.81-9.13 4.06-15 2.43-.91-.25-1.73-.52-2.49-.8a6.51 6.51 0 0 0-.16 1.8c.9.1 1.82.2 2.77.28M23.6 61.82c-2.24-1.01-4.23-1.83-7-1.83-.45 0-.86.02-1.26.05.53.9 1.34 2.2 2.36 3.73 1.53.3 3.77.7 6.47 1.08-.3-1.14-.48-2.31-.57-3.03" fill="#E8B63D"/>
<path d="M33 75.01c.5 1.28.6 2.5-.79 2.58-2.93.18-14.5-13.82-14.52-13.83a61.82 61.82 0 0 0 8.54 10.43C32.7 80.27 39 80.46 39 80.46s-2.03-1.62-3.85-3.04a13.13 13.13 0 0 1-2.15-2.4M41.63 78.84l1.31.69c-6.04-3.58-11.5-7.41-11.54-7.44a65.6 65.6 0 0 0 10.23 6.75M93.45 88.1a33.72 33.72 0 0 1-11.38 2.54c-9.15.3-20.75-2.87-28.85-5.89l2 .98s-1.02-.2-3.45-.6c-2.43-.4-7.1-2.23-7.1-2.23s6.29 5.47 12.57 9.53c6.29 4.05 17.64 8.3 17.64 8.3s11.54-4.88 18.57-12.64M76.52 100.13l-.15.06.15-.06M81.73 97.98l-.45.2.45-.2M76.05 100.31l-.12.05.11-.05M80.53 98.48l-.36.16.36-.16M84.72 96.7l-.82.35.82-.36M83.11 97.39l-.59.25.59-.25M77.1 99.9l-.18.07.17-.07M78.56 99.31l-.24.1.24-.1M79.49 98.92l-.31.14.3-.14" fill="#E8B63D"/>
<path d="M66.83 52.6c-.07-2.58 1.23-4.7 2.92-4.76 1.7-.04 3.12 2 3.19 4.58.07 2.58-1.24 4.7-2.92 4.75-1.7.05-3.12-2-3.19-4.58zm17.56 45.22c-5.62-2.47-12.84-7.58-13.06-15.43-.2-6.76.32-19.85.48-23.37 1.88-.93 3.2-3.56 3.11-6.61-.1-3.79-2.31-6.8-4.93-6.72-2.62.07-4.66 3.2-4.55 6.98.1 3.73 2.25 6.7 4.81 6.71-.25 3.67-.84 17.21-.51 23.54.38 7.3 7.66 15.72 18.12 17.27 10.32 1.51 29.54 1.09 29.54 1.09l1.71-1.24S90 100.3 84.4 97.82z" fill="#322549"/>
</g>
</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!
