可缩放矢量图形，有时称为 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)。对网站搜索引擎优化的另一个好处是页面加载速度更快。
更轻松的访问和包容
立即学习“Java免费学习笔记（深入）”；
就可访问性和多样性而言，SVG 文件具有许多优势。设计师 能够在 SVG 文件中包含定义图形视觉元素的结构数据 本身可以帮助特定辅助技术的用户理解其中包含的内容 一个图像。作为一个选项，光栅文件仅使用元数据（即替代文本）来通知屏幕阅读器和 有关图形内容的其他辅助技术。
在本文中，我们将探索和使用许多 SVG 使用场景（可缩放矢量图形）。
第一种方法
最快的方法是使用 HTML 元素。
语法
<img src='logo.svg' alt="some file" height='100' width='100' style="color:orange;"/>
您需要以下内容才能将 SVG 嵌入到
src 属性
当您的 SVG 没有固有的宽高比时，请使用高度属性。
当您的 SVG 本身没有宽高比时，请使用宽度属性。
优点
部署简单快捷。
嵌套 HTML 元素
和 会将 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://img.php.cn/upload/article/000/887/227/169453086951251.png" alt="tutorialspoint-logo" height="90" width="310" style="background-color: transparent" />
</body>
</body>
</html>
第二种方法
在下面的方法中让我们了解如何使用 SVG 作为
语法
<object type="image/svg+xml" data="logo.svg" class="logo"> Logo </object>
为了使用“object”元素嵌入 SVG，需要以下内容 -
- 类型属性
- 数据属性
- class 属性（当使用内部/外部 CSS 时）
优点
- SVG 可以使用外部/内部 CSS 进行样式设置。
- 编码简单快捷。
- 在缓存方面应该表现出色。
缺点
- 如果要使用外部样式表，则应在 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="https://www.php.cn/link/dfb8e1450abdf50cc0f260e0e7a62296" /> </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 src="logo.svg" width="500" height="500"> </iframe>
嵌入 SVG 需要
src 属性。
当您的 SVG 没有固有的宽高比时，请使用高度属性。
当您的 SVG 本身没有宽高比时，请使用宽度属性。
优点
实施快速而简单。
它与
缺点
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>
