值得一学的SVG

SVG图标可能大家都有用过,一提起SVG,第一个印象就是可以无损缩放图标,而且文件体积小,是做小图标的绝佳实现方式。遂总结关于SVG的使用方式以及一些思考…

一、SVG的使用

SVG的使用并不难,甚至一些svg图标可以通过iconfont平台直接下载,这里主要讲讲关于SVG中的各个属性以及用法

在一个HTML文件中,svg就是其标签之一,在网页中其基本用法如下:

<!DOCTYPE html>
<html>
    <body>
        <svg>
           <circle cx="100" cy="50" r="50" fill="red" />
        </svg>
    </body>
</html>

为了兼容性可以如下方式引入svg

<embed src="circle1.svg" type="image/svg+xml" />
<object data="circle1.svg" type="image/svg+xml"></object>
<iframe src="circle1.svg"></iframe>

而一个svg格式的文件如下:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="150">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2"  fill="red" />
</svg>

svg好比一个画板,学习过图形学的同学应该很容易理解,类似图形学中基本图形、画线等操作接下来一起看看吧!

1.1 矩形 react

react标签的属性:

  • x:矩形左上角横坐标
  • y:矩形左上角纵坐标
  • width:矩形宽度
  • height: 矩形高度
  • style:行内样式,如下属性均可放到react标签中
    • fill:封闭区域填充色,支持rgb、颜色名和十六进制
    • fill-opacity:填充色透明度
    • fill-rule:颜色填充规则,nonzero | evenodd | inherit
    • stroke:画笔颜色
    • stroke-width:画笔粗细
    • stroke-opacity:画笔颜色透明度
    • stroke-linecap:画线端点样式,round(平滑)
    • stroke-linejoin:两线交点处样式,round(平滑)
    • stroke-dasharray: 虚线

1.2 圆 circle

circle标签的属性

  • cx:圆心横坐标
  • cy:圆心纵坐标
  • r:圆半径

1.3 椭圆 ellipse

ellipse与圆类似,不同之处在于可设置横纵半径:

  • cx:椭圆中心横坐标
  • cy:椭圆中心纵坐标
  • rx: 椭圆横向半径
  • ry:椭圆纵向半径

1.4 直线 line

line标签用于画线,两点确定一条直线:

  • x1:起点横坐标
  • y1:起点纵坐标
  • x2:终点横坐标
  • y2:终点纵坐标

1.5 多边形 polygon

polygon标签用于创建不少于三条边的封闭图形

  • points: 顺序描述每个节点坐标
<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

1.6 曲线 polyline

polyline表现用于直线段链接的曲线,不封闭:

  • points:顺序描述每个节点坐标
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>

1.7 路径 path

path标签其功能与polyline类似,但其更具体,其属性如下(属性若小写则其后数值代表相对位移):

  • 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
<svg>
    <path d="M150 0 L75 200 L225 200 Z" />
</svg>

1.8 文本 text

text标签支持文本(字符串),类似span标签,其属性可以通过style或行内预置属性调整样式,这里不认为其预置样式有什么相较于css的优点,因此其主要属性如下:

  • x:横坐标
  • y:纵坐标
<svg height="100" width="90">
  <text x="0" y="20" fill="red">I love SVG</text>
</svg>

文本中还可嵌入tspan标签,该标签类似html的p标签,与text标签类似可设置x、y属性

<svg>
  <text x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line</tspan>
    <tspan x="10" y="70">Second line</tspan>
  </text>
</svg>

支持超链接

<!DOCTYPE html>
<html>
    <body>
        <svg>
          <a xlink:href="https://blog.dyboy.cn" target="_blank">
            <text x="0" y="15" fill="red">I love SVG</text>
          </a>
        </svg>
    </body>
</html>

圆弧形的文字排版

<svg width="500" height="300">
  <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love DYBOY</textPath>
  </text>
</svg>

1.9 滤镜

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">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"  fill="yellow" filter="url(#f1)" />
</svg>

二、SVG制作在线工具

SVG在线制作工具

在线体验地址:https://c.runoob.com/more/svgeditor/

三、总结

通过对SVG的简单使用,SVG就好比一张画布,svg标签内部包裹的这些标签就是xml描述性代码,浏览器根据这些描述性代码基于计算机图形学绘制出各种图形、效果。canvas与svg相似,另外svg的大规模使用可以参考Google的在线PPT,Google的工程师真的是把每个效果都用svg定义实现了,six!

Reference:

How to Hand Code SVG - Kezz Bracey
SVG element reference - MDN

发表评论 / Comment

用心评论~

金玉良言 / Appraise
DYBOY站长已认证
2020-12-15 19:53
SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。

推荐阅读文章;https://juejin.cn/post/6892208975127773197