What is the impact of viewportwidth/height on Android drawables

The viewportWidth and viewPortHeight define the area of the document that the content of the VectorDrawable is drawn within. They are equivalent to the width and height fields of an SVG viewBox. Research how an SVG viewBox works if you need further explanation.

So imagine your shape is a rectangle that is 100 wide and 100 height. Your viewportWidth and viewPortHeightshould normally both be set to 100. So that Android knows the dimensions of the underlying shapes.

The width and height attributes tell Android what the default (“intrinsic”) rendering size of the VectorDrawable should be. You can think of these like the width and height of a PNG or GIF (or SVG for that matter).

So the contents of your VectorDrawable could be defined over an area of 100×100. But if your width and height are 24×24, the contents will be scaled down from 100×100 to 24×24.

So that’s why fiddling with the viewportWidth and viewPortHeight messes with the VectorDrawable. So for instance, if you change them to 50×50, you would end up with one corner of the shape scaled down to 24×24 – instead of the whole shape.

Leave a Comment