How to import a SVG file in JavaScript ? - GeeksforGeeks

05 Feb, 2021

In this article, we are going to see and use different ways of using SVGs ( Scalable Vector Graphics).
Method 1: The quickest way using HTML <img> element.
Syntax: 
 <img src='logo.svg' alt="some file"  height='100'
width='100' style="color:green;"/>
Embedding an SVG through the <img> element, you need:
src attribute
height attribute (if your SVG has no inherent aspect ratio)
width attribute  (if your SVG has no inherent aspect ratio)
Pros:
Easy and quick implementation.
Make the SVG image into a hyperlink by nesting <img> & <a> HTML element
Caching of SVG file, hence reduced loading time.
Cons:
Manipulation of SVG file cannot be done.
You can only use inline CSS to style your SVG.
Cannot use CSS pseudo-classes to style the SVG.
Example:
HTML
 

 
 










<!DOCTYPE html> 
<html lang="en"> 
  <body> 
    <img
      src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210205161739/Screenshot-2021-02-05-161721.png"
      alt="gfg-logo"
      height="100"
      width="100"
      style="background-color: green"
    /> 
  </body> 
</html>






Output :
SVG file using HTML <img> element
Method 2: Using SVG as an <object>
Syntax: 
<object type="image/svg+xml" data="logo.svg" class="logo">
  Logo
</object>
Embedding a SVG via a <object> element requires:
type attribute
data attribute
class attribute ( if using external/internal CSS )
Pros :
You can use external/internal CSS to style SVG.
Easy and quick implementation.
Will work great with caching.
Cons :
To use an external stylesheet, you need to use an <style> element inside the SVG file.
Not so familiar with syntax and implementation.
HTML code:
HTML
 

 
 










<!DOCTYPE html> 
<html lang="en"> 
<body> 
  <object type="image/svg+xml" 
          data= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210205161739/Screenshot-2021-02-05-161721.png" 
          class="logo"> 
    GFG Logo 
  </object> 
   
</body> 
   
</html>






CSS code:The following is the content for the “styles.css” file used in the above code.
.logo {
  height: 100;
  width: 100;
}
Output :
SVG file using HTML <object> element
Method : Embedding an SVG with an <iframe>
Syntax : 
<iframe src="logo.svg" width="500" height="500">

</iframe>
Embedding a SVG via <iframe> element requires
src attribute
height attribute (if your SVG has no inherent aspect ratio)
width attribute  (if your SVG has no inherent aspect ratio)
Pros :
Quick and easy implementation.
Same as <object> element.
Cons :
You can’t use JavaScript to manipulate the SVG.
Caching is not great.
HTML code :
HTML
 

 
 










<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width,  
                                   initial-scale=1.0" /> 
    <link rel="stylesheet" href="styles.css" /> 
  </head> 
  
  <body> 
    <iframe
      src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210205161739/Screenshot-2021-02-05-161721.png"
      width="150"
      height="150"> 
    </iframe> 
  </body> 
</html> 






Output :

JavaScript-Questions


Picked


Technical Scripter 2020


JavaScript


Technical Scripter


Web Technologies

Writing code in comment? 
                                    Please use ide.geeksforgeeks.org, 
                                    generate link and share the link here.
                                
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
How to get selected value in dropdown list using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?