放大 8 倍后的所有 SVG 图像资源

• 网格格子等同于 1px, 在 @2x 下会自动渲染得更清晰一些。
• 与用 background-position 实现的 CSS sprite 类似，多个矢量图形也被放置到同一个 svg 文件中以减少对服务器的请求。本页所有矢量图形都放置在 i.svg 中，以第一个图像为例，请求 i.svg#aws 时会返回 SVG 文件中的 <g id="aws">...</g> 部分。
• 对于 Safari, Edge, Chrome 等 webkit 核心的浏览器，本页所请求的图像资源只有一个。但是 Firefox 仍然将 i.svg#a i.svg#b 视作不同资源。
• 非矢量图形也可以内嵌在 SVG 中，例如 i.svg#fisio
• 矢量图形体积都非常小，如果不算那张内嵌的非矢量图形，本页所有图像大小总和约为 109KB, 且还有很大压缩空间，在使用 Apache2 Deflate 压缩传输时，下载量约 28KB.
• 切换系统为深色模式可以查看图标在深色背景下的效果。
• SVG 可以和 CSS 一样用渐变绘制，这里 有一个使用渐变的参考。

0.2KB

0.7KB

0.6KB

0.6KB

0.3KB

0.9KB

0.5KB

0.2KB

0.2KB

0.2KB

0.2KB

0.2KB

0.4KB

2.3KB

0.8KB

0.5KB

0.4KB

0.8KB

0.1KB

0.8KB

0.7KB

0.4KB

0.5KB

1.1KB

0.4KB

0.4KB

0.9KB

0.2KB

0.5KB

1KB

0.3KB

0.5KB

0.5KB

0.2KB

1.8KB

0.4KB

0.8KB

1KB

0.2KB

0.1KB

0.2KB

1.5KB

0.8KB

0.4KB

1.5KB

1.7KB

0.6KB

0.6KB

1.4KB

0.5KB

1.6KB

2.1KB

2.1KB

1.9KB

1KB

1.2KB

0.7KB

1.7KB

0.5KB

0.6KB

0.3KB

1.1KB

1.1KB

0.2KB

0.6KB

0.4KB

0.7KB

0.6KB

0.9KB

0.5KB

0.6KB

2.1KB

0.4KB

2.5KB

0.9KB

0.6KB

0.4KB

0.4KB

0.9KB

0.6KB

0.4KB

0.1KB

0.4KB

0.4KB

0.3KB

0.1KB

1.1KB

0.2KB

0.1KB

0.3KB

0.7KB

0.2KB

0.2KB

0.4KB

0.7KB

0.6KB

0.4KB

1.1KB

0.4KB

0.7KB

1.5KB

0.5KB

1KB

0.7KB

0.8KB

1.7KB

0.4KB

0.1KB

0.1KB

0.1KB

0.1KB

0.1KB

0.1KB

0.1KB

0.1KB

0.1KB

0.1KB

0.1KB

0.1KB

0.3KB

0.3KB

1.8KB

1.2KB

1KB

0.5KB

0.3KB

0.3KB

0.4KB

0.6KB

0.2KB

0.3KB

0.4KB

0.3KB

0.7KB

0.5KB

0.8KB

0.5KB

0.6KB

0.3KB

0.7KB

0.4KB

1.2KB

0.3KB

0.5KB

0.4KB

1.7KB

0.2KB

0.3KB

0.3KB

0.4KB

0.2KB

0.5KB

0.2KB

0.5KB

0.2KB

0.2KB

0.4KB

0.9KB

0.3KB

0.4KB

0.4KB

0.5KB

0.5KB

0.4KB

0.2KB

0.2KB

0.6KB

0.2KB

0.6KB

0.5KB

0.9KB

0.2KB

0.4KB

0.3KB

0.2KB