web开发中svg图片的使用

一、相关概念

1、位图与矢量图概念及对比

• 位图 ：又叫点阵图或像素图，计算机屏幕上的图你是由屏幕上的发光点（即像素）构成的，每个点用二进制数据来描述其颜色与亮度等信息，这些点是离散的，类似于点阵。多个像素的色彩组合就形成了图像，称之为位图。代表格式.png,.jpg,.gif等。
• 矢量图： 又叫向量图，是用一系列计算机指令来描述和记录一幅图，一幅图可以解为一系列由点、线、面等到组成的子图，它所记录的是对象的几何形状、线条粗细和色彩等。生成的矢量图文件存储量很小，特别适用于文字设计、图案设计、版式设计、标志设计、计算机辅助设计（CAD）、工艺美术设计、插图等。主流格式 SVG格式、 WMF文件格式、 EMF文件格式、EPS文件格式 、DXF文件格式等。
• 位图与矢量图 的区别：

第一、变现程度的区别, 位图可以用来表现真实事物的真实且详尽的面貌。位图的分辨率越高就能表现得越详尽、越细腻,如,表现某事物的质地、纹理、发丝、毛孔、颜色的细微变化、颜色的千变万化等。矢量图只用来表现真实世界中的事物大概面貌－大概的轮廓与大致的颜色，不能表现千万种不规则变化的真实事物画面。或者用来表现人脑中想向出来的而现实中没有的事物，比如，各种徽标、设计图纸、卡通画。

第二、来源区别，简单的说，一张 位图最初来源于对真实事务的拍摄，而矢量图来源主要来源人工绘制。

第三、计算机上保存的本质不同，位图保存的是构成这张图像的颜色信息（点即像素）。而文件大小会随着像素信息大小变化，例如，存储一个纯红色矩形，如果是100*100的图像，将保存10000个像素信息。如果把图像长宽变为原来的2倍图像保存，则文件大小将增加到原来的4倍。而 矢量图保存在电脑上，保存的是绘制出这张图像的方法，包括图像中某些点的坐标值和需要填
充的颜色。同样保存一个纯红色矩形时，相当于只保存了矩形的四个角坐标值个需要填充的红色这几个信息，如果要把矩形长宽放大到原2倍保存，只是改变了原信息中的4个角的坐标值。文件大小基本没有改变。

2、web开发中常用图片比较

图片格式	压缩方式	透明度	动画	浏览器兼容	适用场景
JPEG	有损压缩	不支持	不支持	所有	适用于层次丰富、色彩较多的照片、摄影等图像
JPEG2000	有、无损压缩	不支持	不支持	所有	适用于层次丰富、色彩较多的照片、摄影等图像；比JPEG更高的压缩率，同时支持有损无损压缩；支持渐变传输，从模糊到清晰（JPEG从上到下显示）
PNG	有、无损压缩	支持	不支持	所有（IE8一下可兼容处理）	适用于色彩简单、对比强烈的图像，像icon图标等；高保真效果，高压缩比，支持透明；支持渐进传输，整体从模糊到清晰
GIF	有、无损压缩	支持	支持	所有	适用于图像动画，兼容性好；体积小，适合网络传输；
SVG	无损压缩	支持	支持	所有（IE9及以下课通过降级兼容）	矢量图形，可缩放；无需多端、多分辨率适配；支持多种编辑，具有较强的交互特性；
WebP	有损压缩	支持	支持	支持chromium内核浏览器 Android4.0+ 其他版本和ios可插件兼容	高压缩比，适合网络快速传输

3、svg格式图片详细介绍

• 可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。由于SVG文件可嵌入JavaScript（严格地说，应该是ECMAScript）脚本来控制SVG对象，所以在进行Web中JS绘图时算是考虑的一种。
• 发展历程
  2001年9月4日，发布SVG 1.0
  2003年1月4日，发布SVG 1.1
  2003年1月14日，推出SVG移动子版本：SVG Tiny和SVG Basic
  2008年12月22日，發布SVG Tiny 1.2
  2011年8月16日，發布SVG 1.1（第2版），成为W3C目前推荐的标准
  W3C目前仍正在研究制定SVG 2

• 浏览器及终端兼容性

  
  062126-58634.png

二、svg基本操作

1、svg基本形状绘制

• 对于 SVG 图形，需要使用 XML 标记来创建形状，下表给出了这些 XML 元素。

元素	描述
line	创建一条简单的线。
polyline	定义由多个线定义构成的形状。
rect	创建一个矩形。
circle	创建一个圆形。
ellipse	创建一个椭圆。
polygon	创建一个多边形。
path	支持任意路径的定义。

示例： 使用path元素创建一个自定义形状

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-/>
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-/>
<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-/>

</svg>

2、svg渐变效果

• 渐变 是从一种颜色到另一种颜色逐渐的过渡。渐变具有两种基本形式：线性和径向渐变。所应用的渐变类型由您使用的元素确定。以下示例展示了应用于一个椭圆形的线性和径向渐变

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%"
x2="100%" y2="0%">
<stop offset="0%"
style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%"
style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad1)"/>
</svg>

3、svg滤镜效果

• 可以使用过滤器向 SVG 图形应用特殊的效果。SVG 支持以下过滤器。

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

示例：创建矩形的投影效果

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0"
width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha"
dx="20" dy="20"/>
<feGaussianBlur result="blurOut"
in="offOut" stdDeviation="10"/>
<feBlend in="SourceGraphic"
in2="blurOut" mode="normal"/>
</filter>
</defs>
<rect stroke="green"
stroke- fill="yellow" filter="url(#f1)"/>
</svg>

三、svg的web编辑

1、参考svg在线编辑器

• web在线编辑器 支持png、jepg底图导入，笔刷工具及绘制导出。

2、js开源项目

• GitHub前端开源组件 https://github.com/hexiao-o/SvgEdit 基于js 操作，实现基本元素的绘制，色值调整及移动。

3、php相关处理

• Imagick2.0 图像处理库,绘制svg格式的矢量图，svg格式转换，支持转换为png等位图格式。参考手册http://php.net/manual/zh/book.imagick.php 。
• xml操作，由于svg基于xml文档，可以直接根据规则处理xml文档，达到图形处理的效果。示例（移除指定属性的图片元素）：

//读取svg文件
$xmlpatch = './test.svg';
$_id = '888_333';
//初始dom文档类
$doc = new DOMDocument();
$doc -> formatOutput = true;
$domElemsToRemove = [];
if($doc -> load($xmlpatch)) {
$root = $doc->documentElement;
//根据标签读取元素
$elm = $root->getElementsByTagName('path');
foreach ($elm as $new) {
//判断标签内属性值
if ($new->getAttribute('signwith') == $_id) {
$domElemsToRemove[] = $new;
}
}
}
//批量移除匹配到的元素
foreach( $domElemsToRemove as $domElement ){
$domElement->parentNode->removeChild($domElement);
}
//输出
echo $doc->saveXML();