SVG viewBox Attribute

The viewBox is an attribute of the SVG element in HTML. It is used to scale the SVG element that means we can set the coordinates as well as width and height.

Syntax:

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

Attribute Values:

  • min-x: It is used to set the horizontal axis. It is used to make the SVG move on a horizontal axis (i.e Left and Right).
  • min-y: It is used to set the vertical axis. It is used to make the SVG move on a vertical axis (i.e Up and Down).
  • width: It is used to set the width of viewbox.
  • height: It is used to set the height of viewbox.

Note: The letter ‘B’ is capital in the viewBox.

So with the help of these values, we can scale the SVG vector and change the direction of it (i.e make it to left, right, top or bottom) based on the value defined in the width and height property in the SVG element.



Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>SVG viewBox Attribute</title>
      
    <style type="text/css">
        svg {
            border: 1px solid #aaa;
        }
    </style>
</head>
  
<body>
      
    <!-- Without viewBox -->
    <svg width="200" height="200">
        <circle cx="50" cy="50" r="45"
            stroke="#000" stroke-width="3"
            fill="none"/>
    </svg>
      
    <!-- With viewBox -->
    <svg width="200" height="200" viewBox="0 0 200 200">
        <circle cx="50" cy="50" r="45" stroke="#000"
            stroke-width="3" fill="none"/>
    </svg>
</body>
  
</html>

chevron_right


Output:

Here, the square box shows the border for the SVG and with viewBox attribute we can set the scale and pan for the vector. The output for both of the above SVG elements are same. We set the width and height for SVG and viewBox equal (i.e 200) so we are getting both the circles of the same size.

Values of width and height: With the width and height values you can change the size of the SVG vector. So, if we want to change the size and make it larger, then set the value for width and height, in viewBox, smaller then the width and height properties of the SVG element.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>SVG viewBox Attribute</title>
      
    <style type="text/css">
        svg {
            border: 1px solid #aaa;
        }
    </style>
</head>
  
<body>
  
    <svg width="200" height="200" viewBox="0 0 100 100">
  
    <circle cx="50" cy="50" r="45" stroke="#000"
            stroke-width="3" fill="none"/>
    </svg>
</body>
  
</html>

chevron_right


Output:

So now, to change the size of the SVG vector and make it smaller we have to set the value of width and height in the viewBox, larger than the width and height properties of SVG element.

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>SVG viewBox Attribute</title>
      
    <style type="text/css">
        svg {
            border: 1px solid #aaa;
        }
    </style>
</head>
  
<body>
    <svg width="200" height="200" viewBox="0 0 300 300">
  
    <circle cx="50" cy="50" r="45" stroke="#000"
            stroke-width="3" fill="none"/>
    </svg>
</body>
  
</html>

chevron_right


Output:

Left Move: Set the value of x-min with a positive number. It will move the SVG in the left side.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>SVG viewBox Attribute</title>
      
    <style type="text/css">
        svg {
            border: 1px solid #aaa;
        }
    </style>
</head>
  
<body>
    <svg width="200" height="200" viewBox="50 0 100 100">
  
    <circle cx="50" cy="50" r="45" stroke="#000"
            stroke-width="3" fill="none"/>
    </svg>
</body>
  
</html>

chevron_right


Output:

Right Move: Set the value of x-min with a negative number. It will move the SVG to the right side.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>SVG viewBox Attribute</title>
      
    <style type="text/css">
        svg {
            border: 1px solid #aaa;
        }
    </style>
</head>
  
<body>
    <svg width="200" height="200" viewBox="-50 0 100 100">
  
    <circle cx="50" cy="50" r="45" stroke="#000"
            stroke-width="3" fill="none"/>
    </svg>
</body>
  
</html>

chevron_right


Output:

Top Move: Set the value of y-min to a positive number. It will move the SVG on the top side.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>SVG viewBox Attribute</title>
      
    <style type="text/css">
        svg {
            border: 1px solid #aaa;
        }
    </style>
</head>
  
<body>
    <svg width="200" height="200" viewBox="0 50 100 100">
  
    <circle cx="50" cy="50" r="45" stroke="#000"
            stroke-width="3" fill="none"/>
    </svg>
</body>
  
</html>

chevron_right


Output:

Bottom Move: Set the value of x-min with a negative number. It will move the SVG on the bottom side.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>SVG viewBox Attribute</title>
      
    <style type="text/css">
        svg {
            border: 1px solid #aaa;
        }
    </style>
</head>
  
<body>
    <svg width="200" height="200" viewBox="0 -50 100 100">
  
    <circle cx="50" cy="50" r="45" stroke="#000"
            stroke-width="3" fill="none"/>
    </svg>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.