如何在 JavaScript 中导入 SVG 文件?

WBOY
发布: 2023-09-12 23:01:01
转载
1360 人浏览过

可缩放矢量图形,有时称为 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)。对网站搜索引擎优化的另一个好处是页面加载速度更快。

更轻松的访问和包容

就可访问性和多样性而言,SVG 文件具有许多优势。设计师 能够在 SVG 文件中包含定义图形视觉元素的结构数据 本身可以帮助特定辅助技术的用户理解其中包含的内容 一个图像。作为一个选项,光栅文件仅使用元数据(即替代文本)来通知屏幕阅读器和 有关图形内容的其他辅助技术。

在本文中,我们将探索和使用许多 SVG 使用场景(可缩放矢量图形)。

第一种方法

最快的方法是使用 HTML如何在 JavaScript 中导入 SVG 文件?元素。

语法

some file
登录后复制

您需要以下内容才能将 SVG 嵌入到元素中 -

  • src 属性

  • 当您的 SVG 没有固有的宽高比时,请使用高度属性。

  • 当您的 SVG 本身没有宽高比时,请使用宽度属性。

优点

缺点

  • SVG 文件不易被操纵。

  • 只需使用内联 CSS 即可设置 SVG 样式。

  • CSS 伪类不能用于设置 SVG 样式。

示例1

HTML源代码

第二种方法

在下面的方法中让我们了解如何使用 SVG 作为

语法

登录后复制

为了使用“object”元素嵌入 SVG,需要以下内容 -

  • 类型属性
  • 数据属性
  • class 属性(当使用内部/外部 CSS 时)

优点

  • SVG 可以使用外部/内部 CSS 进行样式设置。
  • 编码简单快捷。
  • 在缓存方面应该表现出色。

缺点

  • 如果要使用外部样式表,则应在 SVG 文件中使用