Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
SVG (Scalable Vector Graphics) is an image format used in web development. It is an XML-based image format that can be scaled to any size without losing its quality. Due to this reason, it is best to use an SVG image for logos and icons. These images are resolution-independent, meaning they can be scaled to any size without losing quality.
Resizing SVG in HTML
Using HTML height and width Attribute
We can resize an SVG element using the HTML width and height attribute on the SVG element. You can set the width and height of any element using these attributes.
Example
<!DOCTYPE html>
<html>
<body>
<svg width="800" height="800">
<g>
<polygon points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke="black" stroke-width="3" fill="rgb(42, 157, 50)">
</polygon>
</g>
</svg>
</body>
</html>
Output
Using CSS height and width Property
We can also use the CSS width and height property to resize the SVG element. This is preferable. You can also set the width and height of any element using these properties.
Example
<!DOCTYPE html>
<html>
<head>
<style>
svg {
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<svg>
<g>
<polygon points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke="black" stroke-width="3" fill="rgb(42, 157, 50)">
</polygon>
</g>
</svg>
</body>
</html>
Output
308 Views
