SVG—2D 学习

weixin79893765432...

已于 2022-10-19 17:58:44 修改

阅读量569

点赞数

分类专栏：可视化文章标签： svg

于 2022-10-19 14:43:42 首次发布

本文链接：https://blog.csdn.net/mChales_Liu/article/details/127405729

版权

可视化专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、认识 SVG

SVG 是可缩放矢量图形。它使用 XML 格式来描述二维图形和绘图。

SVG 文件推荐使用 .svg 作为文件的扩展名。

web 上的 svg 文件可以直接在浏览器上展示。也可以嵌入到 HTML 文件中。

SVG 绘制图表与 HTML 和 CSS 绘制图表的方式差别不大，只不过是将 HTML 标签替换成 SVG 标签，运用了一些 SVG 支持的特殊属性。

HTML 的不足之处在于 HTML 元素的形状一般是矩形，虽然用 CSS 辅助，也能够绘制出各种其它形状的图形，甚至不规则图形，但是总体而言还是非常麻烦的。而 SVG 则弥补了这方面的不足，让不规则图形的绘制变得更简单了。因此，用 SVG 绘图比用 HTML 和 CSS 要便利得多。

但是，SVG 图表也有缺点。在渲染引擎中，SVG 元素和 HTML 元素一样，在输出图形前都需要经过引擎的解析、布局计算和渲染树生成。而且，一个 SVG 元素只表示一种基本图形，如果展示的数据很复杂，生成图形的 SVG 元素就会很多。这样一来，大量的 SVG 元素不仅会占用很多内存空间，还会增加引擎、布局计算和渲染树生成的开销，降低性能，减慢渲染速度。这也就注定了 SVG 只适合应用于元素较少的简单可视化场景。

二、在 HTML 页面中使用 SVG

如果 HTML 是 XHTML 并且声明类型为 application/xhtml+xml，可以直接把 SVG 嵌入到 XML 源码中：

<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>

如果 HTML 是 HTML5 并且浏览器支持 HTML5，同样可以直接嵌入 SVG。然而为了符合 HTML5 标准，可能需要做一些语法调整。

可以通过 <embed> 元素引用 SVG 文件：<embed src="circle.svg" type="image/svg+xml" />。
- 优势：所有主要浏览器都支持，并允许使用脚本。
- 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）。
可以通过 <object> 元素引用 SVG 文件：<object data="image.svg" type="image/svg+xml" />。
- 优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准。
- 缺点：不允许使用脚本。
可以使用 <iframe> 元素引用 SVG 文件：<iframe src="image.svg"></iframe>。
- 优势：所有主要浏览器都支持，并允许使用脚本。
- 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）。
理论上同样可以使用 img 元素，但是在低于 4.0 版本的 Firefox 中不起作用。

用 <a> 标签链接到一个 SVG 文件：<a href="circle.svg">查看 SVG 文件</a>。

还可以通过 JavaScript 动态创建 SVG 并将其注入到 HTML DOM 中。这样具有一个优点，可以对浏览器使用替代技术，在不能解析 SVG 的情况下，可以替换创建的内容。

三、SVG 标签

SVG 有一些预定义的形状元素，可被开发者使用和操作：

根标签 <svg>
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
直线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
文本 <text>
滤镜 <defs> 和 <filter>
渐变 <linearGradient> 和 <radialGradient>

1、根标签

SVG 代码以标签 <svg> </svg> 作为根元素。

<svg> 标签：

width 和 height 属性可设置此 SVG 文档的宽度和高度。
version 属性可定义所使用的 SVG 版本。
xmlns 属性可定义 SVG 命名空间。

2、矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
  stroke-opacity:0.9"/>
</svg>

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
x 属性定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。

3、圆形

<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>

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径

4、椭圆形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径

5、直线

<svg xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

6、折线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

points 属性定义多边形每个角的 x 和 y 坐标

7、多边形

<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:evenodd;" />
</svg>

points 属性定义多边形每个角的 x 和 y 坐标

8、路径

下面的命令可用于路径数据：

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 xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" />
</svg>

SVG 提供了一个 stroke 属性。包括：

stroke：定义一条线、文本或元素轮廓的颜色。
stroke-width：定义了一条线、文本或元素轮廓的厚度。
stroke-linecap：定义不同类型的开放路径的终结。
stroke-dasharray：用于创建虚线。

所有stroke属性，可应用于任何种类的线条、文字和元素就像一个圆的轮廓。

（1）、stroke 属性

stroke 属性定义一条线、文本或元素轮廓的颜色。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="blue" d="M5 40 l215 0" />
    <path stroke="black" d="M5 60 l215 0" />
  </g>
</svg>

（2）、stroke-width 属性

stroke-width 属性定义了一条线，文本或元素轮廓厚度。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black">
    <path stroke-width="2" d="M5 20 l215 0" />
    <path stroke-width="4" d="M5 40 l215 0" />
    <path stroke-width="6" d="M5 60 l215 0" />
  </g>
</svg>

（3）、stroke-linecap 属性

stroke-linecap 属性定义不同类型的开放路径的终结。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

（4）、stroke-dasharray 属性

troke-dasharray 属性用于创建虚线。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

9、文本

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>

10、滤镜

SVG可用的滤镜是：

<feBlend> 标签：与图像相结合的滤镜
<feColorMatrix> 标签：用于彩色滤光片转换
<feDistantLight> 标签：用于照明过滤
<fePointLight> 标签：用于照明过滤
<feSpotLight> 标签：用于照明过滤
<feOffset> 标签：过滤阴影
<feComponentTransfer> 标签
<feComposite> 标签
<feConvolveMatrix> 标签
<feDiffuseLighting> 标签
<feDisplacementMap> 标签
<feFlood> 标签
<feGaussianBlur> 标签
<feImage> 标签
<feMerge> 标签
<feMorphology> 标签
<feSpecularLighting> 标签
<feTile> 标签
<feTurbulence> 标签

一个 SVG 元素上可以使用多个滤镜来叠加。

（1）、模糊滤镜

feGaussianBlur 标签是用于创建模糊效果。

<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>

<filter> 元素id属性定义一个滤镜的唯一名称
<feGaussianBlur> 元素定义模糊效果
in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量
<rect> 元素的滤镜属性用来把元素链接到 “f1” 滤镜

（2）、阴影滤镜

<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="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

<filter> 元素id属性定义一个滤镜的唯一名称。
<rect> 元素的滤镜属性用来把元素链接到"f1"滤镜。
<feOffset> 元素：偏移效果。
- <feOffset> 元素的属性改为"SourceAlpha"在Alpha通道使用残影，而不是整个RGBA像素。
<feBlend> 元素：混合效果。
<feGaussianBlur> 元素的stdDeviation属性定义了模糊量。
<feColorMatrix> 过滤器是用来转换偏移的图像使之更接近黑色的颜色。 '0.2’矩阵的三个值都获取乘以红色，绿色和蓝色通道。降低其值带来的颜色至黑色（黑色为0）。

11、渐变

（1）、线性渐变

线性渐变使用 <linearGradient> 标签。

<linearGradient> 标签必须嵌套在<defs> 的内部。<defs> 标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可以定义为水平，垂直或角渐变：

当y1和y2相等，而x1和x2不同时，可创建水平渐变
当x1和x2相等，而y1和y2不同时，可创建垂直渐变
当x1和x2不同，且y1和y2不同时，可创建角形渐变

<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)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

<linearGradient> 标签的id属性可为渐变定义一个唯一的名称
<linearGradient> 标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset属性用来定义渐变的开始和结束位置。
填充属性把 ellipse 元素链接到此渐变
<text> 元素是用来添加一个文本

（2）、放射性渐变

放射性渐变使用 <radialGradient> 标签。

<radialGradient> 标签必须嵌套在<defs> 的内部。<defs> 标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

<radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称
CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop> 标签指定。offset属性用来定义渐变色开始和结束
填充属性把ellipse元素链接到此渐变

四、SVG 在线实例

SVG 实例

五、SVG 打包压缩

参考：gzip 压缩的 SVG 文件

由于在某些应用（比如地图应用等）中使用时，SVG 文件可能会很大。

SVG 标准同样允许 gzip 压缩的 SVG 文件。推荐使用“.svgz”（全部小写）作为此类文件扩展名。不幸的是，如果服务器是微软的 IIS 服务器，使 gzip 压缩的 SVG 文件在所有的可用 SVG 的用户代理上可靠地起作用是相当困难的，而且 Firefox 不能在本地机器上加载 gzip 压缩的 SVG 文件。除非知道处理发布内容的 Web 服务器可以正确的处理 gzip，否则要避免使用 gzip 压缩的 SVG。

【参考文献】
SVG 菜鸟教程
 SVG 教程MDN

weixin79893765432...

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SVG—2D 学习

不幸的是，如果服务器是微软的 IIS 服务器，使 gzip 压缩的 SVG 文件在所有的可用 SVG 的用户代理上可靠地起作用是相当困难的，而且 Firefox 不能在本地机器上加载 gzip 压缩的 SVG 文件。这样具有一个优点，可以对浏览器使用替代技术，在不能解析 SVG 的情况下，可以替换创建的内容。标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
复制链接

扫一扫