如何在 JavaScript 中导入 SVG 文件？
可缩放矢量图形，有时称为 SVG，是一种 2D 图形或图像文件。为了 创建视觉效果，SVG文件采用数学公式和一组关于形状，线条的准则， 和其他功能。SVG 只是指定颜色应如何呈现的 XML 代码，其中 每个表单都应相对于文件中的其他形状显示，以及形状应如何显示 显示。
SVG 和其他一些矢量图形与依赖于 像素来传达视觉数据，如 JPEG 或 PNG 文件。
在网页设计中使用SVG文件的四个优点如下 -
清晰
SVG 文件可以无限缩放。SVG 文件比光栅图像具有显着优势，因为 您可以根据需要放大它们并多次调整它们的大小，而不会失去清晰度。光栅图像 如果缩放不正确，可能会失去清晰度，甚至可能开始看起来很粗糙。
灵活性
创建在任何设备上看起来都不错的响应式 SVG 文件相当容易，即使 查看器放大网页。SVG 文件可以在整个编辑阶段重复调整大小 而不会失去清晰度。SVG 文件是徽标和简单信息图表的绝佳选择 因为它们的适应性。SVG文件也可用于动画，特别是 有利于开发具有不同配色方案和渐变的字体。
文件大小较小的文件
根据视觉对象的复杂性或设计中的路径数量，SVG 文件大小 可能比完全相同图像的 PNG 或 JPG 少得多。SVG 文件可以是 据 Vecta.io 称，比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 −
-
src 属性
-
当 SVG 没有固有纵横比时，请使用高度属性。
-
如果 SVG 本身没有纵横比，请使用 width 属性。
优势
-
部署简单快捷。
-
嵌套 HTML 元素 <img> 和 <a>会将 SVG 图像一起转换为超链接。
-
SVG 文件缓存，从而加快加载速度。
弊
-
SVG 文件不易纵。
-
只有内联CSS可以用来设置SVG的样式。
-
CSS 伪类不能用于设置 SVG 的样式。
例1
网页源代码
<!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>
Second Method
In the following method let us understand using SVG as an <object>
语法
<object type="image/svg+xml" data="logo.svg" class="logo"> Logo </object>
The following is needed in order to embed an SVG using a "object" element −
- The type attribute
- The data attribute
- The class attribute (when internal/external CSS is being used)
优势
- SVG can be styled with external/internal CSS.
- Coding is simple and quick.
- Should perform excellently with caching.
弊
- You should use <style> element in the SVG file if you want to use an external stylesheet.
- Lack of familiarity with execution and syntax.
例 2
网页源代码
<!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 Source code
logo { height: 90; width: 310; }
输出
上面的代码将给出以下输出 -
第三种方法
在下面的方法中，让我们了解使用 <iframe> 嵌入 SVG。
语法
<iframe src="logo.svg" width="500" height="500"> </iframe>
<iframe> 元素是嵌入 SVG 所必需的。
-
src 属性。
-
当 SVG 没有固有纵横比时，请使用高度属性。
-
当 SVG 本身没有纵横比时，请使用 width 属性。
优势
-
实现快速简单。
-
它与<对象>元素相同。
弊
-
JavaScript 不能用于修改 SVG。
-
缓存并不理想。
例 3
网页源代码
<!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>
