86

I have an vector drawable I imported from an SVG asset. Sometimes, I have to adjust the size. Usually I update width and height. What I can't work out is how viewportwidth and height also impact the svg. It seems changing these dimensions can push the svg out of view within the visible area.

What do these units of measurement represent ? What is it's relationship with width and height respectively ? The documentation from Google is, (as usual), woefully inadequate. Could someone please elaborate ?

1
  • 1
    A VectorDrawable is not an SVG drawable. It's a different format.
    – Christian
    Jan 14, 2017 at 17:39

4 Answers 4

87

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 100x100. But if your width and height are 24x24, the contents will be scaled down from 100x100 to 24x24.

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

2
  • 2
    As an added note don't fiddle with the width and height as it will give you more work when you have to update the graphic. Try to define the sizes on the views instead of the graphic.
    – Warpzit
    Aug 27, 2018 at 9:18
  • 1
    This was a lot of words to not actually explain anything. The viewport is like the window you can view the SVG through, if the SVG is larger than the window then you won't see the entire SVG.
    – toby yeats
    Oct 25, 2022 at 18:21
33

Let's assume that the apple inside the canvas is your main vector drawable.Then h and w which are the height and width of the canvas respectively. So finally that h and w will be your drawable's viewportHeight and viewportWidth respectively

enter image description here

4
  • 41
    Beautiful draw :) Aug 18, 2020 at 10:15
  • 1
    There's something I'm still not getting: in this drawing,width and viewportWidth are the same (both are w). So what's the point of having two variables hold the same value?
    – SMBiggs
    Dec 7, 2021 at 21:29
  • 4
    @SMBiggs here "Width" will be the width of "Apple" and "ViewportWidth" will be the width of "Canvas" Dec 8, 2021 at 3:16
  • 2
    This is wrong, the canvas is the SVG's size. The viewPort width and height are like the window you are viewing it through, the window can be relatively closer or further away and position at different parts of the SVG image so you may not see the image at all.
    – toby yeats
    Oct 25, 2022 at 18:23
23

Viewportwidth/Viewportheight are the dimensions of the canvas for the SVG paths and the width/height are the actual intrinsic dimensions of the entire drawable.

4

Simply viewportWidth is like width of Frame and width like width of the picture inside that frame.

1
  • 2
    Not quite. viewPortWidth is the width of the frame's drawing coordinate system. The actual width of the frame is width.
    – Emil S.
    Jun 29, 2021 at 12:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.