如何在 JavaScript 中导入 SVG 文件?
可缩放矢量图形，有时称为 SVG，是一种 2D 图形或图像文件。为了创建视觉效果，SVG 文件采用数学公式和一组关于形状、线条和其他特征的指导方针。SVG 只是 XML 代码，它指定了颜色的呈现方式、每种形式相对于文件内其他形状的显示位置以及如何显示形状。
SVG 和一些其他矢量图形与依赖像素来传达视觉数据的光栅图形(如 jpeg 或 png 文件)有显著不同。
在网页设计中使用 SVG 文件的四个优点如下 -
清晰度
SVG 文件可以无限缩放。 SVG 文件与光栅图像相比具有显著优势，因为您可以随意放大和调整它们的大小，而不会失去清晰度。如果缩放不正确，光栅图像可能会失去清晰度，甚至会开始显得粗糙。
灵活性
创建响应式 SVG 文件相当容易，这些文件在任何设备上看起来都很好，即使查看者放大网页也是如此。SVG 文件可以在编辑阶段反复调整大小而不会失去清晰度。由于其适应性，SVG 文件是徽标和简单信息图表的绝佳选择。SVG 文件也可用于动画，它们对于开发具有不同配色方案和渐变的字体特别有用。
文件大小较小
根据视觉的复杂性或设计中的路径数量，SVG 文件大小可能比完全相同图像的 PNG 或 JPG 小得多。根据 Vecta.io 的说法，SVG 文件比 PNG 小 60% 到 80%，这也可以减少加载时间并改善用户体验 (UX)。更快的页面加载速度对网站 SEO 也大有裨益。
更易于访问和包容
在可访问性和多样性方面，SVG 文件具有许多优势。设计师能够在 SVG 文件本身中包含定义图形视觉元素的结构数据，这可以帮助特定辅助技术的用户了解图像中包含的内容。作为一种选择，光栅文件仅使用元数据(即替代文本)来告知屏幕阅读器和其他辅助技术有关图形的内容。
在本文中，我们将探索和使用许多 SVG 使用场景(可缩放矢量图形)。
第一种方法
最快的方法是使用 HTML <img>元素。
语法
<img src='logo.svg' alt="some file" height='100' width='100' style="color:orange;"/>
您需要以下内容才能在 <image> 中嵌入 SVG元素 −
src 属性
当您的 SVG 没有固有纵横比时，请使用 height 属性。
当您的 SVG 没有固有纵横比时，请使用 width 属性。
优点
部署简单快捷。
嵌套 HTML 元素 <img> 和 <a>会将 SVG 图像一起转换为超链接。
SVG 文件缓存，从而加快加载速度。
缺点
SVG 文件不易被操纵。
只需内联 CSS 即可用于设置 SVG 样式。
CSS 伪类不能用于设置 SVG 样式。
示例 1
HTML 源代码
<!DOCTYPE html>
<html>
<title>How to import a SVG file in JavaScript article - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<body>
<img src="https://www.tutorialspoint.com/images/logo.png" alt="tutorialspoint-logo" height="90" width="310" style="background-color: transparent" />
</body>
</body>
</html>
第二种方法
在以下方法中，让我们了解如何将 SVG 用作 <object>
语法
<object type="image/svg+xml" data="logo.svg" class="logo"> Logo </object>
使用"object"元素嵌入 SVG 需要以下内容 -
- type 属性
- data 属性
- class 属性(使用内部/外部 CSS 时)
优点
- SVG 可以使用外部/内部 CSS 进行样式设置。
- 编码简单快捷。
- 缓存性能出色。
缺点
- 您应该使用 <style>如果您想使用外部样式表，请在 SVG 文件中添加元素。
- 对执行和语法不熟悉。
示例 2
HTML 源代码
<!DOCTYPE html> <html> <title>How to import a SVG file in JavaScript article - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="css" href="styles.css" /> </head> <body style="text-align:center"> <object type="image/svg+xml" data="/logo.svg" class="logo"> Tutorialspoint Logo </object> </body> </html>
CSS 源代码
logo {
height: 90;
width: 310;
}
输出
上述代码将给出以下输出 -
第三种方法
在以下方法中，让我们了解如何使用 <iframe> 嵌入 SVG。
语法
<iframe src="logo.svg" width="500" height="500"> </iframe>
<iframe>元素是嵌入 SVG 所必需的。
src 属性。
当您的 SVG 没有固有纵横比时，请使用 height 属性。
当您的 SVG 没有原生纵横比时，请使用 width 属性。
优点
实现快速而简单。
它与 <object> 相同元素。
缺点
无法使用 JavaScript 修改 SVG。
缓存并不理想。
示例 3
HTML 源代码
<!DOCTYPE html> <html> <title>How to import a SVG file in JavaScript article - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body style="text-align:center"> <iframe src="/logo.svg" width="200" height="120"></iframe> </body> </html>
