如何在 JavaScript 中导入 SVG 文件？

很酷的站长

于 2022-12-10 16:00:08 发布

阅读量2.5k

点赞数 1

分类专栏：编程笔记文章标签： javascript 前端 java

原文链接：https://s.10zhan.com/art/80.html

版权

编程笔记专栏收录该内容

554 篇文章 18 订阅

订阅专栏

可缩放矢量图形，有时称为 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>

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>

很酷的站长

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
如何在 JavaScript 中导入 SVG 文件？

可缩放矢量图形，有时称为 SVG，是一种 2D 图形或图像文件。为了创建视觉效果，SVG文件采用数学公式和一组关于形状，线条的准则，和其他功能。SVG 只是指定颜色应如何呈现的 XML 代码，其中每个表单都应相对于文件中的其他形状显示，以及形状应如何显示显示。SVG 和其他一些矢量图形与依赖于像素来传达视觉数据，如 JPEG 或 PNG 文件。SVG 文件可以无限缩放。SVG 文件比光栅图像具有显着优势，因为您可以根据需要放大它们并多次调整它们的大小，而不会失去清晰度。
复制链接

扫一扫