How to use .svg files in a webpage?


The svg files are Scalable Vector Graphics. You can add it to a web page using the <img>, <iframe>, <object> or <embed> tag.

The .svg file is to be referenced in the src attribute of the <img> tag. Let’s see how to add it using the <img> tag.

You can try to run the following code to learn how to use .svg files in a web page. We have a smiley.svg file −

<!DOCTYPE html>
<html>
   <head>
      <title>HTML SVG</title>
   </head>

   <body>
      <h1>Design</h1>
      <img src=
         "https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg"
         id="demo" alt="smiley">
   </body>
</html>

Swarali Sree
Swarali Sree

I love thought experiments.

Updated on: 26-Jun-2020

524 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements