CSS Full Width and Height SVG

In this article, we’ll explain how to use CSS to achieve full width and height for SVG. SVG (Scalable Vector Graphics) is an XML-based vector graphics format for describing two-dimensional graphics and https://coder-cafe.com/wp-content/uploads/2025/09/images. In web development, SVG is widely used to create elements such as icons and buttons. In some cases, you may need to set an SVG element to its full width and height, meaning it fills the entire parent element. Below, we’ll explain how to achieve full width and height using CSS.

Read more: CSS Tutorial

Full-width SVG with CSS

To make an SVG full-width, we need to set its width to 100% so that it matches the width of its parent element. We can use the CSS width attribute to set the width of the SVG as follows:

svg {
width: 100%; 
}

The above code will set the width of the SVG element to be equal to its parent element, thus achieving the full-width effect. Here’s an example:

<div class="container"> 
<svg  width="500" height="500"> 
<circle cx="250" cy="250" r="200" fill="red" /> 
</svg> 
</div> 

<style> 
.container { 
width: 800px; 
} 
svg { 
width: 100%; 
} 
</style> 

In the example above, the width of the parent element .container is 800px, and the width of the SVG element is set to 100%. Since the width of the SVG element is equal to the width of the parent element, the SVG graphic will completely fill the container.

Using CSS to Create Full-Height SVGs

To create a full-height SVG, we need to set its height to 100% so that it matches the height of its parent element. We can use the CSS height property to set the height of the SVG as follows:

svg {
height: 100%;
}

The above code sets the height of the SVG element to the same as its parent element, achieving the full-height effect. Here’s an example:

<div class="container"> 
<svg  width="500" height="500"> 
<circle cx="250" cy="250" r="200" fill="blue" /> 
</svg> 
</div> 

<style> 
.container { 
height: 500px; 
} 
svg { 
height: 100%; 
} 
</style> 

In the example above, the parent element .container has a height of 500px, while the SVG element’s height is set to 100%. Since the SVG element’s height is equal to the parent element’s height, the SVG graphic will completely fill the container.

Summary

Using the CSS properties width and height, we can easily create full-width and full-height SVG effects. By setting the width or height to 100%, the SVG element will completely fill its parent element. Whether creating responsive web pages or achieving special effects, using full-width and full-height SVGs can help us better layout and display graphical content. I hope this article has helped you understand how to create full-width and full-height SVGs using CSS.