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.

 

posted @ 2018-08-24 11:35  黑猴塞雷  阅读(173)  评论(0编辑  收藏  举报