Open In App

SVG viewBox Attribute

Last Updated : 07 May, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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: 

html




<!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>


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 than the width and height properties of the SVG element. 

Example: 

html




<!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>


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: 

html




<!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>


Output:

  

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

Example: 

html




<!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>


Output:

  

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

Example: 

html




<!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>


Output: 

 

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

Example: 

html




<!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>


Output:

  

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

Example: 

html




<!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>


Output:

 



Similar Reads

How does the SVG Viewbox & Viewport work in CSS ?
SVG (Scalable Vector Graphics) is a format used to create graphics on the web that can scale without losing quality. Within SVG, two important concepts are the viewBox and viewPort, which play crucial roles in how SVG elements are displayed and scaled. Table of Content What is SVG ViewBox?What is SVG ViewPort?How Do They Work Together?Employing Ext
5 min read
SVG &lt;svg&gt; Element
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. SVG graphics are supported by the &lt;svg&gt; element in HTML. SVG graphics feature a container in which we can create a variety of shapes such as boxes, pathways, text, graphic images, and circles. Syntax: &lt;svg width="x" height="y"&gt; sh
2 min read
SVG from Attribute
The from attribute indicates the initial value of an attribute, it is used with to attribute. Syntax: from="number" Attribute Values: number: number at which we want to set from attributeWe will use the from attribute for setting the initial value. Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;svg viewBox=&quot;0 0 1000
1 min read
SVG fill Attribute
The fill attribute can be used in two things. For shapes and text, it's a presentation attribute that defines the color used to paint the element. For animation it defines the final state of the animation. Syntax: fill= "colour" Attribute Values: paint: The color in which we want to paint the element. We will use the fill attribute for setting the
1 min read
SVG y Attribute
The y attribute defines the y-axis coordinate in the user coordinate system. Syntax: y = "y-coordinate" Attribute Values: length: length at which we want to set the x-axis. percentage: percentage at which we want to set the x-axis. We will use the y attribute for setting the y coordinate for the elements. Example 1: Group of rectangle elements with
1 min read
SVG x Attribute
The x attribute defines an x-axis coordinate in the user coordinate system. Syntax: x = "x-coordinate" Attribute Values: length: Length at which we want to set the x-axis.percentage: Percentage at which we want to set the x-axis.We will use the x attribute for setting x coordinate for the elements. Example 1: Rectangle element with the different x-
1 min read
SVG rx Attribute
The rx attribute defines a radius on the x-axis. Elements that are using this attribute: &lt;ellipse&gt; &lt;rect&gt; Syntax: rx = "x-radius" Attribute Values: length: Length at which we want to set the x-radius.percentage: Percentage at which we want to set the x-radius.We will use the rx attribute for setting the radius on the x-axis. Example 1:
1 min read
SVG width Attribute
The width attribute defines the vertical length of an element. Syntax: width= "width" Attribute Values: length: Length at which we want to set the width attribute. percentage: Percentage at which we want to set the width attribute. We will use the width attribute for setting the width of the element. Example 1: In this example we will use the width
1 min read
SVG opacity Attribute
The opacity attribute specifies the transparency of an object or of a group of objects. Syntax: opacity= "opacity" Attribute Values: decimal: The decimal at which we want to make our element opaque We will use the opacity attribute for setting the opacity of the element. Example 1: In this example we will use the opacity attribute for setting the o
1 min read
SVG stroke-width Attribute
The stroke-width attribute is an attribute defining the width of the stroke applied to the shape. Syntax: stroke-width="length" Attribute Values: length: Length at which we want to set the stroke-width attributepercentage: Percentage at which we want to set the stroke-width attribute We will use the stroke-width attribute for setting the width of t
1 min read
Article Tags :