数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 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;"/>
您需要以下内容才能将 SVG 嵌入到 <image> 元素中：
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://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 时）
优点
- 可以使用外部/内部 CSS 设置 SVG 的样式。
- 编码简单快捷。
- 应该在缓存方面表现出色。
缺点
- 如果要使用外部样式表，则应在 SVG 文件中使用 <style> 元素。
- 对执行和语法的熟悉程度不足。
示例 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>
5K+ 次查看
