How to import a SVG file in JavaScript ?
SVG (Scalable Vector Graphics) files in JavaScript are XML-based vector image files commonly used for describing two-dimensional vector graphics. In this article, we are going to see and use different ways of using SVGs.
Below are the methods to import an SVG file in JavaScript:
Table of Content
- Using HTML img element.
- Using SVG as an object tag
- Embedding an SVG with an iframe tag
Using HTML img element
To include an SVG file in an HTML document using the img
element, you can set the src
attribute of the img
tag to the path of the SVG file.
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: In this example, we are using img tag for using SVG.
HTML
<!DOCTYPE html> < html lang = "en" > < body > < img src = "https://media.w3wiki.net/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 :
Using SVG as an object tag
To include an SVG file in an HTML document using the <object>
tag, you can specify the SVG fileās path in the data
attribute. This method allows for more direct interaction with the SVG content.
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.
Example: In this example, we are using object tag for using SVG.
HTML
<!DOCTYPE html> < html lang = "en" > < body > < object type = "image/svg+xml" data = "https://media.w3wiki.net/wp-content/cdn-uploads/20210205161739/Screenshot-2021-02-05-161721.png" class = "logo" > GFG Logo </ object > </ body > </ html > |
Output:
Embedding an SVG with an iframe tag
To embed an SVG file in an HTML document using the <iframe>
tag, you can set the src
attribute to the path of the SVG file. This method is similar to using the <img>
tag but allows for more flexibility in terms of interaction and styling.
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.
Example: In this example, we are using iframe tag for using SVG.
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.w3wiki.net/wp-content/cdn-uploads/20210205161739/Screenshot-2021-02-05-161721.png" width = "150" height = "150" > </ iframe > </ body > </ html > |
Output:
Contact Us