This article mainly introduces the usage of viewBox attributes when using SVG images in HTML5, including some responsive design-related content. Friends who need it can refer to it to quickly understand the parameters of viewBox
The viewBox attribute is used to specify the origin and size of the coordinate system of the user SVG image. All content drawn in SVG is done relative to this coordinate system. Because the SVG canvas is infinitely extended in all directions, you can even draw graphics outside the boundaries of this coordinate system; but these graphics positioned relative to the SVG window can also be controlled by the position of the user's coordinate system.
The viewBox property uses four parameters to specify the location of the coordinate system origin and its size: xy width height. In the initial case, this coordinate system is equivalent to the initialized window coordinate system (determined by the width and height of the SVG image), and its origin is in (0, 0) - that is, the upper left corner of the SVG.
By changing the values of the two parameters x and y, the position of the origin can be adjusted. Change the values of width and height to change the size of the coordinate system. Just use the viewBox attribute to help you expand or crop the SVG canvas. Read with the example.
Important: In this article, I will not change the default behavior (scale and position) of viewBox within the SVG window. Because, according to the default behavior of the attribute, the content of the viewBox will be included as completely in the window as possible and then placed in the center. However, using the preserveAspectratio property allows you to freely change the size and position of the viewBox, but in this article, this is not a necessary technique, so we won't explain it in depth here either.
Use viewBox to crop SVG, that is, use viewBox attribute to create an SVG of Art Direction
A while ago, one of my clients asked to set the SVG avatar of his website to different sizes according to different screen sizes, so that only a small part of it is visible on a small screen, a larger part can be seen on a medium screen size, and then the complete content can be seen on a large screen. The first idea that came to my mind at that time was that his requirement was to use the viewBox attribute to crop the SVG image, and then display a certain part of the image he wanted to see based on different screen sizes.
By changing the size and origin of the SVG coordinate system, we can crop the SVG and display the part of the content we want to display in the window.
Let's see how to implement it.
Suppose we have this complete SVG image as follows, and then we want to crop it to the size of a small screen. This image is a free-to-use house vector designed by Freepik, which is licensed under the Creative Commons Attribution 3.0 Unported Agreement. For simplicity, let's first assume that the image is just about what is to be cropped to display on small and medium screens, and the complete content displayed on the large screen, as shown below.
The picture on the left is the complete picture we will crop using the viewBox property, and the picture on the right is the area we want to display on the small screen.
Now, crop the SVG by changing the value of the viewBox property. There are some things that need to be considered, we will talk about them later. But first, we need to change the coordinate system to match the content of the virtual box rectangle area in the picture above. , by adjusting the origin of the system and the values of width and height, we can change its initial 0 0 800 800 parameter value.
But how do we know the new coordinates and new dimensions? The point is not to go through a lot of repeated experiments and errors.
There are several ways. Since we are already in the graphics editor (my example uses AI), we can use the editor's panel to get the position and dimensions of the elements.
I draw this dotted rectangular box, in addition to representing what I want to display on the small screen, another reason is that we can get the position and dimensions of the rectangle and use them as the value of the viewBox. Using AI's transformation panel (pictured below), we got the values we needed. By selecting the rectangle and clicking on the transformation link in the upper right corner, we get the panel shown in the figure below, including the x, y, width and height values we need.
The transformation panel in this AI can be used to obtain the position and size of the selected rectangle.
You may have noticed that the above value is not an integer, so we need to modify it manually. Based on the above information, we change the value of viewBox to 0 200 512 512.
Because the aspect ratio of the new viewBox is the same as that of the SVG window (both square), the content in the viewBox will be expanded, and only the selected area will be displayed in the window. After changing the value of viewBox, the result is as shown in the figure:
Newly cropped SVG. Only the location where we specify that the viewBox property is visible in the window. The blue border indicates the SVG's window.
At this point, there is a problem that needs to be solved:
What if the aspect ratio of the cropped area (i.e. viewBox) is the aspect ratio of the SVG window?
In this case, there will be a significant overflow. The obvious overflow, I mean not an extension beyond the SVG window boundary, but an overflow relative to the new user coordinate system defined by viewBox. The following figure provides corresponding explanations.
If the aspect ratio of viewBox is different from the aspect ratio of the viewBox, the content in the SVG will overflow the user coordinate system, and the result may be like this.
The black border represents the new user coordinate system, and the blue border is the SVG window.
The black border in the right image above is the area defined by the viewBox. According to the default behavior of viewBox in the window, it will be centered and enlarged as much as possible to ensure that its content is included in the window (blue border).
Because SVG canvas conceptually extends infinitely in all directions, you can draw graphics outside the boundaries of the user coordinate system, and the content will directly overflow and move, as shown in the figure above.
If you change the aspect ratio of the SVG window (the width and height of the SVG) to make them adapt to the aspect ratio of the viewBox, you won't see overflow because the zoom of the viewBox is adapted to the window, as in the previous example.
However, in some cases, you may not or don't want to change the aspect ratio of the SVG at all. For example, if you are using SVG sprite as a set of images to display images on the page. In most cases, an image has a fixed aspect ratio - and you don't want to change the size of the image, just to adapt to the content of a small image inside it. Or maybe you have embedded an icon system and want all icons to remain the same size at the same time.
To cut off excess (for example, some other icons on sprite are displayed in the window), you can use <clipPath> to cut out the excess. The clipping path can be a <rect> element covering the entire viewBox area and then apply that element to the root SVG.
However, there is another thing to remember: make sure the x and y properties of <rect> are consistent with viewBox, unless rect will be relatively positioned at the origin of the original/initialized system, then the content of the SVG being cropped is also uncertain.
CSS Code Copy content to clipboard