SVG 图像：在网页上使用图标的最佳方式

已发表: 2022-12-06

SVG 图像很有吸引力，因为它们可以缩放到任意大小，同时保持相同的质量。 HTML 元素是在网页上包含图像的最常见方式。要将 SVG 图像用作页面上的图标，最简单的解决方案是使用 HTML 元素。图标字体是 HTML 中图标的流行解决方案，但它们有几个缺点。它们不是真正的字体，因此不能像真正的字体那样使用 CSS 设置样式。它们也不像 SVG 图像那样与分辨率无关，因此它们不能在不损失质量的情况下缩放到不同的尺寸。 HTML 元素可用于嵌入 SVG 图像，就像嵌入任何其他图像一样。您可以使用 CSS 来设置图像的样式，并且由于 SVG 图像与分辨率无关，因此可以将它们缩放到任意大小而不会降低质量。

图标和媒体文件共同构成了网站的外观。当您的网站上有插图时，您会使其对访问者更具吸引力。时不时地，网页上的视觉效果似乎缺乏质量。在本课中，我们将向您展示如何使用 SVG 文件的 HTML 代码来提高图标的质量。编码或使用 Illustrator 等软件也可以帮助您创建自己的 SVG。通过搜索图标并更改其大小，将图标的 HTML 代码复制到 CMS（不要为其着色以使其自定义）。也可以获得像 WorldVectorLogo 这样的SVG 标志库。

添加嵌入元素时，会出现一个对话框，允许您复制和粘贴代码。之前显示的图标代码位于此处，可以从其他网站粘贴。您可以通过选择代码的宽度和高度来更改图标的大小。

以下是选择合适图标的一些提示。如果您不需要大量的样式更改，图标字体对您来说可能非常有效。对于自定义和动画，应该使用 s vo vo。如果您需要完全控制各种图标的颜色、平滑过渡和动画，则尤其如此。

真正的透明度可以通过使用 PNG 和 sva 文件来实现，因此两者都是徽标和图形设计的绝佳选择。值得注意的是，PNG 文件是光栅文件的最佳选择之一。如果您使用像素和透明度，PNG 是一个很好的选择。

同样，您可以将 PNG 或其他光栅格式图像转换为 sva。 HTML5 和 CSS3 脚本语言支持多种文件类型，并支持动画和透明度。由于它没有像 PNG 这样的标准格式那样广泛使用，因此旧的浏览器和设备不支持它。

矢量文件有足够的信息来显示任何比例的矢量，而位图文件需要更大的文件来显示图像的放大版本，这会占用更多空间。由于较小的文件在浏览器中加载速度更快，因此它们可以提高网站的页面性能。

Svg 可以用作图标吗？

可缩放矢量图形或 SVG 通常被认为是用作网站图标的不错选择，因为它们是矢量图形。可以在不降低质量的情况下将矢量图形缩小到任意大小。由于文件较小和压缩，您的网站快速加载不会有问题。

它是一种矢量图像格式，与可扩展标记语言 (XML) 兼容，可以使用可缩放矢量图形 (SVG) 进行绘制。 XML 代码块的 URL 直接提供给浏览器并在浏览器中呈现，而不是固定大小的像素图像。通过使用这些小图像，可以比使用文字更快地显示动作和信息。当第一台 Tamagotchis、iMac 和 Palm Pilots 来到我们家时，SVG 图像文件格式几乎同时被介绍给世界。大多数网络浏览器不支持 SVG，而且他们也没有意识到这一点。 Web 浏览器在 2017 年开始支持 SVG，但直到那时它才变得可行。因为它们是矢量文件，所以如果您使用 SVG 或图标网络字体，缩放不会有任何问题。

在设计图标时，预制图标的局限性更大，因为没有太多选择。如果您正在寻找更多功能，您应该使用 sva 文件。可以使用以下两种方法之一创建简单的 SVG 图标：手动或使用工具。您可以借助矢量图像程序在虚拟绘图板上创建图标。导出 .svg 文件后，您就完成了。除了 Evernote 列表，您还可以下载免费的 SVG 图标。形状的尺寸由其宽度和高度决定，但其位置由其 x 和 y 决定。类名也可以在单独的 CSS 文件中为 <svg> 和 <rect> 元素设置。在 Ycode 的无代码生成器中更改这些图标的背景颜色会直接更改图标的颜色。

矢量图像格式 (SVG) 是设计人员和开发人员等的强大工具。它也可以在没有归属地的情况下用于商业项目，它是一个多功能的文件系统，可以用于个人和商业项目。 sva 文件中的图像可以用作 CSS 中的背景图像，类似于 PNG、JPG 和 GIF 图像。因此，CSS 是一个优秀的工具，可以利用 SVG 带来的同样令人敬畏的东西，例如灵活性和清晰度。 SVG 还可以执行与光栅图形相同的功能，例如重复。使用 SVG，任何寻找多功能且清晰图像格式的设计师或开发人员一定会找到它。

我可以使用 Svg 文件作为 Favicon 吗？

在 Firefox 和 Chrome 中，支持通过 SVG 文件查询内嵌媒体的能力。 SVG 是一种脚本语言，可以在不损失质量的情况下进行缩放，它通常非常小，并且它还可以包含嵌入式 CSS，即使存在嵌入式媒体查询也是如此。

为什么 Svg 文件不推荐用于徽标？

因为 SVG 基于矢量技术，所以它不太适合像照片那样具有复杂细节和纹理的图像。对于使用更简单颜色和形状的徽标、图标和其他平面图形，使用 SVG 是一个不错的选择。此外，虽然大多数现代浏览器都支持 SVG，但旧版本可能不支持。

如何从 Svg 创建图标？

有几种方法可以从 SVG 文件创建图标。一种方法是使用矢量编辑程序（如 Adobe Illustrator）打开文件，然后将其导出为图标文件。另一种方法是使用转换器工具将 SVG 文件转换为图标文件。

Icomoon 和 Fontello 等在线工具简化了创建网络字体的过程。可缩放矢量图形是一项新功能，它允许我们以比以前更广泛的方式在网页上创建图标。您可以使用一些简单的回退来帮助 Explorer 8。这是 SVG 的内置属性，它是片段标识符的名称。通过使用 sva 视图规范或寻址数组，可以引用片段。 SVG 格式的元素标识符的 URL。只有当一个值被检测为棋子精灵的一部分时，黑马才可见（来自维基百科共享资源）并且与下面的方案相同。

只要图像被正确标记，此技术就可以与 Firefox、Chrome、Safari（桌面）和 Opera 一起使用。如前所述，您还可以使用外部 SVG 文件生成 CSS 精灵。这是一项技术先进且随时可用的技术。该软件已经在所有主流浏览器（包括 IE8）中进行了测试，并且运行良好。主要元素由标签排列。使用 Icomoon 或 Grunt 插件（Google 的 Grunt SVG 合并插件），您可以手动创建符号标签集合。除 Internet Explorer 9 外，所有主流浏览器都支持此方法。甚至 Jonathan Neal 的“SVG4everybody”脚本也可以解决这个问题。

如何使我的 Svg 图标可访问？

您可以做一些事情来使您的 svg 图标易于访问。一种是给svg 元素添加一个 title 属性。这将为屏幕阅读器提供图标的描述。另一种是向 svg 元素添加一个 role=”img” 属性。这将使屏幕阅读器知道该元素是一个图像。最后，您可以向 svg 元素添加一个 focusable=”false” 属性。这将防止图标在使用键盘导航页面时获得焦点。

矢量图形从 1999 年就出现了，但它们的受欢迎程度正在增加。要决定哪些图片是装饰性的，哪些是信息性的，您必须首先确定哪些是装饰性的。如果一个图像被认为是装饰性的，它必须有一个空的或 null 的替代文本属性。真正的替代方案应该是有意义的和描述性的，不应包含超过 250 个字符，并且不应难以理解。如果您的图像是基本的、简单的或装饰性的，您应该包括文件名。如果您需要包含更复杂或必要的 SVG ，您可能还想使用标记。由于此更改，您在样式和动画方面也将有更多选择。

当谈到用于传递基本替代内容的不同模式时，没有明确的偏好。因为大多数模式都能够呈现替代内容，设计人员和开发人员将有更多选择。模式 11 是不同浏览器和屏幕阅读器为 SVG 提供更具描述性的替代内容的最可靠选择。

如何使我的 Svg 图标可访问？

您需要在代码中包含 *title* 以使其更易于访问。始终最好将 *title * 放在 *svg% 之前 svg> 元素现在将具有 aria-described by。在关于 Aria-described by 的页面上，您可以找到 aria-attribute 信息。

为 Cricut 设计空间导出 Svg 文件

您必须以以下格式导出 svg 文件：*br 如果您打算在 Cricut 设计空间中使用它。
没有链接相同类型的图像。

Svg 文件是否可访问？

您可以缩放 SVG 图像，这意味着它们可以由读者放大和缩放……1.2可访问的 SVG ？小 PNG 图像：小 SVG 图像：放大 PNG 图像：放大

Jpeg 对比Png：哪个更好？

在 jpeg 和 png 之间进行选择时，没有正确或错误的答案，因为它们各有优缺点。归根结底，只有一种偏好。

Svgs 需要隐藏 Aria 吗？

虽然一些屏幕阅读器可能会忽略没有角色或可访问名称的 SVG，但其他屏幕阅读器可能仍会找到它并将其宣布为一个没有可访问名称的“组”。如果 SVG 旨在装饰，避免这些情况的最佳方法是尽可能始终使用 aria-hidden=”true”。

Svg 文件：非常适合图形，但要注意嵌入式 Js 代码

使用 SVG 文件时，网页可以显示图形。它们不使用像素，而是使用形状、数字和坐标，赋予它们与矢量文件相同的优势，并允许它们在不牺牲质量的情况下无限扩展。如果您使用 SVG 文件，它们可能包含嵌入式 JavaScript (JS) 代码。如果代码感染了病毒，它可能容易受到攻击。例如，受感染的 SVG 文件可以将用户重定向到明显具有欺诈性的恶意网站。这些网站因引导用户安装伪装成浏览器插件或更糟糕的病毒检测程序的间谍软件而臭名昭著。