1047842600

zyj@ejayer.cn

15867348620

什么是SVG?

发布日期:2022-01-05   编辑:奕捷网络

尽管SVG是在1990 年代后期构思的,但在许多方面,SVG是成长为天鹅的“丑小鸭”文件格式。在 2000 年代的大部分时间里,支持不佳并且在很大程度上被忽略,但自 2017 年以来情况发生了变化。所有现代网络浏览器现在都可以毫无问题地呈现 SVG,并且大多数矢量绘图应用程序都提供了导出它的选项。SVG 已成为 Web 上广泛使用的图像格式。


这不是偶然发生的。尽管 JPG 和 PNG 等传统光栅图形文件格式非常适合照片或非常复杂的图像,但事实证明,SVG 是满足当今 Web 开发对可扩展性、响应性、交互性、可编程性、性能和可访问性等要求的一种格式。


这是 SVG 格式的图像。这个插图只有 60KB,几乎可以在任何在线上下文中使用——作为一个向量,我们可以确定它会缩放以满足任何视口或元素宽度的需求。


当然,SVG 可以比 60KB 小得多。这个更大的插图帮助我们说明 SVG 的灵活性,但它是图标和界面元素的完美格式,其中一些甚至可能没有一个完整的千字节。


什么是SVG?

SVG 是一种基于可扩展标记语言 (XML)的矢量图形格式,适用于 Web 和其他环境。XML 使用类似于 HTML 的标签,尽管它更严格。例如,您不能省略结束标记,因为这会使文件无效并且不会呈现 SVG。


为了让您体验一下 SVG 代码的样子,以下是您绘制一个带黑色边框的白色圆圈的方法:<circle cx="100" cy="100" r="50" stroke-width="4" stroke="#000" fill="#fff" />

如您所见,在幕后,SVG 文档只不过是描述线条、曲线、形状、颜色和文本的简单纯文本文件。由于它是人类可读的、易于理解和修改的,当作为内联 SVG嵌入到 HTML 文档中时,可以通过 CSS 或 JavaScript 操作 SVG 代码。这为 SVG 提供了传统 PNG、GIF 或 JPG 图形格式无法比拟的灵活性和多功能性。


SVG 是W3C 标准,这意味着它可以轻松地与其他开放标准语言和技术(包括 JavaScript、DOM、CSS 和 HTML)进行互操作。只要 W3C 制定了全球行业标准,SVG 就有可能继续成为浏览器中矢量图形的事实上的标准。


HTML5 的 Canvas 怎么样?这两种技术非常不同,但是这个问题经常出现是可以理解的。我们已经分解了SVG 与 Canvas中每种方法的目的、优点和缺点,以便您每次都能做出正确的选择。


为什么要使用 SVG?

SVG 的厉害之处在于它可以解决现代 Web 开发中许多最棘手的问题。让我们轻松浏览其中的一些。


可扩展性和响应能力

在幕后,SVG 使用形状、数字和坐标而不是像素网格在浏览器中呈现图形,这使其与分辨率无关且可无限扩展。如果您考虑一下,无论您使用钢笔还是天空书写飞机,创建圆的说明都是相同的。只是规模发生了变化。


使用 SVG,您可以组合不同的形状、路径和文本元素来创建各种视觉效果,并且您将确保它们在任何尺寸下看起来都清晰明快。


相比之下,基于光栅的格式(如 GIF、JPG 和 PNG)具有固定尺寸,这会导致它们在缩放时像素化。尽管各种响应式图像技术已被证明对像素图形很有价值,但它们永远无法与 SVG 的无限缩放能力真正竞争。



可编程性和交互性

SVG 是完全可编辑和脚本化的。可以通过 CSS 和/或 JavaScript 将各种动画和交互添加到内联 SVG 图形中。


无障碍

SVG 文件是基于文本的,因此当嵌入到网页中时,可以对其进行搜索和索引。这使屏幕阅读器、搜索引擎和其他设备可以访问它们。


表现

影响 Web 性能的最重要方面之一是网页上使用的文件的大小。与位图文件格式相比,SVG 图形的尺寸通常更小。


常见的 SVG 用例和浏览器支持

SVG 有大量的实际用例。让我们探索其中最重要的部分。


简单的插图和图表

任何适合使用钢笔和铅笔制作的传统绘图都应该完美地转换为 SVG 格式。


标志和图标

徽标和图标在任何尺寸下都必须清晰锐利——无论是按钮的大小还是广告牌的大小——这使它们成为 SVG 的理想候选者。此外,SVG 图标更易于访问且更易于定位。


动画

您可以使用 SVG 图形创建吸引人的 动画,包括很酷的线条绘制效果。事实上,SVG 代码可以与 CSS 动画以及 JavaScript 及其内置的 SMIL 动画功能进行交互。

2.jpg

交互性(图表、图形、信息图表、地图)

SVG 可用于绘制数据并根据用户操作或其他事件动态更新数据。请参阅交互式 SVG 信息图和SVG 交互式公路旅行地图。


特殊效果

使用 SVG 可以实现许多实时效果,包括形状变形或不同的粘性效果。


构建接口和应用程序

SVG 使您能够制作可与 HTML5、基于 Web 的应用程序和富 Internet 应用程序 (RIA) 集成的复杂界面。


如您所见,SVG 几乎无处不在,在无数情况下都被使用。关于这一切的好消息是浏览器对 SVG 的支持很棒。


所以,现在您知道什么是 SVG 以及为什么它们对 Web 来说非常棒。作为下一步,我建议您查看奕捷网络的文章,该文章介绍了将 CSS 与 SVG 结合使用的各种方法,以及在网页中包含 SVG 并对其进行操作的方法。


立即获取方案报价,多一份参考,总有益处。

立即咨询