This should give you a very solid understanding of preserveAspectRatio and how to scale your graphics. If in this example, we wanted to align our alligator to the top we would do xMidYMin and it would give us the following:Īgain ask yourself, how would you align this to the bottom? Conclusion Our alligator is centered here due to xMidYMid, if we wanted to align our alligator to the left, we would just do xMinYMid.Īs a little test, ask yourself how would you align the alligator to the right? Mid/Min/MaxĪbove we have used xMidYMid,which is what you will use the majority of the time but we can also use Min and Max. This can be quite useful for background images or a background on a banner. 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. What would happen instead if we changed this to 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. Rated 4.33 out of 5 0.00 Add to cart Witches Ride Mini Bundle Free SVG Cut Files 0. I think you can now see why preserveAspectRatio is so useful! Meet vs Slice Vampire Lips Kiss Me I’m Vamp-irish Free SVG File 0.00 Add to cart Vote It’s Your Right Free SVG File 0.00 Add to cart Will Work For Toilet Paper Free Cut File. If we were to set preserveAspectRatio="none", our image would stretch to fit the viewPort just like a raster image: Now our dimensions are 500x100, as you can see the image is now centered and the aspect ratio stays the same. In the above example our viewPort has the dimensions 100x100 so our preserveAspectRatio does not matter here. What will happen when the aspect ratio of our viewPort and viewBox are different? 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 The following is the markup for our SVG: Īs you can see we haven’t defined a preserveAspectRatio for our SVG so it will default to preserveAspectRatio="xMidYMid meet". We will use the famous Alligator.io logo to help our understanding. Yikes! This is still pretty confusing, so let’s use an example to understand. meet - scale our graphic until it meets the height and width of our viewPort.xMidYMid - center the viewBox region within the viewPort region.Let’s break this down a little so it’s not so scary looking! To explicitly set the default preserveAspectRatio, we do the following: By default our preserveAspectRatio will tell our image to scale to fit the viewPort and to be centered. ![]() PreserveAspectRatio gives us the ability to tell our graphic how to scale when the aspect ratio of the viewBox and viewPort are different. If you do not understand the viewBox just yet, then go check out my other article here explaining it. PreserveAspectRatio is the partner in crime of the SVG viewBox.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |