SVG viewBox

SVG viewBox are used to define position and dimension of SVG shapes. viewBox are accept four component min-x (x-coordinate), min-y (y-coordinate), width and height.

  viewBox="min-x min-y width height"

Separated by (whitespace or comma)

This are mostly use in SVG. Because help of viewBox we can manage to display position in SVG elements. for example.

Example 1: Inside an SVG, if element shape are width and height is more than actual SVG container. then in this case we cannot view full shape or svg images. so we can solve this problem using viewBox. look at view example.

Note that Print (1 2 3 4) but only show few text.

<svg  height="200" width="280" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <text x="10" y="170" font-size="150px" fill="gray" >1 2 3 4</text>
</svg>

Our goal is to print display full svg text. so apply viewBox.

Note that help of viewBox we are increase width (from 280 to 550) of svg.

<svg viewBox="0 0 550 200" height="200" width="280" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <text x="10" y="170" font-size="150px" fill="gray" >1 2 3 4</text>
</svg>

This is an basic example to modified the width of SVG container. similar way we can modified height also.note that we are not change any other element. only added of viewBox.

Example 2: suppose we are print specific portion of given shape (height and width). so we can also use viewBox. for example.

This time we are print middle portion of svg text

<svg class="checkviewBox" viewBox="200 40 50 160" height="200" width="280" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <text x="10" y="170" font-size="150px" fill="gray">1 2 3 4</text>
</svg>