踏足SVG | 深入浅出全方位介绍SVG的功能及特性 - 基础篇(一)

YongCode
1,361 阅读7分钟

前言

本篇文章作为深入浅出全方位介绍SVG的功能及特性的开篇，主要介绍了什么是 SVG,SVG的发展历史及SVG的部分特性。

整个系列的知识点基本已经归纳完毕，具体大纲如下，后面会随文章的更新陆续替换成文章链接。

  • 基础篇(一) - 主要介绍什么是SVG、发展历史及如何引入和使用
  • 基础篇(二) - 基本图形的使用及部分容器的元素的介绍及使用
  • 基础篇(三) - 纹理、裁剪、蒙版和标记及渐变
  • 滤镜篇(一) - 滤镜的介绍及部分滤镜的使用
  • 滤镜篇(二) - 滤镜的混合、矩阵变换、映射、光源滤镜
  • 动画篇 - SMIL Animation

系列文章

踏足SVG | 深入浅出全方位介绍SVG的功能及特性 - 基础篇(二)

踏足SVG | 深入浅出全方位介绍SVG的功能及特性 - 基础篇(三)

踏足SVG | 深入浅出全方位介绍SVG的功能及特性 - 基础篇(四)

踏足SVG | 深入浅出全方位介绍SVG的功能及特性 - 基础篇(五)

什么是SVG

可缩放矢量图形，即SVG，是W3C XML的分支语言之一，用于标记可缩放的矢量图形。目前SVG在Firefox、Opera、Webkit浏览器、IE等主流浏览器中已经大部分支持。

SVG是一种XML语言，类似XHTML，可以用来绘制矢量图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变（be transformed）、合成、或者通过滤镜完全改变外观。

SVG 的发展历史

  • 1998 年 Microsoft 推出了一种基于 XML 的矢量标记语言 ( VML )
  • 1999 年 2 月由 the World Wide Web 提出首个草案
  • 随后的两年中提出了 6 份草案，认可和支持度不断增加
  • 2003 年确定了 SVG 1.1
  • 2018 年 SVG 2.0 问世

SVG 的特点。与 Canvas 的差异比较

SVG 的特点

  1. SVG 是一种使用 XML 描述 2D 图形的语言。
  2. SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
  3. 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 的特点

  1. Canvas 通过 JavaScript 来绘制 2D 图形。
  2. Canvas 是逐像素进行渲染的。
  3. 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较

  1. Canvas 依赖分辨率，SVG 不依赖分辨率。
  2. Canvas 不支持时间处理，SVG 支持事件处理
  3. Canvas 每次渲染都要清除画布重新渲染整块画布，SVG 只要修改对应元素的属性，渲染由浏览器自主完成
  4. 在图形复杂度低的情况下，SVG 与 Canvas 差不多，图形复杂的越是复杂，Canvas 的渲染速度越优于 SVG 。(因为 SVG 毕竟是 DOM ,开销大。而 Canvs 每一帧图像都是直接将绘图指令发给 GPU 进行绘制)
  5. Canvas 可以以 .png 或 .jpg 格式保存结果图像

SVG 兼容和当前规范

SVG 规范

目前使用的规范是 SVG 1.1 和 SVG 2.0 。SVG2.0正在制定当中，它采用了类似CSS3的制定方法，通过若干松散耦合的组件形成一套标准。

SVG 兼容性

大部分浏览器都已经支持了 SVG ,但是不同的浏览器直接依然存在使用的差异，具体可以查看 Can I use

矢量坐标与定位

与 Canvas 一样 SVG 也有它自己的画布，与 canvas 不同的是，SVG 的大小或长度是相对的。可以根据调整画布和 viewBox(视口)的比例来调整。

<h4>画布是 200*200 px,视口 200*200 </h4>
<svg class="border" width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="80" fill="green" />
</svg>
<br/>
<h4>画布是 200*200 px,视口 400*400 </h4>
<svg class="border" width="200" height="200" viewBox="0 0 400 400">
  <circle cx="100" cy="100" r="80" fill="green" />
</svg>
<br>
<h4>画布是 200*200 px,视口 400*400, 视口起始点坐标-90 -90 </h4>
<svg class="border" width="200" height="200" viewBox="-90 -90 400 400">
  <circle cx="100" cy="100" r="80" fill="green" />
</svg>
<br/>
<h4>画布是 200*200 pt,视口 400*400 </h4>
<svg class="border" width="200pt" height="200pt" viewBox="0 0 400 400">
  <circle cx="100" cy="100" r="80" fill="green" />
</svg>

在 200 * 200 的画布上设置 viewBox 的长宽也为200 * 200，展示一个 半径 80 的圆

<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="80" fill="green" />
</svg>

viewBox_1.PNG svg 的 width 和 heigt 设置的是画布的大小。viewBox 是视口显示区域的大小。

如果一个长宽 200 的画布，显示一个长宽 400 的区域。那么显示的内容，相对与 200 的画布中的内容就小了一倍,这里由于半径小了一半，所以整体面积变为原来的 1/4

<svg width="200" height="200" viewBox="0 0 400 400">
  <circle cx="100" cy="100" r="80" fill="green" />
</svg>

viewBox_2.PNG

规定视口的起始点为(-90,-90)。则小圆就到中间去了。

<svg class="border" width="200" height="200" viewBox="-90 -90 400 400">
  <circle cx="100" cy="100" r="80" fill="green" />
</svg>

viewBox_3.PNG

为什么会变小

首先我们需要了解到 viewBox 是什么。

基本上，在 SVG 文档中的1个像素对应输出设备（比如显示屏）上的1个像素。

通过定义 viewBox 属性可以控制显示的区域( x, y, w, h)。当设置了这个属性的时候，实际上就定义了一个 SVG 坐标系，在当前 SVG 元素内定义的图形都会以这个 SVG 坐标系的基础上绘制。

  • x: 起始 x 位置
  • y: 起始 y 位置
  • w: 视图容器的宽
  • h: 视图容器的高

上文中说的画布，也就是给 SVG 定义的 width 和 height,实际上定义的是 SVG 块的设备像素，如宽 200px 高 200px。其实还可以赋值非px的单位，如 pt 等。

但是不管画布的大小多大，也不管画布的单位是什么。画布的最终的设备像素会和 viewBox 的定义值进行结合，生成一个 SVG 坐标系。可以理解为 SVG 坐标系的单位刻度在此刻确认

图一中用 200 * 200 的画布展示了 200 * 200 的大小。在 SVG 坐标系当中 1刻度单位就代表了 1 设备像素。半径 r:80, 对应 80 个刻度单位， r 对应的设备像素就 80

图二中用 200 * 200 的画布展示了 400 * 400 的大小。在 SVG 坐标系当中 1刻度单位就代表了 0.5 设备像素。半径 r:80, 还是对应 80 个刻度单位， r 对应的设备像素就 40。在画布上的结果就是面积变为原来的 1/4。

画布的大小与 viewBox 的大小关系是 SVG 可进行缩放的关键。这种映射关系被称为用户坐标系统。除了缩放之外，坐标系统还可以旋转、倾斜、翻转。默认的用户坐标系统1用户像素等于设备上的1像素（但是设备上可能会自己定义1像素到底是多大）

SVG 的引入及使用

SVG 的引入及使用有两种方式

  • 文档内通过 svg 标签定义
  • 引入外部 svg 文件
    • 在<svg> 标签内通过<use>标签引入
    • <embed> 标签引入
    • <object> 标签引入
    • <image> 标签引入
    • <iframe> 标签引入

需要注意的是目前微信小程序无法使用 SVG, 支付宝小程序可以使用 image 标签映入 .svg 文件进行展示

embed 和 object 两者一致，这两个标签之前是为了解决浏览器兼容问题。目前现代浏览器都支持了这个两个标签。表现上都是一样的。

引入外部 svg 文件

浏览器可以直接打开 SVG 文件，但是如果你想在 HTML 展示 SVG 文件需要容器去装一下

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 id="ppt" t="1633915688232" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3051" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M658.58 63.94H269.26c-78.06 0-141.33 63.28-141.33 141.33v612.95c0 78.06 63.28 141.33 141.33 141.33h485.49c78.06 0 141.33-63.28 141.33-141.33V301.44c0-31.83-12.64-62.35-35.15-84.85l-117.5-117.5a120.017 120.017 0 0 0-84.85-35.15z" fill="#F98950" p-id="3052"></path><path d="M860.93 216.59l-117.5-117.5a120.001 120.001 0 0 0-61.75-32.9v131.88c0 41.87 33.94 75.81 75.81 75.81h135.37a119.93 119.93 0 0 0-31.93-57.29zM556.02 348.38H380.37c-13.25 0-24 10.75-24 24v302.74c0 13.25 10.75 24 24 24s24-10.75 24-24V595.6h151.65c68.16 0 123.61-55.45 123.61-123.61s-55.45-123.61-123.61-123.61z m0 199.22H404.37V396.38h151.65c41.69 0 75.61 33.92 75.61 75.61s-33.92 75.61-75.61 75.61z" fill="#F26C38" p-id="3053"></path><path d="M556.02 336.38H380.37c-13.25 0-24 10.75-24 24v302.74c0 13.25 10.75 24 24 24s24-10.75 24-24V583.6h151.65c68.16 0 123.61-55.45 123.61-123.61s-55.45-123.61-123.61-123.61z m0 199.22H404.37V384.38h151.65c41.69 0 75.61 33.92 75.61 75.61s-33.92 75.61-75.61 75.61z" fill="#FFFFFF" p-id="3054"></path></svg>
  1. 在 svg 标签内通过 use 标签去引入
<!-- 用这个方法引入的话需要给 PPT.svg 的 svg 标签上绑定一个id,不然拿不到 -->
<svg  width="200" height="200" viewBox="0 0 200 200" >
  <use xlink:href="../static/PPT.svg#ppt" />
</svg>
  1. embed 标签
<embed
  src="../static/PPT.svg"
  width="300"
  height="100"
  type="image/svg+xml"
/>
<!-- svg 格式会随容器自适应大小 -->
<embed
  src="../static/PPT.svg"
  width="300"
  height="200"
  type="image/svg+xml"
/>

自适应

  1. object 标签 (不推荐)
<object
  data="../static/PPT.svg"
  width="300"
  height="100"
  type="image/svg+xml"
></object>
<!-- svg 格式会随容器自适应大小 -->
<object
  data="../static/PPT.svg"
  width="300"
  height="200"
  type="image/svg+xml"
></object>
  1. img 标签
<img src="../static/PPT.svg"  width="300" height="100" alt="">
<!-- svg 格式会随容器自适应大小 -->
<img src="../static/PPT.svg"  width="300" height="200" alt="">
  1. iframe 标签(不推荐)
<!--内容不会随容器自适应，超出部分以滚动条的方式展示 -->
<iframe src="../static/PPT.svg" width="300" height="100"> </iframe>
<iframe src="../static/PPT.svg" width="300" height="200"> </iframe>

不自适应

写在最后

如果有出现问题或者错误，还望指正。我会尽快把全部内容更新完毕。

参考资料

参考来源 - w3school

参考来源 - w3_SVG

参考来源 - w3_SVG2

avatar
文章
阅读
粉丝
相关推荐
踏足SVG | 深入浅出全方位介绍SVG的功能及特性 - 基础篇(三)
648阅读
 · 
5点赞
踏足SVG 深入浅出全方位介绍SVG的功能及特性 - 滤镜篇（一）
1.2k阅读
 · 
7点赞
SVG高级应用及动画
3.7k阅读
 · 
32点赞
踏足SVG 深入浅出全方位介绍SVG的功能及特性 - 基础篇（四）
927阅读
 · 
4点赞
【SVG】SVG的夺命利器——path
2.7k阅读
 · 
40点赞
你可以学会的svg动画(SMIL)
883阅读
 · 
13点赞
svg 详解
1.4k阅读
 · 
5点赞
夹吃灰，推荐：实现 SVG 动画的 5 个 JavaScript 库~
7.7k阅读
 · 
56点赞
SVG 绘图
1.0k阅读
 · 
2点赞

友情链接：