如何在JavaScript中导入SVG文件

在本文中，我们将看到和使用使用SVG（可缩放矢量图形）的不同方法。

方法 1： 使用HTML<img>元素的最快方式。

语法：

<img src='logo.svg' alt="some file"  height='100' width='100' style="color:green;"/>

通过<img>元素嵌入SVG，你需要：

src 属性
height 属性（如果你的SVG没有固有的长宽比）
width 属性（如果你的SVG没有固有的长宽比）
优点：
简单快捷的实现。
通过嵌套<img>和<a> HTML元素，将SVG图像变成超链接。
缓存SVG文件，从而减少加载时间。

缺点：
无法对SVG文件进行操作。
只能使用内联CSS来设置SVG样式。
无法使用CSS伪类来设置SVG样式。

示例：

<!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>

输出：

如何在JavaScript中导入SVG文件

使用HTML<img>元素的SVG文件

方法 2： 使用SVG作为<object>

语法：

<object type="image/svg+xml" data="logo.svg" class="logo">
  Logo
</object>

通过<object>元素嵌入SVG需要：

type 属性
data 属性
class 属性（如果使用外部/内部CSS）
优点：
可以使用外部/内部CSS来设置SVG样式。
实现简单快捷。
与缓存非常搭配。

缺点：
使用外部样式表时，需在SVG文件内部使用<style>元素。
对语法和实现不太熟悉。

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代码： 以下是上述代码中使用的“styles.css”文件的内容。

.logo {
  height: 100;
  width: 100;
}

输出：

如何在JavaScript中导入SVG文件

使用HTML<object>元素的SVG文件

方法： 使用<iframe>嵌入SVG

语法：

<iframe src="logo.svg" width="500" height="500">

</iframe>

通过<iframe>元素嵌入SVG需要

src 属性
height属性（如果SVG没有固有的长宽比）
width属性（如果SVG没有固有的长宽比）

Pros（优点）：

快速且易于实现。
与<object>元素相同。

Cons（缺点）：

无法使用JavaScript操纵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.geeksforgeeks.org/wp-content/cdn-uploads/20210205161739/Screenshot-2021-02-05-161721.png"
      width="150"
      height="150">
    </iframe>
  </body>
</html>

Output（输出）：

如何在JavaScript中导入SVG文件