canvas
- canvas 能做什么
- 使用场景
- 原理
svg icon-font

显示图像的方式

SVG、Image、Background-image、Iconfont、canvas SVG vs Image, SVG vs Iconfont

图标库

remixicon

SVG

svg: 可缩放矢量图形，可以无限放大而不失真。

元素和属性

xml

<svg width="100" height="40"  viewBox="0 0 48 48">

元素

g use path mask
defs：在 <defs> 中定义需要重复使用的元素，用 id 标识元素，并通过 <use> 使用
g：group，组合多个元素，并将变换、样式应用到这些元素上
symbol：类似于 g
use：实例化已经定义的元素
会被 <use> 上设置的值覆盖的属性有：x y width height href 其他属性不会被 <use> 上的值覆盖，当属性未定义时，会使用 <use> 上设置的属性值
marker:

属性

viewBox preserveAspectRatio

svg 渲染的尺寸由 width 和 height 决定；

viewBox 设置了画布的尺寸和位置，所有的元素的尺寸和位置都以画布为参考对象，所有元素最终显示的尺寸和位置按照viewBox的属性和 svg 设置的 width 和 height 等比例缩放和平移；

preserveAspectRatio 指示当 svg 的 width 和 height 值与 viewBox 的宽和高不是等比例时，svg 如何对齐、缩放。除了 <image> 元素的其他元素，如果没有设置 viewBox ，那 preserveAspectRatio 也无效。

fill

React + svg

jsx

const WaitApprovIcon = (props: React.SVGProps<SVGSVGElement>) => {
  const svgProps = useSvgProps(props);
  return (
    <svg
      width="30"
      height="30"
      viewBox="0 0 30 30"
      {...svgProps}
      xmlns="http://www.w3.org/2000/svg">
      <g fill="none" fillRule="evenodd">
        <circle fill="#F0F0F0" cx="15" cy="15" r="15" />
        <circle fill="#BFBFBF" cx="15" cy="15" r="12" />
        <circle fill="#FFF" cx="12" cy="15" r="1.5" />
        <circle fill="#FFF" cx="18" cy="15" r="1.5" />
      </g>
    </svg>
  );
};

vue+svg

svg-sprite-loader: svg 雪碧图

样式修改

svg path {
    fill:inherit
}
// 或者
svg path {
   fill:currentColor
}

参考

理解SVG viewport,viewBox,preserveAspectRatio缩放- 张鑫旭 SVG在线压缩合并工具

SVG 中 path 定义

在SVG中，路径（Path）元素用于定义二维图形的路径。路径数据通常使用d属性进行指定。路径数据由一系列的命令和参数组成，这些命令告诉浏览器如何在画布上移动和绘制线条或曲线。

以下是一些常见的SVG路径命令和参数：

M (moveto):
- 移动到指定的坐标位置，不绘制直线。例如，M 10 10 表示将游标移动到坐标 (10, 10)。
L (lineto):
- 从当前坐标位置绘制一条直线到指定的坐标位置。例如，L 20 20 表示绘制一条直线到坐标 (20, 20)。
H (horizontal lineto):
- 绘制一条水平线到指定的x坐标位置。例如，H 30 表示绘制一条水平线到x坐标30。
V (vertical lineto):
- 绘制一条垂直线到指定的y坐标位置。例如，V 30 表示绘制一条垂直线到y坐标30。
C (curveto):
- 绘制三次贝塞尔曲线。命令后面跟着6个参数，依次是两个控制点和一个终点。例如，C 10 10, 20 20, 30 10 表示绘制一条三次贝塞尔曲线。
S (smooth curveto):
- 绘制平滑的三次贝塞尔曲线。它根据前一个路径段的情况来自动生成控制点。例如，S 40 10, 50 20 表示绘制一条平滑的三次贝塞尔曲线。
Q (quadratic Belzier curve):
- 绘制二次贝塞尔曲线。命令后面跟着4个参数，依次是一个控制点和一个终点。例如，Q 10 10, 20 20 表示绘制一条二次贝塞尔曲线。
T (smooth quadratic Belzier curveto):
- 绘制平滑的二次贝塞尔曲线。它根据前一个路径段的情况来自动生成控制点。例如，T 30 20 表示绘制一条平滑的二次贝塞尔曲线。
A (elliptical Arc):
- 绘制弧线。命令后面跟着7个参数，依次是椭圆弧的半径、旋转角度、大/小弧标志位、方向位和终点坐标。例如，A 5 5 0 0 1 50 50 表示绘制一条椭圆弧。
Z (closepath):

封闭路径，即从当前点绘制一条直线到起始点，形成一个闭合的路径。

这些命令可以组合在一起，以创建各种形状和路径。在SVG中，路径数据是一个字符串，您可以使用这些命令和参数来构建自定义路径，描述您想要的图形。

图像 | svg 处理工具

压缩图像，Minify PNG, JPEG, GIF, SVG and WEBP images with imagemin
- image-webpack-loader
svg 压缩优化
- svgo svgo简介
- SVGOMG
- mini-svg-data-uri: svg 编码为utf8，替换特殊字符
svg 转换为字体
- font-carrier：svg 转换为字体的 npm 包
- iconfont-webpack-plugin：svg 转换为字体
  css
```
a:before {
  font-icon: url('./account.svg');
}
```
- icon-font-loader：自动将 svg 转换成字体图标的 Webpack loader
  css
```
.select:after {
  icon-font: url('../icons/arrow-down.svg');
  color: #666;
}
```
- svg2ttf：svg 转换为 TTF format

使用SVG构建你自己的图标库使用 font-carrier 自动生成字体

iconfont

以自定义字体的形式使用图标，如：

html

<span class="iconfont eye"></span>
<style>
.iconfont {
  @font-face {
    font-family: 'iconfont';
    src: url('./fonts/iconfont.eot'); /* IE9 */
    src: url('./fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/iconfont.woff') format('woff2'),
    url('./fonts/iconfont.woff') format('woff'), /* chrome、firefox */
    url('./fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('./fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  }
  .iconfont {
    font-family: "iconfont";
    font-size: 16px;
    font-style: normal;
  }
}
</style>

ie下面渲染不出 unicode

记得使用16进制unicode的时候加上;号，否则ie无法将它解析。10进制的没这个问题。现在大部分字体都是使用16进制标志的，主要是为了方便移动端，还有css3的那种写法。

参考 font-face iconfont 记录

canvas

canvas教程-mdn canvas 画分形图

emoji

unicode与emoji
String.fromCodePoint str.codePointAt

SVG ​

元素和属性 ​

vue+svg ​

参考 ​

SVG 中 path 定义 ​

图像 | svg 处理工具 ​

iconfont ​

canvas ​

emoji ​

SVG