如何在 JavaScript 中导入 SVG 文件？-js教程-PHP中文网

如何在 JavaScript 中导入 SVG 文件？

WBOY

发布： 2023-09-12 23:01:01

转载

1668人浏览过

可缩放矢量图形，有时称为 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 如何在 JavaScript 中导入 SVG 文件？元素。

语法

@@##@@

登录后复制

您需要以下内容才能将 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>
      @@##@@
   </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;
}

登录后复制

输出

上面的代码将给出以下输出 -

如何在 JavaScript 中导入 SVG 文件？

第三种方法

在下面的方法中，让我们了解如何使用嵌入 SVG。

语法

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

登录后复制

以上就是如何在 JavaScript 中导入 SVG 文件？的详细内容，更多请关注php中文网其它相关文章！