HTML入门11

　　在网页中添加矢量图形，

　　使用矢量图形在很多情况下，效果较好，拥有较小的文件尺寸，高度缩放，下面具体讲解如何在网页中添加矢量图形

　　位图和矢量图

　　位图文件包含了每个像素的位置和色彩信息，流行的位图格式包括Bitmap(.bmp)，PNG(.png)，JPEG（.jpg）和GIF(.gif)

　　矢量图使用算法来定义，一个矢量图包含了图形和路径的定义，电脑可以根据这些定义计算出他们在屏幕上时呈现的样自，SVG用于创造精彩的web矢量图形。矢量图相对于同样的位图有更小的体积，因为仅需存储少量的算法，而不是逐个存储每个像素的信息。

　　SVG的定义

SVG用于描述矢量图形的XML语言，基本上时像HTML一样的标记，用于图形，有一些简单元素来出创建简单图形。<circle><rect><feColorMatrix>(变换矩阵转换颜色) <animate>矢量图形的动画部分，<mask>在图像顶部应用蒙版。下面展示i一个简单的例子：

<svg version="1.1" baseProfile="full" width="300" height="2000" xmlns="http://www.w3.org/2000.svg">

　　<rect width="100%" height="100%" fill="back"  />

　　<circle  cx="150" cy="100" r="90"  fill="blue" />

</svg>　可以使用illustrator来创建各种插图，

SVG其他优点，矢量图形中的文本仍然可访问利于SEO，可以很好的适应样式/脚本。缺点 ，SVG非常容易变得复杂，文件大小会增加也会占用浏览器很长的处理时间。

SVG可能比栅格图像更难创建，取决于创建那种图像，SVG从IE9开始支持，因此光栅图形跟适合照片那样复杂精密的图像。

　　将SVG添加到页面，使用img快捷方式，用src属性引用SVG。示例如下：

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />

优点，快速，熟悉的图像语法，alt属性提供的内置文本等效，可以通过a元素嵌套img使图像成为超链接。  缺点，无法使用js实现操作图像，如果要操作样式必须内联CSS样式，外部样式不起作用，也不能用CSS伪类来重设图像样式（：focus）

　　兼容性，对于不支持SVG IE8及更低版本，Android2.3及更低版本的浏览器，可以从src属性引用png或jpg，并使用srcset属性，只有最近的浏览器才能识别来引用SVG，这样支持SVG的浏览器将使用SVG，较旧的浏览器将加载PNG, 同样也可以通过CSS来讲SVG设置成背景图像，

background：url("fallback.png") np-repeat cener;

background-image:url("image.svg");

background-size:contain;

同样这种方式引入的SVG无法被js操作，样式设置也有了限制，限于内联样式。

引用SVG时，确保内联SVG即在标签内，优点，SVG内联减少HTTP请求，减少加载时间。

使用id或class选定SVG元素，添加央视规则。内联SVG唯一可以让CSS与其交互，CSS动画的方法，同样也可以包裹在a元素里，成为超链接。

缺点：多次使用导致资源密集难以维护，  SVG增加HTML文件大小，  浏览器不能像缓存普通图片一样缓存内联SVG，  在<foreignObject>元素中 包含回退，支持SVG的浏览器让然会下载后备图像。

　　使用iframe嵌入SVG 像在网页中打开网页一样，打开SVG图像，

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

来分析下这种情况的优缺点，iframe有回退机制，如果浏览器不支持iframe，则只会显示回退，此外，除非SVG和您的当前网页有相同的origin,否则不能在主页面上使用js操作SVG.