How to use SVG Images in HTML?
SVG images are special graphics used in HTML that doesn’t lose quality when resized. They are great for icons, logos, and shapes because they stay clear at any size. To use SVG images in HTML, add them with <img src=" image.svg"> or paste SVG code directly with <SVG>.
1. Using SVG Image with <img> Tag
The <img> tag is used to include SVG images in your HTML, just like any other image format. You specify the image file using the src attribute. If you don’t set a specific size, the SVG will appear at its original size. To change the size, you can use the width and height attributes or style it with CSS.
<img src="https://media.geeksforgeeks.org/gfg-gg-logo.svg"
alt="GFG Logo">
Output
2. Using SVG Image with CSS background-image Property
To use an SVG image as a background in CSS, you can set the image URL in a class using background-image. The .mySVG class in the example below adds the SVG as a background, makes sure it doesn’t repeat, and sets the height to 200px.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.mySVG {
background-image: url('https://media.geeksforgeeks.org/gfg-gg-logo.svg');
background-repeat: no-repeat;
height: 200px;
}
</style>
</head>
<body>
<div class="mySVG"></div>
</body>
</html>
Output
3. How to use an SVG as an <object>
The <object> tag allows you to embed an external SVG file directly into your webpage. This method displays the SVG inline, and you can manipulate it with CSS or JavaScript.
<object data="https://media.geeksforgeeks.org/gfg-gg-logo.svg"></object>
Output
