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:

Example

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

Live Demo

<!DOCTYPE html> <html>    <head>       <style>          #svgelem {             position: relative;             left: 50%;             -webkit-transform: translateX(-20%);             -ms-transform: translateX(-20%);             transform: translateX(-20%);          }       </style>       <title>HTML5 SVG Image</title>    </head>    <body>       <h2 align="center">HTML5 SVG Image</h2>       <img src="https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg" alt="smile" height="100px" width="100px" />    </body> </html>
Updated on: 2020-05-18T08:29:55+05:30

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements