The last two numbers define the dimensions of the viewBox, which we’ll think of as “zooming”. The first two numbers define the position of the viewBox, which we’ll think of as “panning”. We control the viewBox by adding it as an attribute to the svg element, with a value comprising four space separated numbers: viewBox = The SVG viewBox is very similar to the viewport, but it can also pan and zoom like a telescope viewBox Parameters Building on the “looking through glass” analogy, if the viewport is like a window, the viewBox is like a telescope. The viewBox can be thought of as much like the viewport but with two extra features: it can “pan” and it can “zoom”. In the first SVG we see the entire 100px by 100px circle, but in the second SVG when we set our viewport size to 50px by 50px we only see a quarter of the circle. The viewport size is set by adding width and height attributes to the svg element, like so: What’s on the other side could theoretically be any size at all.įor example, you might have a shape in your graphic that is 100px by 100px, but if you set the SVG viewport to 50px by 50px you’ll only see a portion of that shape. The SVG viewport is like a porthole window whose size determines what you can see through itĪs with a window, the size of the viewport determines how much you can see, but it doesn’t define the size of whatever might be visible through that viewport. You can imagine this as being something akin to a porthole window through which you can see the world beyond. If you literally break down the word “viewport” you’ll get a hint as to its role in SVG it creates a “port” through which you can “view” a section of an SVG. SVG Viewport and viewBox (For Complete Beginners)
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |