How to use SVG images in HTML5?

To use SVG images in HTML5, use <img> element or <svg>. To add SVG files, you can use <img> <object>, or <embed> element in HTML. Choose any one of them according to your requirement.

Here’s how you can add SVG images. If the SVG is saved as a file, it can be directly used as an SVG image:


You can try to run the following code to use SVG Images

Live Demo

<!DOCTYPE html>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
      <title>HTML5 SVG Image</title>
      <h2 align="center">HTML5 SVG Image</h2>
      <img src="" alt="smile" height="100px" width="100px" />

Updated on: 18-May-2020

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started