How to add Scalable Vector Graphics to your web page ?
Last Updated :
18 Nov, 2022
In this article, we will learn how can we add Scalable Vector Graphics (SVG) to our web page & will also understand its implementation through the example. SVG is a type of image format which is written in XML for vector-based graphics. Every element and every attribute in SVG files can be animated. Scalable Vector Graphics images do not lose their quality when resized or zoomed. There are many ways through which we can add SVGs to our web page.
There are several benefits of using SVG over the other image format (such as JPG, PNG, GIF, etc.):
- These images can easily be created and edited with any text editor.
- SVG images can be searched, indexed, scripted, and compressed.
- These images are scalable & can be displayed with high quality at any resolution.
There are several ways to use SVG images in HTML. A few of the methods are discussed below:
SVG in a <img> tag: This is the basic & simple way to insert the SVG image to a webpage. For this method, we can simply use the <img> tag then specify the file path or image link in the src attribute. To use this method, we should have downloaded the SVG image file or SVG image link.
Syntax:
<img src="svgImage.svg" alt="SVG_img">
Example: This example illustrates the adding the SVG image using the <img> tag. Without specifying the SVG image size, will occupy the original size of the SVG image.
HTML
<!DOCTYPE html>
<html>
<head>
<title>SVG Image</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h4>Use of SVG image in img tag</h4>
<img src=
alt="GFG">
</body>
</html>
|
Output:
SVG in a <object> tag: We can use the <object> tag to insert the SVG images by specifying the URL of the resource that will be used by the object using the data attribute. The width and height can be used to specify the size of the SVG image.
Syntax:
<object data="svgImage.svg"> </object>
Example: This example illustrates the adding of the SVG image using the <object> tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title>SVG Image</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h4>Use of SVG image using object tag</h4>
<object data=
</object>
</body>
</html>
|
Output:
SVG in a <embed> tag: We can use the <embed> tag to insert the SVG image by specifying the link in the src attribute. Although, the <embed> tag is now deprecated and removed support for browser plug-ins in most of the modern browsers.
Syntax:
<embed src="svgImage.svg" />
Example: This example illustrates the adding of the SVG image using the <embed> tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title>SVG Image</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h4>Use of SVG image using embed tag</h4>
<embed src=
</body>
</html>
|
Output:
SVG in a <image> tag: The <image> SVG element includes images inside SVG documents. It can display raster image files or other SVG files. The only image formats SVG software supports are JPEG, PNG, and other SVG files.
Syntax:
<svg>
<image attributes="values" >
</svg>
Example: This example illustrates the adding of the SVG image using the <image> tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title>SVG Image</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h4>Use of SVG image using image tag</h4>
<image href=
height="200"
width="200" />
</svg>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...