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文件

方法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文件

方法： 使用<iframe>嵌入SVG

语法：

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

</iframe>

通过使用<iframe>元素嵌入SVG需要以下属性:

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

优点:

实现快捷简单。
与<object>元素相同。

缺点:

无法使用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>

输出：

JavaScript 如何导入SVG文件