opktokyo.blogg.se

height - height in user coordinates/px units.width - width in user coordinates/px units.

The viewBox has four values, separated by either whitespace or commas. You can see from the above how powerful the viewBox can be, now it’s time to define it! Defining the viewBox The viewBox also helps us hide part of an image which can be very useful for animations. With a viewBox correctly set on this image, it will scale to the dimensions of it’s container and since it’s an SVG it will look just as crisp!Īs you can see from the above, our bird scales to whatever size the container is! The viewBox gives us the power to make our SVGs fill whatever container they are in, let’s say we have a little bird image like so: Why even bother to use a viewBox? You can create perfectly valid SVGs without specifying a viewBox, but you’d be depriving yourself of the many possibilities that the viewBox offers you. I hope this article will clear up any confusion you have, and put you in a position to use the power of the viewBox. With alien-like syntax such as viewBox="0 0 50 50", it’s no surprise that many of us face problems understanding the viewBox! The SVG viewBox can be a source of frustration when starting on your journey of learning SVG, I know it was for me!