SVG 基础属性与应用

作者: 爱妃给朕躺下 | 来源:发表于2021-07-24 20:41 被阅读0次

SVG：Scalable Vector Graphics，可伸缩矢量图形

前言

为了在网络设备上传播各种声音、图像等媒体文件，有了各种针对不同需求的文件格式——图片、视频、音频等都有各种格式，应对高效传输、低空间占用、各类媒体中传输使用等场景。

图片，就有许多格式，例如普通用户最为熟悉的 JPEG、PNG、GIF。尽管这些格式与大家经常见面，但普通用户根本不知道这些图片格式的区别与作用。这里简单说一下，JPEG 是有损压缩，对原图实行大幅度的压缩，以减少图片的空间占用，但同时也会对画质产生较大的影响。PNG 格式的图片可以理解为类似剪纸，没有图像的区域是透明的，可以与背景有效融合。有时你会在某些地方看到透明头像，使用的就是 PNG 格式的图片。至于 GIF ，相信大家都熟悉，就是一个短暂的高压缩的动图，大家在某些软件的搞笑区或者社交软件的斗图区看得很多。

除上述格式，还有 PSD 类似的图片格式，有特殊用途，PSD 主要用于 PS 软件，保存高保真的图片，一般是商业化使用，其他软件基本不支持。

但今天的主题并不是以上这些格式。为了数字媒体的网络化传播，许多图像公司参与了 SVG 格式的标准制定。除此之外，人们发现，上面的图片格式在网络中传播时，要么是会因为放大模糊，要么是本身压缩得太厉害，或者是本身就很大，在一些场景下不是特别适用，比如放大画质不损失，且要求空间占用小的时候。

这种放大图像不模糊的形式类似于 PDF 文档。

为了满足上述需求，2003 年，W3C 与苹果、柯达、IBM、Adobe 等公司一起制定了 SVG 矢量图形标准。SVG 使用 XML （可扩展标记语言）定义图像，通过一系列参数在设备显示屏上规定图像的坐标，坐标矢量便会连接绘制出图像，放大缩小不影响画质。

因为使用 XML，SVG 图像很容易在 HTML 网页中使用。

一、HTML 中使用 SVG

需要强调的是，HTML 中使用的 SVG 的代码一般是专业的绘图软件自动生成的，在使用时只需要引入就好，SVG 的标签与属性非常繁杂，没有必要进行记忆，只需记忆一些常用属性，在实际开发中可以修改属性改变样式即可。

1. embed 标签

语法：

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

优势：所有主要浏览器都支持，并允许使用脚本

缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

该方法不常用。

2. object 标签

语法：

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

优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准

缺点：不允许使用脚本。

该方法不常用。

3. iframe 标签

语法：

<iframe src="circle1.svg"></iframe>

优势：所有主要浏览器都支持，并允许使用脚本

缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

该方法不常用。

4. SVG 代码

语法：

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

该方法是最常用的方法，使用 SVG 标签如同普通的 HTML 标签，并且可以对 SVG 图像进行更改，只需要更改相关参数即可。但该方法需要对相关标签与属性熟练掌握。

二、SVG 相关标签与属性

SVG 使用 <svg> 标签定义图形的绘制区域，要绘制的图形就写在 <svg> 标签中。其可以设置宽高等属性，viewBox 属性用于设置 SVG 盒子，其有四个参数，例如：

<svg width="200" height="200" viewBox="50 50 50 50"></svg>

其中前两个参数是 SVG 盒子的起始坐标，后两个代表盒子的宽高。

1. 矩形

语法：

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

xmlns 是 XML 的语法，规定一个命名空间，用于防止同名原素带来的歧义。

矩形使用标签 <rect> 定义，其中 x、y 表示开始绘制的横纵坐标，width 与 height 表示图形的宽高。

2. 圆形

语法：

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

圆形使用 <circle> 标签定义，cx、cy 表示圆心坐标，r 表示圆的半径。stroke 表示图形的边框，所有图形都可以使用该属性。与 CSS 中的 border 类似，后面会介绍它的相关属性。

3. 椭圆

语法：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</svg>

椭圆使用 <ellipse> 标签定义，属性与圆类似，不同的地方在于半径 r 的属性设置不同。椭圆使用 rx、ry 进行设置。fill 属性意为 “填充”，指图形的填充模式，类似于背景色。

4. 直线

语法：

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

直线使用 <line> 标签定义。两点确定一条直线，其中 x1、y1 是第一个点的坐标，x2、y2 是第二个点的坐标。这里的 stroke-width 定义线段的宽度。

5. 多边形

语法：

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

折线使用 <polygon> 标签进行定义，points 属性用于设置每个顶点的坐标。

6. 折线

语法：

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

折线使用 <polyline> 标签进行定义，points 属性用于设置每个折点的坐标。fill 设置折线的填充，一般设为 none，不设置的话会是黑色，填充为多个多边形。

7. 路径

语法：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  stroke-width="5" fill="none" />
</svg>

路径使用 <path> 定义，用于绘制复杂的图形。id 表示路径的唯一身份，d 表示路径的绘制方式。有以下属性：

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

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

8. 文本

语法：

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

以上就是一些常用的绘制 SVG 图形的标签，当然，还有很多标签，例如 <a> 标签建立一个连接，<defs> 建立一个容器，类似 <template>。但是这些标签繁杂难记，不必刻意去记忆，需要时查阅手册即可，使用熟练即可记住。

三、SVG 特效

由于这些属性都非常复杂难记，所以不会详细讲解，仍然建议遇到时查手册即可。

1. 滤镜

SVG 大部分特效都是通过滤镜完成的。

<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" />
      <!--与图像结合的滤镜-->
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

2. 渐变

渐变分线性渐变与放射渐变，与 CSS 类似。

线性渐变

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

放射渐变

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" 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>

这里的 <stop> 表示渐变停止的位置。offset 表示偏移量，stop-color 表示停止渐变后的颜色。

3. stroke

stroke，意为行程

stroke 有以下属性：

stroke
stroke-width
stroke-linecap
stroke-dasharray

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>

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>

定义 path 绘制的线条的终端的样式，butt 是会把两端截掉一点，round 是半圆平滑，类似于 border-radius: 50%，square 是方形。

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

g 标签，用于把元素组合的标签

结语

实际应用中，美工会将设计好的 SVG 图片转换为 XML 代码，开发时直接复制过来使用，若有什么可以修改的，找到相关参数修改即可。

复杂难记的属性可以翻阅手册，使用多了便会记住。

SVG 基础属性与应用

前言

一、HTML 中使用 SVG

1. embed 标签

2. object 标签

3. iframe 标签

4. SVG 代码

二、SVG 相关标签与属性

1. 矩形

2. 圆形

3. 椭圆

4. 直线

5. 多边形

6. 折线

7. 路径

8. 文本

三、SVG 特效

1. 滤镜

2. 渐变

线性渐变

放射渐变

3. stroke

stroke

stroke-linecap

stroke-dasharray

结语

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读