How to Use SVG Image File in HTML and CSS

1. Use the <img> Tag to Add SVG File to the Web Page
2. Use the <object> Tag to Add SVG File to the Web Page
3. Use the <embed> Tag to Add SVG File to the Web Page
4. Use the <iframe> Tag to Add SVG File to the Web Page
5. Use the CSS background-image Property to Add SVG File as a Background

This article introduced embedding SVG images on web pages using HTML and CSS.

The SVG file is a vector image, and using it has many benefits over using png, jpeg, jpg, or other image files. The main benefit of the SVG file is that it is resolution-independent, which means when we scale it to any dimension, the resolution or quality of the image remains unchanged.

Also, the SVG file size is very compact, which decreases the loading time of the web pages. We can also edit the SVG file in the text editor and make it SEO-friendly by adding some keyword-related text.

Furthermore, we can add animation to SVG files by scripting, which is also one of the best advantages of using SVG files.

Use the <img> Tag to Add SVG File to the Web Page

In this section, we have used the <img> tag of HTML to render SVG image files on the web page. We have taken two different icons from the svgrepo and embedded its URL in the src tag of the <img> tag.

Example code:

<img src="https://www.svgrepo.com/show/426102/camera.svg" alt="camera icon">
<img src="https://www.svgrepo.com/show/426942/transport.svg" alt="car icon">

In the above output image, users can see the SVG icon of the camera and car.

Use the <object> Tag to Add SVG File to the Web Page

The <object> HTML tag allows users to render the multimedia like audio, video, or PDFs on the web page.

We have used two attributes of the object tag to show the SVG file. The data attribute of <object> takes the SVG file’s local path or URL.

The type attribute of the <object> tag takes the file type, and we will use image/svg+xml as its value to render the SVG file.

Here, we have rendered camera and car icons using the object tag.

<object data="https://www.svgrepo.com/show/426102/camera.svg" type="image/svg+xml"></object>
<object data="https://www.svgrepo.com/show/426942/transport.svg" type="image/svg+xml">

We can also add the fallback image inside the <object> tag. In the example below, we have taken the broken URL of the camera icon and added the fallback image.

Now, when users execute the below code, they will see a fallback image only as the URL of the SVG file is broken.

<object data="https:/w.svgrepo.com/show/426102/camera.svg" type="image/svg+xml">
    <img src="https://yt3.ggpht.com/ytc/AMLnZu-K8Cu9BcdyoXT2AeAi7TJ744ADUCQyYblAoH9F=s900-c-k-c0x00ffffff-no-rj"
    style="height: 50px;width: 50px;" />
</object>
<object data="https://www.svgrepo.com/show/426942/transport.svg" type="image/svg+xml" >

In the above output, users can see that it shows the logo of DelftStack, which is a fallback image rather than a camera icon.

Use the <embed> Tag to Add SVG File to the Web Page

The <embed> tag allows us to embed other applications to the web page. We will use the src and type attribute with the <embed> tag to embed the SVG file into the web page.

The src attribute takes the URL or path of the SVG file, and type defines the multimedia type.

Here, we have embedded two SVG icons to the web page using the <embed> tag.

<embed src="https://www.svgrepo.com/show/426102/camera.svg" type="image/svg+xml">
<embed src="https://www.svgrepo.com/show/426942/transport.svg" type="image/svg+xml" >

Use the <iframe> Tag to Add SVG File to the Web Page

The <iframe> tag allows developers to embed the inline frame inside the document. It provides a different frame or block to external resources such as audio, video, or multimedia.

Here, we have used the <iframe> tag and added the URL of the SVG file inside the src attribute. Also, we don’t need to specify here which type of multimedia we want to show, like the <embed> and <object> tags.

<iframe src="https://www.svgrepo.com/show/426102/camera.svg" height="50px">

The above output shows that the camera icon is embedded to separate blocks or frames.

Use the CSS background-image Property to Add SVG File as a Background

The background-image CSS property allows us to set the background image for the particular element. Here, we have set the SVG file as a background image.

In the example below, we have created the <h3> tag and added some text. Also, we have added a background SVG image for that using the background-image property of CSS.

Furthermore, we have added the color for the text of <h3> and set the background-repeat: no-repeat; to avoid the repetition of the background image.

<h3>welcome to DelftStack!</h3>

h3{
  background-image: url("https://www.svgrepo.com/show/426102/camera.svg");
  background-repeat: no-repeat;
  color: red;
}

In this article, we have learned the different methods to render the SVG file using HTML and CSS. However, users can also add the SVG file to the webpage directly using the <SVG> tag of HTML.

The <img> and <object> tags allow users to set the fallback image if loading the SVG file fails. Users can use the <embed> or <iframe> tag to embed the SVG image file in a separate block.

However, it is not recommended to use the <iframe> as it affects the SEO of the web page, but users can use the <object> or inline <svg> instead.