如何在 Javascript 中读取 Svg 文件

随着 HTML5 的发布，可缩放矢量图形(SVG) 已成为网络上矢量图形的标准格式。 可以使用任何文本编辑器创建和编辑 SVG 图像，但使用 Inkscape 等绘图软件创建它们通常更方便。 JavaScript 可用于以多种方式在 HTML 文档中包含 SVG 图像： 作为内联元素 作为对象 作为 iframe 作为嵌入 在本文中，我们将研究前两种方法，内联和对象。 内联 在 HTML 文档中包含 SVG 图像的最简单方法是使用 元素。 该元素是 SVG 图形的容器。 该元素有几个控制图像尺寸和位置的属性。 width 和 height 属性定义 SVG 图像的宽度和高度。 viewBox 属性定义了 SVG 图像的坐标系。 preserveAspectRatio 属性定义了在未设置宽度和高度属性时如何缩放图像。 该元素还可以包含定义图像内容的子元素。 Object 在 HTML 文档中包含 SVG 图像的另一种方法是使用 元素。 该元素是一个通用容器元素。 它可以包含任何类型的内容，包括其他元素。 该元素有两个控制图像显示的属性。 data 属性指定 SVG 图像的 URL。 type 属性指定图像的 MIME 类型。 SVG 图像的 MIME 类型是 image/svg+xml。 如果元素具有宽度和高度属性，则 SVG 图像将以该尺寸显示。 如果元素没有宽度和高度属性，则 SVG 图像将以其自然大小显示。 该元素还可以包含定义后备内容的子元素。 如果浏览器不支持 SVG 或无法加载图像，则会显示此内容。 Iframe 在 HTML 文档中包含 SVG 图像的另一种方法是使用 元素。 该元素是一个通用容器元素。 这

“svg”标签表示由 sva 生成的图形的容器。 除了众多可用的方法之外，SVG 还使用图形，例如路径、框、圆、文本和图形。 要了解有关 SVG 的更多信息，您可以参考我们的SVG 教程。

此页面最后更新于 2021 年 11 月 24 日。所有主要的 Web 浏览器，包括 Internet Explorer，都支持使用可缩放矢量图形 (SVG)。 有许多支持 SVG 原生格式的图像编辑软件，包括基于这种格式的 Inkscape。

你能在 Javascript 中使用 Svg 吗？

HTML、CSS 和 JavaScript 都存在于 SVG 中。

HTML 和 SVG 也可以使用文档对象模型 (DOM) 表示。 因此，可以使用 JavaScript 轻松操作它们。 本课将带您了解如何使用内联和外部 SVG 。 可以在本页顶部找到随后的代码示例； 所有这些都可以在 GitHub 上找到。 如果您正在创建外部 SVG，那么对于元素和 SVG 是否使用相同的代码并没有什么区别。 这样做的原因是 SVG 无法看到页面上的其他 SVG，因为它无法访问嵌入其中的 HTML 文档。 用 CDATA 包装 JS 代码后，XML 解析将其视为 XML 的一部分。

在 HTML 中，创建和删除元素的过程是相同的。 要创建元素，请使用相关文档的 createElementNS() 方法，其中包括标签名称和元素的标识符。 可以通过创建一个单独的 XPath 然后将其附加到元素来删除文本元素。 它们可以以这种方式运行，因为文档不在同一个地方。

它可以与 HTML 结合使用来创建图形丰富的网页。 可以在 SVG 的帮助下创建插图或图形。 您可以使用 HTML 中使用的矢量图形格式对元素进行更改而不会降低其质量。 大多数现代浏览器都支持 SVG。

如何在 Html 中查看 Svg？

为了以 HTML 格式查看SVG 文件，您需要使用 或 标签。 这些标签允许您将外部内容嵌入到您的 HTML 文档中。 以下是如何使用这些标签嵌入 SVG 文件的示例： 您也可以使用标签嵌入 SVG 文件，但不推荐这样做，因为它会导致意外结果。

可缩放矢量图形 (SVG) 是一种图形。 基于可扩展标记语言 (XML) 的图形率先将此格式用作图像格式。 CSS 和 HTML 可以多种方式使用 SVG 图像。 我们将在本教程中介绍六种不同的方法。 这是使用 sva 文件的 CSS 背景图像示例。 img 标签用于将图像插入 HTML 文档，其方式与 <img> 标签用于将图像插入 HTML 文档的方式相同。 这次我们使用 CSS 而不是 HTML，我们进行了更多的自定义。

您可以使用 HTML 元素和 HTML。 您可以在所有支持可缩放矢量图形 (SVG) 的浏览器中使用 >object> 选项以及其他类似选项。 在 HTML 和 CSS 中使用图像的另一种方法是通过HTML > embed> 元素，它使用 HTML 语法：<embed src=happy.svg> /。 大多数现代浏览器不支持浏览器插件，这就是为什么使用 <embed> 命令通常不是一个好主意。

使用 svg> /svg> 标签，可以将 SVG 图像直接插入到 HTML 文档中。 您可以通过在 VS 代码或您喜欢的 IDE 中打开 SVG 图像来使用此方法，复制代码并将其粘贴到 HTML 文档的 body 元素中。 如果您的所有要求都已得到满足，您应该拥有一个与此处显示的网页完全相同的网页。 如果您尝试使用 SVG，例如 *img src=”image.svg” 或作为 CSS 背景图像，您的浏览器可能不会显示该文件，因为服务器可能使用不正确的 URL 或描述提供它。 要确定您的 SVG 图像是否正确显示，请打开 Web 浏览器并导航到它。 如果内容在您的 Web 浏览器中正确显示，则很可能是由您的服务器根据内容类型提供的。 当 Web 浏览器未显示适当的图像时，您的服务器可能无法向访问者提供适当的内容类型。 在这种情况下，您可以尝试将文件的内容类型更改为 image/ svg XML或 image/x-svg。

Svg 图像：如何在您的网页上使用它们

只需在 HTML 文档中输入svg 标签/svg> 即可写入图像。 您可以通过在 VS 代码或其他 IDE 中打开 SVG 文件并复制代码并将其粘贴到正文中来执行此操作。如果一切按计划进行，下表中的页面应该与下图中的页面完全一样。 如果您使用像 img src=image.svg> 这样的 SVG 或作为 CSS 背景图像，并且该文件已正确链接并且一切显示正确，但您的浏览器未显示该图像，则您的服务器可能正在提供该图像网址不正确。 主流浏览器现在都支持打开 SVG 文件的功能，无论您使用的是 Mac 还是 Windows。 您可以通过单击文件来查看文件。 执行后，您将能够在浏览器中访问它。

如何查看 Svg？

SVG 或可缩放矢量图形是一种图像文件，可以缩放到任意大小而不会降低质量。 它们可以在任何网络浏览器中查看，并且许多网络浏览器还具有用于编辑它们的内置工具。

矢量可缩放图形 (SVG) 格式通过使用 XML 作为文本格式来描述彩色图像的显示方式。 与 JPEG 或 PNG 图像格式相比，此方法比它们有优势。 您可以缩小 SVG 文件以满足您的需求，而不会降低质量。 现代浏览器应该支持用于图形处理的可缩放矢量图形 (SVG) 格式。 尽管 Microsoft 并未默认提供此功能，但您可以安装提供此功能的免费扩展程序。 您可以通过单击文件资源管理器中的预览窗格或大图标图标来预览和放大您的 SVG 文件。 你唯一必须拥有的就是画图。

您可以使用 NET 安装的扩展通过下载和安装来创建SVG 查看器。 Microsoft Edge 现在可能会提示您警告，如果您使用最新版本的浏览器，该应用可能会损害您的设备。 此路径允许您下载任何类型的 SVG 文件。 与没有 SVG 查看器的其他人共享图像文件时，您必须使用第三方软件来执行此操作。 我们推荐的是 File Converter，这是一款免费、开源的轻量级工具，可以在几分钟内将 SVG 转换为 JPG。 您可以选择是使用 PDF 还是其他图像格式。

2009 年 1 月 1 日，Adobe 停止了对 SVG 查看器的开发和支持。 在业界，SVG 正迅速成为一种标准。 即使 Adob​​e 不支持该格式，将 SVG 文件转换为更广泛使用的文件格式（如 PNG 或 JPG）也是确保文件安全且易于访问的绝佳方式。

为什么你应该使用 Svg 文件

由于 SVG 文件与所有浏览器兼容，因此无需担心兼容性问题。 此外，许多文本编辑器和图形编辑器以及高端编辑器都可以渲染 svo。因此，无论您是为了工作还是娱乐需要查看 SVG 文件，您都可以使用。