Why and how `preserveAspectRatio`? by Taylor Hunt on CodePen
For instance, a value of “xMinYMin” indicates that the point of alignment is A value of “meet” indicates that the browser should fit the viewBox. I want an SVG to be a width:height size, with the absolute size changing according to browser window size. I need the aspect ratio of the. You can omit this keyword if it's meet — xMinYMin meet is the same as value is invalid, it defaults to preserveAspectRatio="xMidYMid meet".
SVG images can be far smaller and load more quickly. SVG images can be edited in code with minimal effort. SVG is scalable and stays sharp, even at larger sizes.
SVG Viewport and View Box
Example 2 — The site expands by using a repeating beard section the blue part as the background for the page content. In Example 2, the different colored bands represent three different SVG backgrounds.
It just needed to seamlessly connect to the blue section of the site.
The blue section holds all of the page content in a single vertical column see Example 1. This section has a vertically repeating background image that will tile seamlessly and grow with the vertical height of the page.
The green section is just a footer that finishes off the beard and finishes the illusion of a continuous image. I thought that dropping SVG into my css would be a fairly straight-forward process, but I found that the behavior for repeating SVGs is a little different than bitmap images.
Slide "Preservation of Aspect Ratio: Meet and Slice"
Most of these problems are created by responsive design and the floating point numbers that are created by using percentages to determine size. For those of you who just want the high points: Example 3 — The Sharktapus illustration has been sized up from 50px square to px square and now the image is blurred and pixellated.
So, why not use a PNG? Its a fair question, but the answer is simple: Large images increase load times on the page and scaling creates ugly artifacting and blurring. To mitigate these problems, I decided to use all SVG for my background images.
However, I quickly ran into a strange behavior with my SVGs that i had never before experienced. SVGs are great because, if the imagery is appropriate, they are very lightweight and completely scalable.
What looks good on a phone will also look good on a desktop.
- SVG PreserveAspectRatio
It even looks perfect on high pixel density screens like the retina display. SVG also render as background images just fine within certain constraints, but responsive layouts can create a major visual problem with continuous patterns and repeating backgrounds of SVGs.
Why and how `preserveAspectRatio`?
So, lets look at an example of the problem: Play the animation and notice that part of the time, Example 4a has white horizontal lines flickering between the vertically stacked tiles.
These visual artifacts are created by the way that the SVG elements are scaled within the viewBox and the way that the viewBox is framed within the viewPort. Whew, thats a mouthful.What are SVG viewport and viewBox? [ A beginners guide to SVG part 3 ]
Example 4b is exactly the same SVG image with one additional property added to control this behavior. That means that the view box will fill out the whole viewport, thus distorting the image since the aspect ratio along the x- and y-axis are not the same.
Depending on how you want to align the view box within the viewport, you may use different settings. I will get a bit deeper into how these settings work, but let us first look at an example: The viewBox is set to 0 0 50 The circle in the image has a radius of 25, making it 50 untis wide and 50 units high.
Thus, it fills out the entire view box not viewport. When using the meet specifier, the view box will be scaled according to the y-axis, since it has the smaller aspect ratio. Since the viewport is pixels wide, you will have to specify how to align the view box horizontally inside the viewport.
You do so using the xMin, xMid and xMax subparts of the first part of the preserveAspectRatio attribute value. Notice how the viewbox is aligned to the left, center and right depending on the setting. Similarly, if an image had a smaller aspect ratio along the x-axis than the y-axis, you would have to specify its y-alignment.
Here is the example from before, but now with a width of and a height of Therfore the view box will fill out the viewport in the x-axis direction, but not in the y-axis direction. That makes it necessary to specify the y-alignment for the view box.