Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Resize SVG in HTML?
Every HTML document can contain different image formats, such as PNG, JPEG, SVG, GIF, etc. that can be adjusted according to your needs. This article will explore various ways to resize an SVG image in HTML.
What is SVG?
SVG (Scalable Vector Graphics) is an XML-based image format used in web development. It can be scaled to any size without losing quality, making it ideal for logos and icons. These images are resolution-independent, meaning they maintain crisp edges at any size.
Syntax
/* CSS approach */
svg {
width: value;
height: value;
}
/* HTML approach */
<svg width="value" height="value">...</svg>
Method 1: Using HTML width and height Attributes
You can resize an SVG element directly using the HTML width and height attributes on the SVG element
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h3>SVG with HTML Attributes (300x200)</h3>
<svg width="300" height="200" viewBox="0 0 300 200">
<rect x="50" y="50" width="200" height="100"
fill="#4CAF50" stroke="#2E7D32" stroke-width="3" rx="15"></rect>
<text x="150" y="110" text-anchor="middle" fill="white" font-size="18">
HTML Resize
</text>
</svg>
</div>
</body>
</html>
A green rounded rectangle with white text "HTML Resize" appears, sized at 300x200 pixels using HTML attributes.
Method 2: Using CSS width and height Properties
The preferred approach is using CSS width and height properties to resize SVG elements. This provides better separation of concerns
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
text-align: center;
}
.small-svg {
width: 200px;
height: 150px;
}
.large-svg {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<div class="container">
<h3>Small SVG (CSS: 200x150)</h3>
<svg class="small-svg" viewBox="0 0 300 200">
<circle cx="150" cy="100" r="60" fill="#FF5722" stroke="#D84315" stroke-width="3"></circle>
<text x="150" y="110" text-anchor="middle" fill="white" font-size="14">Small</text>
</svg>
<h3>Large SVG (CSS: 400x250)</h3>
<svg class="large-svg" viewBox="0 0 300 200">
<circle cx="150" cy="100" r="60" fill="#2196F3" stroke="#1976D2" stroke-width="3"></circle>
<text x="150" y="110" text-anchor="middle" fill="white" font-size="14">Large</text>
</svg>
</div>
</body>
</html>
Two circles appear: a smaller red circle labeled "Small" (200x150px) and a larger blue circle labeled "Large" (400x250px), demonstrating CSS-based resizing.
Key Points
- Always include
viewBoxattribute for proper scaling - CSS approach provides better maintainability
- SVG maintains quality at any size due to its vector nature
- Use percentage values for responsive designs
Conclusion
SVG elements can be resized using either HTML attributes or CSS properties. The CSS approach is recommended for better code organization and responsive design capabilities.
428 Views
