Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to import a SVG file in JavaScript ?

  • Last Updated : 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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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=
      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=
          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=
      width="150"
      height="150">
    </iframe>
  </body>
</html>

Output :




My Personal Notes arrow_drop_up
Recommended Articles
Page :