在网页中添加矢量图形

矢量图形在很多情况下非常有用 — 它们拥有较小的文件尺寸，却高度可缩放，所以它们不会在镜头拉近或者放大图像时像素化。在这篇文章中，我们将为您呈现如何在网页中添加矢量图形。

前提：
你需要了解 HTML的基本知识并且知道如何在你的文档中插入图片.
目标：
了解如何嵌入 SVG (矢量) 图形到网页中。
提示：本文的目的并不是教你 SVG；仅仅是告诉你它是什么，以及如何在网页中添加它。

什么是矢量图形？
在网上，你会和两种类型的图片打交道 — 位图和矢量图:

位图使用像素网格来定义 — 一个位图文件精确得包含了每个像素的位置和它的色彩信息。流行的位图格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)
矢量图使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。 SVG 格式可以让我们创造用于 Web 的精彩的矢量图形。
为了让你清楚的认识到两者的区别，我们来一个例子。你可以在我们的 Github 仓库中在线查看这个例子：vector-versus-raster.html — 它并排展示了两个看起来一致的图像，一个红色的五角星以及黑色的阴影。不同的是，左边的是 PNG，而右边的是 SVG 图像。

当你放大网页的时候，区别就会变得明显起来 — 随着你的放大，PNG 图片变得像素化了，因为它存储是每个像素的颜色和位置信息 — 当它被放大时，每个像素就被放大以填满屏幕上更多的像素，所以图像就会开始变得马赛克感觉。矢量图像看起来仍然效果很好且清晰，因为无论它的尺寸如何，都使用算法来计算出图像的形状，仅仅是根据放大的倍数来调整算法中的值。

注意: 上面的图片实际上都是 PNG 图片 —— 每个例子中左边的图片代表光栅图片，右边的星星代表矢量图。还有，访问 vector-versus-raster.html 示例来查看真正的例子！

此外，矢量图形相较于同样的位图，通常拥有更小的体积，因为它们仅需储存少量的算法，而不是逐个储存每个像素的信息。

SVG是什么？
SVG 是用于描述矢量图像的XML语言。它基本上是像HTML一样的标记，只是你有许多不同的元素来定义要显示在图像中的形状，以及要应用于这些形状的效果。 SVG用于标记图形，而不是内容。非常简单，你有一些元素来创建简单图形，如和。更高级的SVG功能包括（使用变换矩阵转换颜色）（矢量图形的动画部分）和（在图像顶部应用模板）

作为一个简单的例子，以下代码创建一个圆和一个矩形：

这将创建以下输出：(如果无法查看图片，这里)

从上面的例子可以看出，SVG很容易手工编码。是的，您可以在文本编辑器中手动编写简单的SVG，但是对于复杂的图像，这很快就开始变得非常困难。为了创建SVG图像，大多数人使用矢量图形编辑器，如 Inkscape 或 Illustrator。这些软件包允许您使用各种图形工具创建各种插图，并创建照片的近似值（例如Inkscape的跟踪位图功能）。

SVG除了迄今为止所描述的以外还有其他优点：

矢量图像中的文本仍然可访问（这也有利于 SEO)）。
SVG 可以很好地适应样式/脚本，因为图像的每个组件都是可以通过CSS或通过JavaScript编写的样式的元素。
那么为什么会有人想使用光栅图形而不是SVG？其实 SVG 确实有一些缺点：

SVG非常容易变得复杂，这意味着文件大小会增加; 复杂的SVG也会在浏览器中占用很长的处理时间。
SVG可能比栅格图像更难创建，具体取决于您尝试创建哪种图像。
旧版浏览器不支持SVG，因此如果您需要在网站上支持旧版本的 IE，则可能不适合（SVG从IE9开始得到支持）。
由于上述原因，光栅图形更适合照片那样复杂精密的图像。

注意：在Inkscape中，将文件保存为纯SVG以节省空间。另请参阅如何为Web准备SVG。

将SVG添加到页面
在本节中，我们将介绍将SVG矢量图形添加到网页的不同方式。

快捷方式：
要通过元素嵌入SVG，你只需要按照预期的方式在 src 属性中引用它。你将需要一个height或width属性（或者如果您的SVG没有固有的宽高比）。如果您还没使用过元素，请阅读HTML中的图片教程。

triangle with all three sides equal
优点
快速，熟悉的图像语法与alt属性中提供的内置文本等效。
可以通过在元素嵌套，使图像轻松地成为超链接。
缺点
无法使用JavaScript操作图像。
如果要使用CSS控制SVG内容，则必须在SVG代码中包含内联CSS样式。（从SVG文件调用的外部样式表不起作用）
不能用CSS伪类来重设图像样式（如:focus）。
疑难解答和跨浏览器支持
对于不支持SVG（IE 8及更低版本，Android 2.3及更低版本）的浏览器，您可以从src属性引用PNG或JPG，并使用srcset属性只有最近的浏览器才能识别）来引用SVG。在这种情况下，仅支持浏览器将加载SVG - 较旧的浏览器将加载PNG：

triangle with equal sides 您还可以使用SVG作为CSS背景图像，如下所示。在下面的代码中，旧版浏览器会坚持他们理解的PNG，而较新的浏览器将加载SVG：

background: url(“fallback.png”) no-repeat center;
background-image: url(“image.svg”);
background-size: contain;
像上面描述的方法一样，使用 CSS 背景图像插入SVG 意味着它不能被 JavaScript 操作，并且也受到相同的 CSS 限制。

如果 SVG 根本没有显示，可能是因为你的服务器设置不正确。如果是这个问题，这篇文章将告诉你正确方向。

如何在HTML中引入SVG代码

你还可以在文本编辑器中打开SVG文件，复制SVG代码，并将其粘贴到HTML文档中 - 这有时称为将SVG内联或内联SVG。确保您的SVG代码在标签中（不要在外面添加任何内容）。这是一个非常简单的示例，您可以粘贴到文档中：

优点将 SVG 内联减少 HTTP 请求，可以减少加载时间。您可以为 SVG 元素分配class和id，并使用 CSS 修改样式，无论是在SVG中，还是 HTML 文档中的 CSS 样式规则。实际上，您可以使用任何 SVG外观属性作为CSS属性。内联SVG是唯一可以让您在SVG图像上使用CSS交互（如:focus）和CSS动画的方法（即使在常规样式表中）。您可以通过将 SVG 标记包在元素中，使其成为超链接。缺点这种方法只适用于在一个地方使用的SVG。多次使用会导致资源密集型维护（resource-intensive maintenance）。额外的 SVG 代码会增加HTML文件的大小。浏览器不能像缓存普通图片一样缓存内联SVG。您可能会在元素中包含回退，但支持 SVG 的浏览器仍然会下载任何后备图像。你需要考虑仅仅为支持过时的浏览器，而增加额外开销是否真的值得。如何使用嵌入SVG 您可以在浏览器中打开 SVG 图像，就像网页一样。因此，使用嵌入 SVG 文档就像我们在从对象到iframe - 其他嵌入技术中进行研究一样。

这是一个快速回顾：

Triangle with three unequal sides 这绝对不是最好的方法：

缺点
如你所知， iframe有一个回退机制，如果浏览器不支持iframe，则只会显示回退。
此外，除非 SVG 和您当前的网页具有相同的 origin，否则你不能在主页面上使用 JavaScript 来操纵 SVG。
动手学习：使用SVG
在这个动手学习部分中，我们希望你能够体验一下 SVG 的乐趣。在下面的“input”部分，您将看到我们已经提供了一些样例来开始使用。您还可以访问 SVG元素参考，了解更多关于SVG可以使用的其他玩具的细节，也可以尝试一下。这部分都是为了锻炼你的研究技巧，并且有一些乐趣。

如果你卡住了，无法使你的代码工作，你可以随时使用 Reset 按钮进行重置。

总结
本文提供了一个矢量图形和 SVG 的快速浏览，让你了解他们的作用，以及如何在网页中引入 SVG。它从来没有打算成为学习 SVG 的完整教程，只是一个指南，让你在网上遇到 SVG 时知道它是什么。所以不要觉得你不是一个 SVG 专家而担心。如果你想了解更多关于它的工作原理，我们在下面列出了一些可能会帮助您的信息。

在本模块的最后一篇文章中，我们将详细探索响应式图像，查看 HTML 可以让您的图像在不同设备上更好地适配。

相关链接
SVG tutorial on MDN
Quick tips for responsive SVGs
Sara Soueidan’s tutorial on responsive SVG images
Accessibility benefits of SVG
How to scale SVGs （它不像光栅图形那么简单！）

在网页中添加矢量图形相关推荐

html页面怎么添加打印,在网页中添加打印按钮或链接的方法
在网页中添加打印按钮或链接的方法发布时间:2020-05-27 17:38:35 来源:亿速云阅读:347 作者:鸽子打印按钮或链接是对网页的简单添加 CSS(层叠样式表)使你可以控制屏幕上的网 ...
关于如何在网页中添加自己的QQ客服方法
关于如何在网页中添加自己的QQ客服方法今天,自己在百度上查的,.本来我也不会.其实弄下来还是很简单的,下面我就来为大家介绍下如何在设计网页时给网页中加入自己的QQ客服图标. 第一步,用你所要添加到网 ...
CSS/HTML 如何在网页中添加空格(琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...
如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
html5网页中加入播放器,向网页中添加 HTML5 视频控件
爱学习,爱生活,爱编程--希望能帮到你!更多>>> 如何开始使用采用它的最基本形式,使用 HTML5 video 元素向网页中添加视频播放器是通过一行 HTML 完成的. 添加 ...
在网页中添加即时翻译器stardict
星际译王项目组资源下载列表:http://code.google.com/p/stardict-3/downloads/list 星际译王select&translate how to 即时翻 ...
图片滚动html设置圆圈,在网页中添加滚动图片（文字和其它对象）的方法
在网页中添加滚动图片(文字和其它对象)的方法 (2006-04-13 15:31:51) 分类: 记滚动内容 Direction 参数可设置:up down left right (控制滚动方向) ...
怎样在html中加入音乐播放器,如何在网页中添加音乐播放器
小编其实一个很痴迷音乐的人,每当我用电脑工作的时候,都会打开播放器播放音乐的,然后顿时觉得很舒适,如果我们在别人浏览网页的时候加个音乐播放器播放音乐的话,那么我们的网页就会给别人带来很舒适的感觉.DW ...
如何在网页中添加访问密码？
有时,我们编写的网页或网站不希望太多人来访问,需要在主页中添加访问密码的功能.那么这个需要正确输入密码才能访问网站的功能怎么实现呢? 其实很简单,下面贴出本人的源码(带注释),给大家参考一下. 以下是 ...

在网页中添加矢量图形

在网页中添加矢量图形相关推荐

最新文章

热门文章