SVG矢量图简介

SVG矢量图：

html5支持内联svg,svg指可以伸缩的矢量图，其优点是放大不会模糊，支持任意尺寸打印不损坏品质，可通过编辑器创建和修改，；使用XML定义，其本质就是XML文件，和Canvas类似；

在html中使用SVG图像：

SVG 文件可通过：、 或者 标签嵌入 HTML 文档,或直接链接到SVG文件。具体如下：

	<!-- 此标签允许使用脚本，支持在HTML5中使用 -->
    <embed src="circle1.svg" type="image/svg+xml" />

    <!-- 此标签不支持脚本，支持在HTML5和HTML4、XHTML使用 -->
    <object data="circle1.svg" type="image/svg+xml"></object>

    <!-- 允许使用脚本，支持HTML5中使用 -->
    <iframe src="circle1.svg"></iframe>

    <!-- 直接显示在HTML元素中 -->
    <div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
             </svg>
        </div>

    <!-- 当点击链接后跳到SVG文件显示图像 -->
    <a href="circle1.svg">点击查看SVG文件</a>

SVG中预定义图形：

SVG像Canvas一样提供了一套预定义好的元素（标签，这些标签可以是单标签，也可以是双标签，控制属性的属性词位置和html标签中的属性写法一样，可以用style属性替换），具体如下面案例：

	<div>
        <svg width='500' height='600'>
            <!-- 1.<sircle/> 定义圆，其中属性：cx定义圆心横坐标  cy定义圆心纵坐标  r定义圆的半径  stroke定义圆边框的颜色  stroke-width定义圆边框的宽度 fill定义圆的填充颜色 -->
            <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
            <circle cx="10" cy="50" r="40" stroke="yellow" stroke-width="2" fill="blue" opacity='.5'></circle>
    
            <!-- 2.<rect/> 定义矩形，x和y表示坐标 rx和ry定义圆角 width和height定义尺寸 stroke定义描边颜色 stroke-width定义描边宽度 fill定义填充颜色 opacity定义半透明，当前加以下前缀则表示该属性控制的半透明-->
            <rect x='30' y='130' rx="20" ry="20" width='200' height='50' stroke='yellow' stroke-width='10' stroke-opacity = '.4' fill='blue' fill-opacity='0.5'/>
            <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"></rect>>
    
            <!-- 3.<ellipse/> 定义椭圆，cx和cy表示圆心坐标 rx和ry表示水平半径和垂直半径 后面的属性和上面一样-->
            <ellipse cx="300" cy="80" rx="50" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>
    
            <!-- 4.<line/> 定义直线，x1和y1表示直线起始坐标 x2和y2表示结束坐标 后面属性和上面一致-->
            <line x1="20" y1="20" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>
    
            <!-- 5.<polygon/> 定义至少三条边的多边形，points='左边对'，里面表示x,y的坐标对，每个坐标对表示线的交点，有前后顺序，自动封闭，后面属性和上面一致-->
            <!-- fill-rule属性：由于判断画布上某区域是否属于该图形内部，内部区域会被填充，外部区域则不会被填充，属性值：nonzero | evenodd | inherit,关于属性值解释：查阅官方文档：https://www.runoob.com/svg/svg-polygon.html -->
            <polygon points="0,0 100,0 100,100 0,100" style="fill:lime;stroke:purple;stroke-width:1"/>
    
            <!-- 6.<polyline> 定义折线， points属性里面的值是x,y的坐标对，有前后顺序，依次连接，后面的属性和上面一致-->
            <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
    
            <!-- 7.<path/> 定义路径，下面的命令可用于路径数据：M = moveto,L = lineto,H = horizontal lineto,V = vertical lineto,C = curveto,S = smooth curveto,Q = quadratic Bézier curve,T = smooth quadratic Bézier curveto,
                A = elliptical Arc,Z = closepath,注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。-->
            <path d="M150 0 L75 200 L225 200 Z" />
    
            <!-- 8.<text></text> 文本， x和y表示开始坐标 transform表示转换里面rotate(角度 坐标)表示旋转-->
            <text x="100" y="15" transform="rotate(45 0,100)" fill="red">hello word</text>
        </svg>
    </div>

SVG滤镜：

SVG滤镜用来增加对SVG图形的特殊效果，如：

SVG可用的滤镜是：feBlend - 与图像相结合的滤镜、feColorMatrix - 用于彩色滤光片转换、feComponentTransfer、feComposite、feConvolveMatrix、feDiffuseLighting、feDisplacementMap、feFlood、feGaussianBlur、feImage、feMerge、feMorphology、feOffset - 过滤阴影、feSpecularLighting、feTile、feTurbulence、feDistantLight - 用于照明过滤、fePointLight - 用于照明过滤、feSpotLight - 用于照明过滤，除此之外，您可以在每个 SVG 元素上使用多个滤镜。

滤镜定义在 元素中，标签用来定义SVG滤镜,如：

	<div>
        <svg>
            <defs>
              <filter id="f1" x="0" y="0">
                <feGaussianBlur in="SourceGraphic" stdDeviation="15" /><!--feGaussianBlur 用于创建模糊效果 -->
              </filter>
            </defs>
            <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
        </svg>
    </div>

SVG渐变：

SVG渐变主要有两种类型：Linear线性渐变、Radial径向渐变

	<div>
        <svg>
            <defs>
              <linearGradient id="gr" x1="0%" y1="100%" x2="100%" y2="0%">
                <stop offset="0%" stop-color='rgb(255,255,0)'/>
                <stop offset="100%" stop-color='rgb(0,0,0)'/>
              </linearGradient>
            </defs>
            <ellipse cx="0" cy="0" rx="100" ry="100" fill="url(#gr)" />
          </svg>
    </div>

推荐文档：

由于SVG在实际开发中并不常用，因此这里不做详细介绍，如果想了解更多，建议阅读官方文档：https://www.runoob.com/svg/svg-tutorial.html

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海