How to import a SVG file in JavaScript ?

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:

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:

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 :

Output :