Should I use <img>, <object>, or <embed> for SVG files ?

Last Updated : 07 May, 2023

In this article, we will see how to use the <img>, <object>, or <embed> tags with SVG files, along with understanding the basic syntax for implementing it.

Prerequisites: Introduction to HTML

All three tags <img>,<object>, and <embed> are basically used to display SVG(Scaler Vector Graphics) files on a webpage, and are used to embed external or internal resources. but when using them in practice each tag has its own advantages and disadvantages so using which tag for displaying SVG files on totally depends on your specific needs.

<img> tag: The SVG image is loaded as an external file and processed in the same way as any other image file, with all of the features and behavior of a normal tag. Although CSS styles and effects may be applied to the SVG picture, JavaScript cannot access the SVG’s underlying structure.

Syntax:

<img src="example.svg" alt="Example SVG Image">

Example 1: This example uses the <img> tag to implement the SVG file.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG Image logo GeekforGeeks</title> 
</head> 
  
<body> 
    <h1>SVG Image using img tag</h1> 
    <img src="example.svg" alt="Example SVG Image"> 
</body> 
  
</html>

Output:

SVG image using img tag

<object> tag: Within the HTML file, the SVG picture is loaded as a separate document. This allows you to use JavaScript to access and alter the SVG’s internal structure. For browsers that do not support SVG, you may also put fallback content within the element also if you need to manipulate the SVG dynamically or if you want to ensure that all users can see some kind of content, even if they can’t view the SVG image.

Syntax:

<object type="image/svg+xml" data="example.svg">

Example 2: This example describes the implementation of the SVG file with <object> tag.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG Image logo GeekforGeeks</title> 
</head> 
  
<body> 
    <h1>SVG Image using object tag</h1> 
    <object type="image/svg+xml" 
            data="example.svg"> 
      </object> 
</body> 
  
</html>

Output:

SVG image using object tag

<embed> tag: The SVG image is integrated directly into the HTML file and treated as a separate object. JavaScript can access the internal structure of SVG, but it cannot incorporate it also this is a good option if you want the SVG to be treated as a separate object in its own right, and if you need to access its internal structure using JavaScript.

Syntax:

<embed src="example.svg" type="image/svg+xml" />

Example 3: This example describes the implementation of the SVG file with <embed> tag.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG Image logo GeekforGeeks</title> 
</head> 
  
<body> 
    <h1>SVG Image using embed tag</h1> 
    <embed src="example.svg" 
           type="image/svg+xml" /> 
</body> 
  
</html>

Output:

SVG image using embed tag

When observing carefully, we can see that all the tags perform the same operation while <object> tags take data attributes while <embed> and <img> tags take src attributes.

Note: There isn’t a “best” tag to use for SVG images – it totally depends on your specific needs and the context in which the image will be used.

Suggest improvement

Difference between <object> and <embed> Tags

Share your thoughts in the comments