How to use SVG Images in HTML? Last Updated : 20 Nov, 2024 Comments Improve Suggest changes Like Article Like Report 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> TagThe <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. HTML <img src="https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="GFG Logo"> OutputSvg Images 2. Using SVG Image with CSS background-image PropertyTo 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. HTML <!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. HTML <object data="https://media.geeksforgeeks.org/gfg-gg-logo.svg"></object> OutputUsing SVG as an object Comment More infoAdvertise with us Next Article How to Insert an Image in HTML? H htomarec8c Follow Improve Article Tags : HTML HTML-Questions Similar Reads How to Insert an Image in HTML? To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML.Table of ContentUsing img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary method 1 min read How to Work with Images in HTML? Adding images to your web pages is crucial for enhancing visual appeal and user engagement. In HTML, there are different methods to embed images, and this guide will cover two common approaches with syntax and examples.These are the following ways to Work with Images in HTML:Table of ContentAdding S 2 min read How to Design Wave Image in HTML ? Waves are simple designs that can be generated on an HTML page which enhances the overall look of the website and make it more attractive and designer. These waves can be used in designing the background of the landing pages, Images, responsive buttons, products, and areas of the web pages with the 2 min read How to render HTML to an image ? Converting HTML code into an image can be achieved through various methods, such as using the html2canvas JavaScript library or leveraging CSS. This capability is particularly useful for users who wish to share a visual representation of their code without sharing the actual code. This guide will de 3 min read How to Resize a SVG image ? Resizing an SVG image cannot be done by simply using CSS height and width property to the img tag. To resize the SVG image, follow these steps: Method1: The SVG image will be taking 100% of all the width and height available to it. To make the image of the desired size set the CSS height and width p 1 min read How To Use Local Static Images In Svelte? Static images are stored locally within your project and can be accessed directly through the file path. In Svelte, you can use these static images in your components by importing them directly or referencing their paths within the public directory. In this article, we will explore two different app 3 min read Like