14、HTML入门——向web中添加矢量图形

目录1. 什么是矢量图形2. SVG是什么3. 将SVG添加到页面3.1 快捷方式img元素3.2 问题排查和跨浏览器支持3.3 如何在HTML中引入SVG代码3.4 如何使用iframe嵌入SVG参考1. 什么是矢量图形在web上你会和两种类型的图片打交道——位图和矢量图位图使用像素网格来定义——位图文件精确包含每个像素的位置和它的色彩信息。流行的web位图格式包括Bitmap(.bmp)、PNG(.png)、JPEG(.jpg)和GIF(.gif)。矢量图使用算法来定义——矢量图文件包含了图形和路径的定义电脑可以根据这些定义计算出档它们在屏幕上渲染时应该呈现的样子。借助SVG格式我们可以创造用于Web的精彩矢量图形。随着你的放大PNG图片显现出了像素块因为它存储是每个像素的颜色和位置信息。当它放大时每个像素就被放大然后填满屏幕上更多的像素所以图像就会开始变得像马赛克。然而矢量图像看起来仍然效果好且清晰因为无论它的尺寸如何系统都使用算法来计算出图像的形状仅仅是根据放大的倍数来调整算法中的值。此外相较于同样的位图矢量图形体积更小因为它们仅需储存少量的算法而不是逐个储存每个像素的信息。2. SVG是什么SVG是用于描述矢量图像的语言它基于XML。它基本上是像HTML一样的标记只是它提供了许多不同的元素来定义要显示在图像中的形状以及要应用于这些形状的效果。SVG用于标记图形而不是内容。SVG定义了一些用于创建基本图形的元素如circle和rect此外SVG还提供了一些复杂一些的元素如path和polygon。更高级的SVG特性包括feColorMatrix(使用变换矩阵转换颜色)、animate(矢量图形的动画部分)和mask(在图像上层应用蒙版)。svgversion1.1baseProfilefullwidth300height200xmlnshttp://www.w3.org/2000/svgrectwidth100%height100%fillblack/circlecx150cy100r90fillblue//svgSVG很容易手工编码。但是随着图像复杂度提升手动编码很快就开始变得非常困难。SVG除了前面描述的以外还有其他优点矢量图像中的文本仍然可访问有利于搜索引擎优化。SVG可以很好地适应样式/脚本因为图像的每个组件都是可以通过CSS或通过JavaScript设置样式的元素。SVG也有一些缺点SVG非常容易变得复杂这意味着文件大小会增加复杂的SVG也会占用浏览器很长的处理时间。SVG可能比位图更难创建具体取决于你尝试创建哪种图像。由于上述原因像照片那样复杂精密的图像更适合使用位图。3. 将SVG添加到页面3.1 快捷方式img元素要通过img元素嵌入SVG你只需要按照预期的方式在src属性中引用它。你将至少需要height或width属性中的一个或者如果你的SVG没有固定的宽高比则都需要。imgsrcequilateral.svgalt等边三角形height87pxwidth100px/优点快速且熟悉的图像语法内置的文本等小内容可通过alt属性获取。通过将img嵌入到a元素中你可以轻松地将图像转换为超链接。浏览器能够缓存SVG文件这意味在未来使用该图像的页面将加载得更快。缺点无法使用JavaScript操作图像。如果要使用CSS控制SVG内容则必须在SVG代码中包含内联CSS样式(从SVG文件内部调用的外部样式表不起作用)。不能用CSS伪类来重设图像样式(如:focus)。3.2 问题排查和跨浏览器支持对于不支持SVG(IE8以下Android 2.3以下)的浏览器可以用src属性引用PNG或JPG并使用srcset属性来引用SVG。在这种情况下仅支持SVG的浏览器会加载SVG——较旧的浏览器将加载PNG。imgsrcequilateral.pngalt等边三角形srcsetequilateral.svg/你还可以使用SVG作为CSS背景图像。在下面的代码中旧版浏览器会加载它们能够理解的PNG而较新的浏览器将加载SVG。background:url(fallback.png)no-repeat center;background-image:url(image.svg);background-size:contain;与上面的img一样使用CSS背景图片插入SVG意味着SVG无法使用JavaScript进行操作并且同样受到相同的CSS限制。3.3 如何在HTML中引入SVG代码你还可以在文本编辑器中打开SVG文件复制SVG代码并将其粘贴到HTML文档中——这有时称为将SVG内联或内联SVG。请确保你的SVG代码始于svg标签并终于/svg标签。svgwidth300height200rectwidth100%height100%fillgreen//svg优点将SVG内联会减少HTTP请求可以减少加载时间。可以为SVG元素分配class和id并使用CSS修改样式无论是在SVG中还是HTML文档中的CSS样式规则。实际上你可以使用任何SVG外观属性作为CSS属性。内联SVG是唯一可以让你在SVG图像上使用CSS交互和CSS动画的方法。你可以通过将SVG标记包在a元素中使其成为超链接。缺点这种方法只适用于SVG在单个地方使用的情况。多次使用会导致资源密集型维护。额外的SVG代码会增加HTML文件的大小。浏览器不能像缓存普通图像资源那样缓存内联SVG因此包含该图像的页面在加载第一个包含该图像的页面后加载速度不会更快。你可能会在foreignObject元素中包含回退但支持SVG的浏览器仍然会下载所有后备图像。你需要考虑仅仅未支持过时的浏览器而增加额外开销是否真的值的。3.4 如何使用iframe嵌入SVG可以使用iframe嵌入SVG。iframesrctriangle.svgwidth500height500sandboximgsrctriangle.pngaltTriangle with three unequal sides//iframe缺点ems;iframe又一个回退机制如果浏览器不支持iframe则只显示回退。除非SVG和你当前的网页具有相同的来源(协议、主机名、端口三者相同时两个对象才具有相同的源)否则你不能在主页面上使用JavaScript来操作SVG。参考1、向web中添加矢量图形