SVG or Scalable Vector Graphics is a popular image format based on vector graphics primarily written in XML. They are gaining high popularity currently in web designing due to many of the advantages provided by them. SVGs are primarily used in web design. They are more powerful than any of the image formats available for the web because of the ability to be manipulated using CSS and Javascript.
In this tutorial, we will first look at the advantages of SVGs and then see how we can use them on the web. We will see all the tricks on adding SVG images on a webpage and also learn about the merits and demerits of those methods.
To follow this tutorial, it is recommended to have an SVG image with which you can experiment. You can download one for free from the website undraw or create one using illustrator or Inkspace. In this tutorial, I am using an image provided by the undraw website.
Advantages of Using SVG Images
There are several advantages of using SVG instead of other image formats. Some of the main advantages are listed below.
- SVG images can be created and edited by using a simple text editor.
- SVG images are based on vectors instead of pixels, so if we zoom them or resize them, they will not lose their quality, as happened in images like png, jpg, etc.
- They have a tiny file size compared to other file formats of that quality. So they are preferable instead of using a png or jpg image having a large file size.
- They are indexed by search engines, which will result in better SEO of sites.
- They also provide a high level of compression, which will be good for faster loading of sites.
- There are many tools available to create SVG images like illustrator, Inkspace, Sketch easily.
By looking at the advantages, we can imagine how SVG images will help any website and web developer. Now let us see how we can use them in web development.
Optimize SVGs
While creating an SVG image using creators like Inkspace, illustrator, etc. The images we get are typically not optimized and contain many extra contents like metadata. Those extra content are for application use. They increase the size of the SVG file, which slows down the webpage loading. We can optimize SVG images using many tools available online like svgminify, which optimize the SVG image by cleaning the extra content.
How to use SVG in CSS and HTML
We have many ways to include SVG images in HTML and CSS. We can use them in <img> tag, declare them inline in HTML, or use them through CSS. We will discuss all the methods of adding SVG images to the web below.
Include SVG using <img> tag of HTML
We can include SVG images in HTML by using the <img> tag of HTML, as we do with other image formats. This is the easiest way to add SVG images to a webpage. We need to refer to the SVG image in the src attribute of the <img> tag to use this method. Assume that we have an SVG image with the name image.svg present in the same directory where the HTML file is located. We can inject the HTML code snippet in the HTML page to include the SVG image in the HTML site.
<img src="https://thirdeyemedia.wpmudev.host/codeunderscored/wp-content/uploads/sites/15/2020/11/Sample.svg" alt="a svg image">
If we add the above code snippet in an HTML page correctly and see that the SVG file will be present in the same folder in which the HTML file is present, we will see something as shown in the below image when we open the HTML file in a web browser. In the above example, we are including the image path in order to illustrate and show the execution of the code.
When you execute the above code, we can see that the SVG image has been in its full size. We can also customize it by using the width and height attribute of the <img> tag. See the below code for illustration.
<img src="https://thirdeyemedia.wpmudev.host/codeunderscored/wp-content/uploads/sites/15/2020/11/Sample.svg" alt="a svg image" width="300px" height="300px">
After adding the width and height attribute in the <img> tag, if we open the Html file in a web browser, we will see that the image has been resized to 300px by 300px in the below image.
Almost every modern browsers support SVG images, but some old web browsers (IE8 and below, Android 2.3 and below) do not support SVG images. If you need support for those browsers, you need to refer to a png or jpg image in the src attribute and refer to the SVG image in the srcset attribute so modern browsers can use the SVG image and the old browsers will use the png or jpg image. The below code snippet shows how to achieve it.
<img src="image.png" alt="a svg image" width="300px" height="300px" srcset="image.svg">
Using SVG in the <img> tag is an easy way to insert SVG images in a webpage, but it also has some disadvantages. The main disadvantage is that this method of inserting SVG limits the manipulation functionality, i.e., we cannot control the SVG content directly by using CSS or Javascript. It has an advantage, too, that the browser will cache the SVG image, so we don’t need to request the server for the SVG image once it has been cached.
Using SVG as a CSS background-image
We can also include an SVG image in a webpage by using CSS. To achieve this, we need to use the background-image property of a CSS element. To see a practical demo of this method, create a blank div tag in your HTML file with an svg-image class. As shown in the below code.
<div class="svg-image"></div>
After adding the div tag in the HTML file, insert the following CSS code in the CSS file linked to the HTML file.
.svg-image {
width: 300px;
height: 300px;
background-size: 300px 300px;
background-image: url("image.svg");
}
After adding the above code, we will get the image image.svg displayed in the webpage when we open it in a browser as shown in the below image.
In the above CSS code, notice that we have given the value to background-size property similar to the width and height of the image. This is done because to get the image fit and all it will visible fully.
Using the SVG images by referring to it in the background-property of the CSS also has the same problems as we have with the <img> tag. We cannot control the SVG image’s content using CSS or Javascript. Still, overall these two methods are the easy method of adding SVG images to a Web page. The SVG image will also be cached by the browser, which will help faster loading of sites.
Using inline SVG Images
We can write SVG images directly in a HTML document using the <svg> tag. Inserting an SVG directly into an HTML page is called inline SVG. To insert inline SVG into an HTML page, we need to open the SVG image file using a text editor. Then copy and paste the SVG code from the SVG file directly into the HTML file. Here is an example of an SVG image placed inline in an HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline SVG</title>
</head>
<body>
<svg height="200" width="200">
<circle cx="100" cy="100" r="50" stroke-width="2" style="fill: blue; stroke: pink; stroke-width: 5; opacity: 0.5" />
</svg>
</body>
</html>
You can try the code by copy and paste it into an HTML file and opening the file in a browser or can run it directly here by clicking the run button present in the top-right of the code block. On opening or running the code you will get a circle with border-color pink and fill color blue with opacity 0.5.
Adding an SVG image, inline has many benefits. It will save an extra HTTP request for the SVG image that will make the Webpage faster. It will also make it very easy to manipulate them using CSS or Javascript, which is the best thing while using SVG images. The below image shows the manipulation of the SVG image by using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline SVG</title>
<style>
.circle:hover{
opacity: 0.55!important;
}
</style>
</head>
<body>
<svg class="svg" height="200" width="200">
<circle class="circle" cx="100" cy="100" r="50" stroke-width="2" style="fill: blue; stroke: pink; stroke-width: 5; opacity: 0.5" />
</svg>
</body>
</html>
If we hover the SVG image, the opacity of the image will become 0.55. This change has been added by using the CSS code. Similar to this, we can also manipulate the SVG by using Javascript.
Using SVG inline is a great way, but it also has some disadvantages, like the image will not get cached by the browser as it happens while displaying images in webpages by using <img> tag. There will also be a problem managing the SVGs in the webpage if we declare many SVG images inline. So if we have to edit the code after some days, we will face a great problem due to the inline SVGs. There is a solution to this problem, but we need to use a backend language like PHP. We can use the back-end language to fetch the SVG content from the SVG file into the web page, beautifying the code and making the code easier for a programmer to edit later on.
Using SVG image as an <object>
Using a <object> tag is the best option if we want to add and manipulate SVG in a webpage but don’t want to use inline SVG. We can use SVG images in the <object> tag by referring to the name of images in the data attribute of the <object> tag. The content in between the <object></object> tag is the fallback content displayed if the SVG image can’t be found or the browser does not support SVG. See the below code to illustrate how to include an SVG image using the <object> tag.
<object type="image/svg+xml" data="image.svg" class="svg">Cannot Display The SVG Image</object>
On opening the above code without an image.svg file present in the current folder, we will get the text “Cannot Display The SVG Image” printed in the browser. The <object> tag is one of the best and recommended ways to include an SVG image in an HTML file. We can also refer to a fallback png or jpg image in between the <object></object> tag by using the <img> so if a browser does not support SVG image, then it will display the png or jpg image.
Using SVG image as an <iframe>
Using <iframe> is another method to insert SVG images into a webpage. This is the worst method for inserting an SVG image into a webpage. We don’t recommend it, but just for learning, it’s good to know. We can add SVG images in <iframe> by referring it to the src attribute of the <iframe> tag. See the below code for illustration.
<iframe src="https://thirdeyemedia.wpmudev.host/codeunderscored/wp-content/uploads/sites/15/2020/11/Sample.svg">Something Wrong!</iframe>
As you can notice, after executing the above code, the image is trimmed off inside a viewport. Using the <iframe> method to insert an SVG image also has other disadvantages such as SEO issues for search engines, browser compatibility issues, and the inability to manipulate the content of the SVG image using Javascript.
Using SVG image as an <embed>
There is another way to insert an SVG image in a webpage, i.e., using the <embed> tag. The <embed> tag is mainly used to integrate an external application or interactive content, but we can also use it to insert SVG images. Like the <iframe> tag, the <embed> tag also has some disadvantages and is not recommended to use in a webpage. The following code block shows how to insert an SVG image using the <embed> tag.
<embed type="image/svg+xml" src="https://thirdeyemedia.wpmudev.host/codeunderscored/wp-content/uploads/sites/15/2020/11/Sample.svg" />
According to MDN, most of the modern browsers have removed the support for browser plug-ins. Hence, using the embed tag is not a good approach either.
Conclusion
In this tutorial, we have learned everything about using SVGs on the web and discuss which method will be more beneficial for the target audience. SVG is a great image format to be used on the web; we just need to optimize and used them in the correct way to get the most out of it. You may also like to see our guide on Top 10 Image and Video Related HTML Tasks.
