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 Add Gradients to Your Project Using CSS?
Gradients in CSS are used for creating visually appealing and dynamic backgrounds, text effects, and UI elements. They consist of smooth transitions between two or more colors and are widely used in modern web design. CSS offers three main types of gradients: linear, radial, and conic, each with uni
5 min read
How to stretch and scale background image using CSS?
The background-size property is used to stretch and scale the background image. This property set the size of the background image. Here we will see all possible examples of background-size and background-scale properties. Syntax: background-size: auto|length|cover|contain|initial|inherit;cover: Thi
2 min read
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 add an image as background image of a web page ?
In this article, we will be adding an image as the background image of a web page. Background images are used to make a website more interactive and attractive. It can be applied in many stylings. Approach: In the body tag, specify a background image in the background attribute by passing the URL of
2 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
What is Advanced CSS and What do you Need to Learn?
Cascading Style Sheets (CSS) is the coding language used in web development. It helps developers make HTML elements look cool and interesting on web pages. While basic CSS covers key elements such as color, fonts, and layout, advanced CSS takes styling to the next level, presenting high-tech tools a
14 min read
How to Add Visual Effects to Images using CSS?
CSS is most useful for adding visual effects to images, enhancing the overall user experience. By using CSS properties like filter, transform, and transition, you can create dynamic and engaging effects that respond to user interactions. In this article, we will explore examples showcasing the visua
2 min read
How to Draw Graphics using Canvas in HTML5 ?
In this article, we will draw graphics by using the canvas element in the document. This tag in HTML is used to draw graphics on a web page using JavaScript. It can be used to draw paths, boxes, texts, gradient, and adding images. By default, it does not contain borders and text. Note: This tag is n
1 min read