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=
"https://media.geeksforgeeks.org/wp-content/uploads/20211022130449/svg.png"
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=
"https://media.geeksforgeeks.org/wp-content/uploads/20211022130449/svg.png">
</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=
"https://media.geeksforgeeks.org/wp-content/uploads/20211022130449/svg.png" />
</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>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<image href=
"https://media.geeksforgeeks.org/wp-content/uploads/20211022130449/svg.png"
height="200"
width="200" />
</svg>
</body>
</html>
Output:
Similar Reads
How to create and use CSS Image Sprites ? In this article, we are going to learn how we can how to create and use CSS Image Sprites.CSS Image Sprites are nothing but a way to reduce the HTTP requests from the image resources. A CSS Image Sprite is a single image file containing all images on a document page. Image sprites are advantageous s
3 min read
How to animate the drawing on a web page? CSS allows animation of HTML elements without using JavaScript. An animation lets an element gradually change from one style to another. You can change as many CSS assets as you want, as often as you want. To use CSS animation, you must first specify some keyframes for the animation. The keyframe ca
2 min read
How to Set Up a WebGL Project? WebGL is the JavaScript API that allows you to render 3D and 2D graphics within a web browser without needing plugins. It provides a way to interact with the graphics hardware directly and is built on top of OpenGL ES. Setting up a WebGL project involves configuring your development environment, cre
3 min read
How to Import SVGs Into Your Next.js Apps? Next.js is a powerful React framework that simplifies building and deploying web applications. Incorporating SVGs (Scalable Vector Graphics) into your Next.js projects can enhance your user interface with high-quality, scalable images. In this article, we will see how to Import SVGs Into Your Next.j
5 min read
How to Add 2D Content to a WebGL Context? Web Graphics Library (WebGL) is a powerful API that allows developers to render interactive 3D graphics within web browsers without requiring plug-ins. However, despite its primary focus on 3D content, there are situations where you may want to render 2D content in a WebGL context. Whether you're ov
6 min read
How to Make an SVG Scale With its Parent Container? SVGs (Scalable Vector Graphics) are great for graphics that need to stay sharp on any screen. But by default, they don’t always scale automatically with their parent container — unless you use the right settings.In this article, you'll learn how to make an SVG resize and scale properly with its pare
3 min read