SVG 信息汇编

关于 SVG 的大量信息。

如何使用 SVG

这些是概述文章，涵盖了与 SVG 相关的许多内容。为什么要使用它以及如何使用它的基础知识。主要包括：<img>、background-image、<svg>、<iframe> 和 <object>/<embed>。

• 使用 SVG 由我撰写
• SVG on the Web — A Practical Guide 由 Jake Giltsoff 撰写。
• 分辨率独立 使用 SVG 由 David Bushell 撰写（以及他的使用 SVG 第 1 部分 和 第 2 部分）
• SVG 在 MDN 上
• 如何将可缩放矢量图形添加到您的网页 由 Craig Buckler 撰写
• SVG 工作流程 为设计师提供 by Dan Mall
• Ezequiel Bruni 的 SVG 最终指南

SVG 作为图标系统

SVG 特别适合图标。除了分辨率独立性和样式可能性之外，图标的形状通常很简单，因此文件大小很小，可以像精灵图或图标字体一样组合到单个 Web 请求中。

我已经写了很多关于这个

• 使用 SVG 精灵图的图标系统
• 整个想法基本上是基于 SVG 模板
• SVG 精灵图与图标字体 – Ian Feather 有一些很好的理由 选择 SVG 而不是图标字体。
• 使用 <symbol> 用于图标
• 使用 <use> 与外部源. 因为它缓存得更好。问题在于 IE，但 SVG4Everybody 修复了这个问题。或者，只需 通过 Ajax 获取整个 SVG 块 并将其添加到文档中 (小型库 用于此目的)。Microsoft Edge 可能正在修复此问题。
• 级联 SVG fill 颜色（即使图标颜色匹配它们附近的文本颜色）
• 有两种方法来调整画板大小…使它们都相同（或至少具有相同的纵横比）或裁剪到边缘。这里有一篇 比较文章。

以及其他人的更多信息

• SVG 的任何部分都可以内联使用，也可以作为图标使用，但是 这里有一些 Baptiste Briel 制作的不错的现成图标，并提供代码点击界面。 邪恶图标 是另一个图标集，它附带了用于集成的一些代码。
• SVG 图标 FTW 由 Oleg Solomka 撰写
• Google 说 这样做。
• iconmelon: “用于 Web 的 SVG 图标库” – 其中一些集合利用了 SVG 的独特之处，例如多色，这对于图标字体来说 非常困难但有可能实现。
• Thomas Fuchs “放弃了图标字体，转而使用内联 SVG” 并讨论了一些构建过程内容，以帮助自动化工作。
• SVG 精灵图创建技术的概述 by Sara Soueidan
• 在 localStorage 中缓存 SVG 精灵图 by Osvaldas Valutis
• SVG 精灵图和图标系统很棒 by Joni Trythall
• 当您多次使用 <use> 用于同一图标时，您可以通过将不同的 fill 应用于父元素并让其级联来为每个图标着色。为了使该方法有效，您需要在形状元素上省略填充，这意味着您主要限于单色图标。 您可以使用两种颜色，通过利用 currentColor。您还可以 使用本机 CSS 变量 增强功能。
• 使用 CSS 样式 SVG <use> 内容 by Sara Soueidan
• Florent Verschelde 指出了一些 跨浏览器细微差别。
• WordPress 的计划 将图标字体迁移到 SVG

所有这些都基于 SVG 内联系统，这是一种很棒的方式，但如果您使用的是 SVG 作为 CSS 背景图像…

• Filament Group 的 Grunticon: 文章、仓库、浏览器内工具。它将 SVG 文件夹转换为 SVG 数据 URI，然后从那里回退。Grunticon 2 可以渐进增强到内联 SVG。您还可以从内联 SVG 开始，并 回退到 Grunticon。
• 您无法通过 SVG 背景图像动态调整填充颜色（Grunticon 建议只需制作多个版本，因为 GZip 对此非常有效）。但 Zach Schnackel 提供了 一种巧妙的技术，该技术使用 CSS 预处理器来获取文件，将其转换为数据 URI，然后替换填充颜色。
• 如果您想为用作背景图像的 SVG 着色，这有点棘手，因为您无法直接在 CSS 中控制它。Noah Blon 提供了一些技术。

请记住，如果您正在寻找要使用的 SVG 图标，任何矢量都可以使用。您不必专门寻找“SVG 图标”。即使使用图标字体，您也可以在本地激活该字体，键入您想要的图标字符，将其转换为轮廓，然后将其保存为 SVG。

以下是一些导出到内联 SVG 精灵图的 Web 应用程序

• IcoMoon
• Fontastic (公告)
• Smarticons (和 Glyph)
• font-blast 将字体中的图标提取到单个 SVG 中

SVG 形状语法

• 基本形状 在 W3.org 上
• <path> 元素有自己的微语法。Chris Nager 在 定制 SVG 参考 中介绍了该语法。
• Steven Bradley 还通过一个简单的教程介绍了路径“线命令”。
• Adam Pearce 通过交互式演示展示了路径语法是如何工作的，包括复杂的立方贝塞尔曲线是如何工作的。
• 演示 Sten Hougaard 通过操纵 <path> 数据。
• 基本形状 by J. David Eisenberg
• 入门可缩放矢量图形 (SVG) by Aaron Lumsden。
• 如何创建 SVG 箭头和多边形标记（<marker> 元素） by Steven Bradley。
• Brent Jackson 的 GUI 工具 用于可视化/创建路径语法。

SVG 模式

在 SVG 中，您可以使用颜色和渐变填充形状，但您也可以指定 <pattern> 来填充。<pattern> 是其他 SVG 元素的重复组，因此它有点像在您的 <svg> 中放置一些 <svg>。

• SVG 模式 by Matthew Bystedt
• 如何使用 SVG 模式 by Joni Trythall
• SVG 模式图库 by Philip Rogers
• SVG 填充模式 by Jakob Jenkov
• 模式 在 MDN 上
• PatternBolt (简单的 SVG 模式集合)。
• SVG 模式生成器 (很有趣！)
• Plain Pattern: 基于 SVG 的无缝模式制作器
• 这并不是真正关于 <pattern> 的，但 SVGeneration 创建 SVG 用于用作背景图像，其中一些重复，就像模式的想法。
• 使用图像、属性和嵌套构建更复杂的模式 by Steven Bradley。
• 如何导出 SVG 模式 by James George
• PatternFills by Irene Ros。

SVG 尺寸（视口、视区和 preserveAspectRatio）

你现在正在查看的浏览器窗口就是一个视口。如果页面上有一个 <iframe>，它也会有自己的视口。<svg> 也是如此！不过有点棘手，因为 SVG 还有个 `viewBox` 属性，它是 SVG 元素实际绘制的空间。`viewBox` 属性结合 `preserveAspectRatio` 属性，决定了 SVG 如何以及在何处在视口中绘制。

• Sara Soueidan 的《理解 SVG 坐标系和变换》
  • (第一部分) – 视口、视区和 preserveAspectRatio（带有一个不错的演示 a nice demo）
  • (第二部分) – transform 属性
  • (第三部分) – 建立新的视口
  • 使用 viewBox 属性进行 SVG 图像艺术指导
• SVG viewBox 和视口概览 Joni Trythall
• SVG 视口和视区 Jakob Jenkov
• SVG 中的 preserveAspectRatio 概览 Joni Trythall
• preserveAspectRatio 在 MDN 上
• SVG 和 preserveAspectRatio 属性 Giovanni DiFeterici
• SVG 画布、坐标系和视口 Steven Bradley
• 使用 canvas 修复 Internet Explorer 中 SVG 的缩放 Nicolas Gallagher.

SVG 渐变

SVG 中的 `fill` 只是一个属性（或应用于 CSS），而 SVG 渐变实际上是一个特殊的元素：`<linearGradient>`。CSS 也有渐变，但是由于 SVG 渐变（可以）在 DOM 中，因此在某些情况下，它们更容易操作。

此外，它们在 IE 9 中有效，而 CSS 渐变则无效。

• Joni Trythall 的《SVG 渐变入门》 以及她的 后续文章，指出了一些关于 `spreadMethod` 和 animate `values` 属性的怪癖。
• Joni Trythall 的《动画 SVG 渐变》
• Jakob Jenkov 的《SVG 渐变》
• Lea Verou 的《CSS 渐变比 SVG 背景更快》
• 使用 SVG 进行线性插值颜色 (Gouraud 阴影)
• Alex Walker 的这篇文章 虽然有点老旧，而且链接过多，但其中包含了一些不错的渐变入门信息。
• SVG 渐变可以通过使用 stop-opacity 来设置不透明度，正如 Matthew Miller 所展示的。
• SVG Radiant 是一个非常好的 SVG 渐变构建工具。如果你将 (2) 点从右下角向上拖动，你可以很好地感受到 pad/repeat/reflect 之间的区别。这个工具也相当不错，它不仅可以输出你构建的渐变的 SVG 代码，还可以输出 CSS 或 canvas 代码。 还有另一个，由微软提供。 这个 可能过于简单。
• Steven Bradly 的《将 SVG 渐变应用于填充或描边》
• Jake Albaugh 的《清理重复的 SVG 渐变停靠点并移至 defs》 (工具)

SVG 和片段标识符

SVG 中的 <use> 元素允许你复制 SVG 的一部分并在其他地方使用。但这只适用于内联 SVG。如果你想在 CSS（`background-image`）或 HTML（`<img>`）中使用 SVG 文件中的特定部分，则需要片段标识符。

• SVG 片段标识符的工作原理 我
• 使用片段标识符改进 SVG 雪碧图 Peter Gasston
• simurai 思考为什么这会如此有用：SVG 堆栈
• 在 <img> 和 `background-image` 中演示它
• 规范演示
• 我可以使用… 支持

SVG 描边

SVG 都是关于绘制形状的。就像在 Adobe Illustrator 这样的设计程序中一样，你也可以将 **描边** 应用于这些形状以及填充。

• Joni Trythall 的《使用 SVG 描边属性》 （例如 `stroke-linecap`、`stroke-linejoin`、`stroke-dashoffset` 等）
• Jakob Jenkov 的《SVG 描边》
• W3.org 上的《描边属性》
• 一种流行的动画技术是“绘制”形状的描边。
  • SVG 线动画的工作原理
  • Jake Archibald 的《SVG 中的动画线绘制》
  • SVG 绘制动画
  • 多边形功能设计：SVG 动画用于娱乐和盈利
  • Walkway.js – “一种为由线和路径元素组成的 SVG 图像动画提供简单方法。”
  • Lazy Line Painter (jQuery 插件)
  • vivus
• SVG 描边通常相对于 SVG 的视口进行缩放，但它们不必如此，你可以通过 `vector-effect: non-scaling-stroke;` 保持描边的宽度不变。（演示）

SVG 和文本

SVG 有一个 <text> 元素，它允许你向图形中添加文本（你猜对了）。真实的、原生网页文本，而不是字符轮廓，这 1）使其更实用（可选择、可搜索） 2）使其更具可访问性 3）保持尺寸较小。就像普通的网页文本一样，你可用字体受到给定浏览器/平台/版本中可用的字体或通过 `@font-face` 加载的字体的限制。

• SVG `text` 和小型、可缩放、可访问的排版设计 我
• SVG 滤镜应用于文本 Chris Scott
• <text> 的子元素 <tspan>，你可以用它来影响较大文本部分的样式。 SVG tspan 元素 Jakob Jenkov
• SVG 中的文本 (text, tspan, tref) Matthew Bystedt。tref 很有意思 – 它允许你定义一小段文本以便稍后使用，有点像 <defs>、滤镜、渐变、use 等中的任何内容。
• 使用 SVG 轻松垂直居中文本！ Lea Verou
• 跨浏览器 SVG 文本路径 Zoltan Hawryluk
• SVG 文本元素 Sebastian Gutierrez: “为什么它很重要以及我们在 D3.js 数据可视化中如何使用它”
• SVG 中的流式文本：前进一步，后退一步 Tavmjong Bah。SVG 1.1 无法换行文本（这是一个相当大的限制），但这应该在 SVG 2 中出现。
• SVG 文本使像 FitText 这样的想法更容易： Fitter Happier Text.
• Letterbolt：动画 SVG 字体。

动画 SVG

有 三种方法 来动画 SVG。CSS 和 SMIL 是“声明式”方法，当然 JavaScript 也可以做到。

SMIL

SVG 语法有一个专门的 <animate> 标签，尽管它有点复杂。这被称为 SMIL（同步多媒体集成语言），SVG 也在一定程度上扩展了它。

• 公平警告：SMIL 在 Internet Explorer 中从未得到支持，而 Blink 则有一个 “意图弃用” 警告。
• Sara Soueidan 的 SVG 动画 (SMIL) 指南。
• MDN 上的 SVG 动画与 SMIL
• 使用 SMIL，您可以将 <path>（或其他形状）动画到完全不同的坐标集（只要它具有相同数量的点），从而创建超级酷的形状变形效果。 Felix Hornoiu 的教程。
• SVG 形状变形的工作原理 由我撰写
• Noah Blon 的 SMIL 动画简介
• SMIL 动画集合
• Adam Guttentag 的使用 SVG、SMIL 和 CSS 的径向视差
• Adam Guttentag 的动画 SVG 文本消息视频叠加
• SMIL 不仅仅是 <animate />，还有 <animateTransform />。 演示。 MDN。
• Ryan Allen 的 SVG 动画简介

CSS

如果您使用内联 SVG，您还可以使用 CSS 针对 SVG（或其中的形状）进行样式设置并使用 CSS 动画进行动画。

• 我编写的使用 CSS 动画 SVG
• SVG 线动画的工作原理 由我撰写。Jordan Wade 也在 Code School 博客上制作了 一些线动画示例。
• SVG 故障 – 使用 SMIL 或 使用多个元素和 CSS 剪辑。
• Jonathan Suh 的使用 CSS 动画 SVG
• Noah Blon 使用 CSS 动画节日 SVG 图标
• Adam Coulombe 的使用 SVG 和 CSS 动画的交互式信息图表
• Sarah Drasner 的几种不同的方式在动画中使用 SVG Sprites

JavaScript

您也可以使用 JavaScript 来操作（从而动画）SVG。另请参阅下一节中的库。这些库通常具有动画功能。

• Brian Suda 的使用 SVG 动画矢量
• David Dailey 的使用 JavaScript 动画 SVG
• Mary Lou 使用 Snap.svg 的动画 SVG 图标 和 弹性 SVG 元素。
• Sebastiano Guerriero 的动画 SVG 图标 (Snap.svg)
• SVG 马戏团 – 用于构建（主要是循环）动画的浏览器内工具。它输出自己的自定义 JavaScript 来执行动画。它是 开源的。
• 这篇文章 介绍了如何通过 Velocity.js 完成 SVG 动画。 “Velocity.js 自动检测何时使用它来动画 SVG 元素，然后无缝地应用 SVG 特定属性，而无需修改代码”
• Greensock 也 执行 SVG 动画 (演示) 并 修复了通过 CSS 的 SVG 变换的一些问题。
• Alex Kaul 的 SVG Morpheus：“JavaScript 库，使 SVG 图标能够相互变形。”

其他

• 来自 Playground 的朋友为他们的主页创建了一些不错的 SVG 动画。他们 写了关于他们流程的博客，最终他们采用了比上述任何一种方法更定制化的逐帧方式。
• Kyle Conrad 在 动画 SVG: 回归 中介绍了矢量动画的尝试、磨难和方法。
• Sara Soueidan 的 SVG 动画现状
• Chris Gannon 的 SVG 的七个阶段

为了好玩，看看 Dennis Gaebel 的 SVG 动画集合。

SVG JavaScript 库

• D3.js (数据驱动文档) 由 Mike Bostock 编写
• Snap.svg (Dmitry Baranovskiy/Adobe 的新东西 – 类似于 SVG 的“jQuery”)(Sara Vieira 的入门指南)
• Raphaël (Dmitry Baranovskiy 的旧东西)
• Bonsai – “一个具有直观图形 API 和 SVG 渲染器的轻量级图形库。”
• SVG.js 由 Wout Fierens 编写
• Fabric.js (SVG-to-canvas & canvas-to-SVG) 由 Juriy Zaytsev 编写
• Two.js – “一个面向现代 web 浏览器的二维绘图 API。它与渲染器无关，使相同的 API 能够在多个上下文中绘制：svg、canvas 和 WebGL。”
• Paths.js – “为几何形状生成 SVG 路径”
• VLEX – “矢量布局表达式”
• jQuery，凭借其 DOM 操作能力，可以修改内联 SVG 属性，并且通常可以处理 SVG DOM，但它在创建和注入 <svg> 元素方面存在问题，因为它不使用正确的命名空间。解决方案：先将其放在 <div> 中。
• Ben Howdle 的 deSVG 通过 Ajax 获取内联 SVG 来替换 <img> SVG，因此您可以对其进行样式设置并执行所有可以使用内联 SVG 执行的酷炫操作。注意：需要两次请求。

使用 SVG 绘制图表

SVG 没有任何特定于图表的功能，但它有很多功能可以很好地用于创建图表。

• 如何在 SVG 中制作图表 我们展示了几种制作饼图、折线图、柱状图和散点图的方法。

还有许多功能齐全的库可以构建出很棒的图表。例如

• amCharts
• Highcharts

组织 SVG

就像有 HTML 标签来组织内容一样，SVG 中也有标签来组织图形。例如，<g>（组）标签类似于 <div>。它本身并没有太多意义，但它很有用，因为它意味着您可以对其进行样式设置并让这些样式影响整个组。

• Sara Soueidan 的 SVG 中的结构化、分组和引用 – <g>、<use>、<defs> 和 <symbol> 元素
• 我编写的 SVG `symbol` 作为图标的好选择
• Steven Bradley 的如何定义 SVG 内容以供重复使用 – defs、symbol 和 use 元素

SVG 和字体

• 曾经，@font-face 生成器会制作字体 SVG 版本。我认为这是 iPad 的某些生成版本所必需的。它并不是真正的独立格式，而是在 SVG 中嵌入的另一种字体格式，从而使其工作。我相信我们现在已经不再做这件事或讨论它了。
• SVG 和 OpenType 字体中的颜色 Johannes Lang

SVG 剪裁/蒙版

您可以绘制形状/路径来隐藏其他位于其内部/外部的形状/路径。

• CSS 和 SVG 中的剪裁 – clip-path 属性和 `clipPath` 元素 Sara Soueidan
• 使用剪裁蒙版和 CSS 动画 SVG Joe Howard
• 剪裁和蒙版 在 MDN 上
• SVG 非常适合 CSS border-image，因为 border-image 进行了大量的缩放和重复以完成其工作，而 SVG 擅长此类操作。
• 说到 border-image，它使用 9 切片（想想井字棋棋盘）缩放，这里有一个技巧 Dirk Weber 使用 4 切片缩放，其中“我们将能够在元素周围创建不规则形状的轮廓，并创建任意角样式。”
• Dirk 也写过 关于 9 切片缩放。
• Peter Hrynkow 在 使用黑白 PNG 作为 JPG 上的 SVG 蒙版 – 为了实现具有真正透明度的良好图像压缩。 ZorroSVG 是为此而设计的工具。
• Dirk Weber 以不同的方式呈现了相同的技术，即 将 Alpha 通道应用于 JPG
• 蒙版 SVG 动画 Nathan Gordon
• SVG 模式、旋转和剪裁路径 Adam Guttentag
• 演示 (万圣节快乐) Bear Travis 受 CJ Gammon 设计的启发。

SVG 生成工具

在网站上使用 SVG 的一种常见方法是拥有一个“包含许多 SVG 的文件夹”，您打算在整个网站中使用它们。出于性能原因，您不希望单独请求每个 SVG。这些生成工具以某种方式将它们组合在一起。或者，它们可以帮助您对 SVG 执行某些有用的操作。

浏览器工具

• IcoMoon Keyamoon（选择您想要使用的图标，仅以 SVG 雪碧图输出。将它们拖放到您自己的 SVG 中。保存项目以稍后更新。）
• Fontastic 也 输出 SVG 雪碧图
• Iconizr Joschi Kuphal (仓库)（结合了许多功能）

Grunt

• grunt-svgstore Fabrice Weinberg（将 SVG 文件夹组合成 SVG 雪碧图）。Gulp 版本。
• grunt-dr-svg-sprites 丹麦广播公司会生成 SVG 雪碧图以及 PNG 回退。
• grunt-svg-sprite Joschi Kuphal（将 SVG 文件夹组合成 SVG 雪碧图，并输出 CSS 预处理器）
• grunt-svg-modify – 由 yoskel 制作的 SVG 图像的宽度/高度/颜色变化。
• Grunticon Filament Group

Gulp

• gulp-svg-sprites Shane Osbourne（将 SVG 文件夹组合成 SVG 雪碧图）。Mike Street 的教程 使用此工具
• gulp-svgfallback Andrey Kuzmin 从 SVG 创建 PNG 雪碧图
• 使用 Gulp 和 Sass 创建 SVG 雪碧图 Mike Street
• 使用 Bower 和 Gulp 滚动您自己的 SVG 雪碧图 Alexander Synaptic

仅命令行

• SVG-Stacker Michael Schieben

获取 SVG 使用

有许多方法可以获取您需要的 SVG。

• 学习 SVG 语法。(查看部分)
• 学习使用矢量编辑软件。(查看部分)
• 从互联网下载矢量素材。记住，任何矢量都可以转换为 SVG（例如，您可能找到 .eps 或 .pdf，但其中包含矢量内容，因此在 Illustrator 中打开/操作，另存为 .svg）。
  • The Noun Project 上的所有内容都是 SVG
  • 库存照片网站通常有方法仅返回矢量搜索结果。（例如，Shutterstock 或 Vecteezy）
  • 记住字体是矢量的，因此图标字体是矢量的，因此图标字体集中的任何图标都可以是 SVG。（下载并激活字体，在 Illustrator 文档中输入该字体的字符，转换为轮廓，另存为 .svg）以下是 我 的一大堆图标字体。
  • SVGCuts (免费类别)
  • Pinterest 板
  • Foundry：“提供新一代矢量资产和无限可能性” by thoughtbot
  • SVG Porn（流行内容的 SVG 格式的徽标）

SVG 演示

• SVG Fancy Town: 我发现的展示 SVG 世界中一些酷炫或有趣内容的 Pens 集合。
• Codrops 有很多 不错的 SVG 演示
• SVG Wow
• Erik Dahlström 的 /svg/
• 通过 SASS 动态生成的 SVG + 3D 动画 RGB 立方体！ Lea Verou
• Patatap – Jonathan Brandel 使用您的交互动画 SVG 和音乐的超级有趣的演示。
• rafszul 的复杂 SMIL 动画 一只狼在奔跑。
• SVG 非常适合“响应式徽标”的概念。Joe Harrison 的 这些 是 SVG，但实际上更像是 CSS 雪碧图，因为它们是正在交换的完整图形。Jeremy Frank 有一篇博文 关于根据可用空间样式/隐藏/显示/移动 SVG 的部分。
• HalfTone.svg
  

  您是否怀念曾经打开报纸欣赏精美半色调黑白印刷品的日子？使用完全可缩放的 SVG 重现这种神奇体验（减去墨迹和纸张气味）。

SVG 滤镜

有 CSS 滤镜，允许模糊等常见操作。SVG 有自己的滤镜集（CSS 滤镜来自这里），其中包括这些常见操作，但也包含更多内容，包括更像是 Photoshop 滤镜的奇怪和独特的操作。SVG 滤镜可以应用于 HTML 内容和 SVG 内容。

• SVG 滤镜 (示例和演示工具) Jorge Aznar
• 动手实践：SVG 滤镜效果
• SVG 滤镜 Jakob Jenkov
• 使用 CSS 和 SVG 的跨浏览器滤镜 Peter Gasston
• 将 SVG 效果应用于 HTML 内容 在 MDN 上
• SVG 滤镜应用于文本 Chris Scott
• SVG 滤镜的乐趣 Alan Greenblatt
• HTML5 视频上的 SVG 滤镜 由 Paul Irish (工作演示)撰写。
• 用 SVG 滤镜增强数据可视化 由 Erik Hazzard 撰写
• SVG 滤镜 由 Mike Sierra 撰写
• SVG 基本知识/滤镜
• 您可以使用滤镜实现 方向模糊。以下是 Lucas Bebber 的 更多信息，以及 Ignacio Correia 的另外两个演示：鼠标移动 和 文本滚动。
• 使用 SVG 滤镜制作内嵌阴影 由 Tab Atkins 撰写
• SVG 滤镜的艺术及其强大之处 由 Dirk Webber 撰写。许多很酷的文本滤镜 收集在此。

数据 URI 和 SVG

内联 SVG 的一个优点是不需要进行网络请求。绘制 SVG 的信息就在那里。数据 URI（有时是“Base64”编码，有时是实际的 <svg> 语法（UTF-8））也实现了无请求渲染（这才是重点）。

• 可能不要 Base64 SVG – Base64 会使大小增加约 33%，并且可能不会像以前那样有效地进行 GZip 压缩。虽然您可能需要对其进行编码才能使其在 IE 中工作，这也会增加其大小……
• 您可以 选择多种方法 来编码数据 URI（以及一些出错的方式）。Taylor Hunt 写了一些内容 关于这个。
• 检查清单 Amelia Bellamy-Royds 关于 CSS 中 UTF-8 数据 URI 所需内容的清单。
• 浏览器内 Base64 编码器
• Grunticon 在 CSS 中输出 ASCII 编码 SVG。即 data:image/svg+xml;charset=US-ASCII,
• CLI 命令 获取文件的 Base64 版本（写入文件或剪贴板）。
• Compass（用于 Sass）具有 数据 URI 助手。
• 在 CSS 中设置背景 SVG 颜色（在 Sass 中进行 URL 编码）Philipp Kühn 撰写

SVG 和 CSS

CSS 可以影响内联 SVG 的大多数方面，但 SVG 也有自己的一组 CSS 属性。

• 属性列表（可能略有过时，因为它指的是 Presto）
• W3.org 上的 SVG 的样式属性
• SVG 样式 Dirk Schulze 撰写
• MDN 上的 SVG 和 CSS
• 使用简单的 CSS 操纵 SVG 图标 P.J. Onori 撰写
• 如果您使用的是内联 SVG, 您可以从 CSS 中目标元素, 但它们不太“了解”它们自己的 <svg> 父元素，因此您无法在其中使用不同的类名来影响特定的元素。您可以通过属性（如填充）向下级联，并且有一个 技巧可以获得两种颜色。
• 您可以应用转换到 SVG 元素本身，例如 transform="translate(2px, 3px)"，但 Charlie Marsh 发现 它的性能不如将 CSS 转换应用于父 HTML 元素，例如 style="transform:translate(2px, 3px)"。

SVG 和照明

• SVG 光源滤镜概览 Joni Trythall 撰写
• 添加光泽 – 使用滤镜进行照明
• MDN 上的 feDiffuseLighting

优化 SVG

在网络上使用之前，对图像进行优化非常明智。对于栅格图像，即使您已经保存了您觉得最小的、质量最低的图像，像 ImageOptim 这样的工具也可以在不影响质量的情况下进一步缩减文件大小。

SVG 也是如此！

• 优化 SVG 用于 Web 使用 是一个很好的文章，它逐步介绍了整理 SVG 文件的一些简单步骤。
• SVGO 是一个命令行工具（教程）用于优化 SVG。它有 一个 Grunt 任务 或一个 原生应用。 SVG NOW 是一个 Illustrator 插件，它使用它从 Illustrator 直接导出 SVGO 优化的 SVG。
• Kyle Foster 有很多关于 SVG 优化的信息，包括两个视频（一个，两个）和一个 幻灯片演示。
• SVG 优化：基础知识 Dudley Storey 撰写
• Todd Parker 提醒我们 SVG 可以很好地进行 GZip 压缩。重复信息是 GZip 的早餐，所以不用太担心。
• Scour – 一个 SVG 清理程序
• Peter Collingridge 创建了 SVG Optimizer。他提供了一个 上传和输出 版本，或者一个 浏览器内逐步 版本。
• 使用 Adobe Illustrator CC 导出 SVG 用于 Web Michaël Chaize 撰写
• 优化 Inkscape SVG 大小以用于 Web Tavmjong Bah 撰写
• SVG 清理程序（简介 博客文章，视频 和 仓库）

SVG 软件

桌面软件

• Adobe Illustrator ($19.99/月，Mac / Windows)。虽然 Illustrator 是旗舰矢量编辑程序，您也可以 从 Photoshop 导出 SVG。
• Sketch ($99)
• Affinity Designer ($49.99，Mac)
• WebCode ($39.99，Mac)
• Animatron (免费，Mac)
• Inkscape (免费，Mac / Windows / Linux)

浏览器软件

• SVG-edit
• Method Draw
• Mondrian

移动应用程序

• iDraw ($24.99，Mac 和 iOS)
• Inkpad (免费，iOS)
• Concepts: 更智能的草图绘制 ($5.99 可导出 SVG，iOS)

代码编辑器中的 SVG 内容

• 一套用于 Sublime Text 2/3 的标签完成片段 还有 SMIL。
• Adam Morse 的 SVG 和 Vim 的乐趣
• Brackets SVG 代码提示

SVG 安全性

• 叫我的人像 (使用 SVG 文件进行主动内容注入)，Mario Heiderich 的演示 PDF。
• 潜伏的猛虎 - 隐藏的有效负载：可缩放矢量图形的安全风险

可访问 SVG

我不是可访问性专家，但我可以告诉您，SVG 在可访问性社区中得到了不错的认可。当然，您仍然需要正确地使用它。

• 创建可访问的 SVG 的技巧 Léonie Watson
• 使用 ARIA 增强 SVG 可访问性 Léonie Watson
• 遵循 15 条 SVG 可访问性准则
• 可访问 SVG 的编写现状 Douglas Alan Schepers
• Describler Douglas Alan Schepers 是一款基于浏览器的工具，可帮助您将 SVG 转换为更易于访问的 SVG。它可以做的事情包括：确保它们自动缩放，允许您预览它们如何被朗读，帮助添加可访问性属性等。
• (视频) Douglas Schepers 在 可访问 SVG 数据可视化 上。
• iOS 上的 VoiceOver 需要 role="img"

SVG 和响应式设计

这里有一些重叠。一个是在于 SVG 的固有灵活性、锐度和小型文件大小，这与响应式设计中跨设备的理念非常契合。第二个是，由于 SVG 有自己的视口，因此它们内部的 CSS 媒体查询有点像传说中的“元素查询”，它们基于自身。

• SVG 内的媒体查询 Tim Kadlec
• 这个演示 Joe Harrison 捕捉到了响应式图标的可能性。随着可用空间的增加，房屋的细节会更加详细。
• Ilya Pukhalski 研究了这个演示，并对其进行了更详细的解释，并查看了其他方法。
• Sara Soueidan 也对这些技术进行了概述。
• Dudley Storey 研究了 确保 SVG（不同类型）保持灵活所需的正确属性。
• 制作响应式 SVG 图表 Andrew Weeks。
• 关于 SVG 中的 CSS 的重要事项：SVG 中的视口大小是 SVG 元素本身的大小，而不是浏览器中的整个文档。因此，当您编写 @media 查询时，诸如 min/max-width 之类的东西是基于该 SVG 的宽度。Estelle Weyl 利用这种能力创建了一种称为 小丑车技术 的响应式图像技术。
• Jason Grigsby 也对 SVG 中的媒体查询感到着迷，并链接了一些其他资源和演示。
• 演示 Bear Travis，在其中，一个全页 SVG 图形（带视差！）在较小的屏幕上变为剪辑的圆形。
• 使用 <object> 嵌入 SVG 对象的艺术指导 Sara Soueidan

SVG 和 JavaScript

SVG 的一个优势是形状在 DOM 中。例如，也许一个 <svg> 有一个 <rect> 和一个 <circle>。通过 JavaScript，您可以将事件处理程序绑定到 <rect>，并将不同的事件处理程序绑定到 <circle>。

• SVG、JavaScript 和 DOM Ian Elliot
• 使用 Javascript 控制 SVG Peter Collingridge
• 带有内联 SVG 的链接，通过事件保持目标 我。（通常使用 pointer-events: none; 是个好主意。）
• 喜欢使用 JavaScript 生成 SVG？将其移至服务器！ Ilya Zayats
• 请注意，当使用 jQuery 操作 SVG 时，您可能无法使用 .addClass()，而是必须使用 .attr("class", foo)。

SVG 和光栅图形

• 您可以使用 <image> 元素 将光栅图形 (JPG、GIF、PNG) 嵌入 SVG 中。
• 您可以使用 Adobe Illustrator 中的“实时跟踪”/“图像跟踪”工具将光栅图形转换为 SVG。或者，可以使用名为 Vector Magic 的免费在线工具。
• Adobe Shape 是一个 iOS 应用，它可以直接从 iOS 移动设备的相机获取矢量图形。
• 如何将现有 PNG 或 GIF 转换为 SVG Ryan Irelan。
• 光栅到 SVG 工具包括 PicSVG、Vector Magic 和 ConvertIO

SVG 和 CMS

• WordPress：修复媒体上传器，使其接受 SVG。
• WordPress：通过媒体上传器管理 SVG 雪碧图（可能更新的 分支？）
• WordPress：ubik-svg-icons

SVG 浏览器支持

所有当前版本的浏览器以及几个版本以前都支持 SVG。最大的问题通常是 IE 8 及更低版本以及 Android 2.3 及更低版本。但这只是基本的 SVG 支持（内联、<img>、CSS 背景）。SVG 的子功能具有不同的浏览器支持级别。Can I Use... 很好地跟踪这些内容。

• SVG 基本支持
• SVG 过滤器
• SVG 对 HTML 的效果（例如，在 <div> 上使用 SVG 过滤器）
• SVG 字体
• SVG 片段标识符

SVG 回退

如果您需要支持不支持 SVG 的旧浏览器（请参阅 浏览器支持 部分），有很多方法可以将资源回退到可用的资源（例如，将 image.svg 替换为 image.png 或类似内容）。

• SVG 回退的完整指南 Amelia Bellamy-Royds 和我。这里有一个 旧指南，它主要是对一个特定的不太好的情况的反应。
• 测试 SVG-as-img 的支持 我
• SVG for Everybody Jon Neal。语法：<svg><use xlink:href="spritemap.svg#icon"></use></svg>。要么直接工作，要么 ajax 并替换(对于 IE)，或者放入备用 PNG。
• SVG Injector 来自 Iconic 人员（一个非常棒的图标集作为内联 SVG 和各种备用方案）。语法：<img data-src="svg/thumb-up.svg" data-fallback="png/thumb-up-green.png">。将注入内联 SVG 或备用方案。
• Iconic 还有 开源 他们的 Illustrator 导出器和 Grunt 工具包。
• 前端 SVG 黑客入门 David Bushell
• SVGEezy Ben Howdle 和 Jack Smith。在 HTML 中使用 .svg，如果浏览器不支持，则将其替换为 .png。请记住，当您使用 src 时，预取器是最好的，因此这将受到双重请求的影响。
• 在移动浏览器中处理 SVG 图像 Krister Kari
• 在 Android 2.x 上使用 SVG Todd Anglin
• 重新审视 SVG 工作流程以提高性能和渐进式开发，使用透明数据 URI Todd Motto
• 托德·莫托还描述了一种不错的测试内联 SVG 支持的方法，他在其中使用 createElementNS 创建 SVG 元素并应用矩形来查看它是否有效。
• 如果你想像链接 SVG 文件一样进行编写（例如 SVG-as-img），但实际上是插入内联 SVG，并且你正在使用 Angular.js：查看此。你可能可以将其与支持测试结合起来，然后在不支持的情况下使用备用方案。
• 一种技术由 Artur A 提供的内联 SVG 回退方案。它有点复杂，包括 <switch>、<foreignObject> 以及页面上的 CSS 和内联 SVG 中的 CSS 之间的相互作用，但它似乎有效。其理念是不使用 <img src>，因此不会进行双重下载，并且如果不需要，也不会下载背景图像。
• SVG 魔术 – jQuery 插件，提供 PNG 回退方案。SVG 魔术的很大一个优点是它为你创建 PNG 图像，而不是需要你自己创建。更简单，但要注意它会向第三方网络发出请求来执行此操作。
• svg-fallback 由 yoskel 创建。（Grunt 任务）
• 将 SVG 拖放到 PNG 的转换 在 OS X 上。
• 旧版：svgweb 将使用 Flash 进行 SVG 回退。

SVG 规范

W3C 负责指导浏览器实现 SVG 的语法。技术上有一个完整的SVG 工作组。SVG 1.1 是最终版，SVG 2 处于草案阶段。（阿米莉亚·贝拉米-罗伊德斯的一点历史。）

• SVG 1.1（推荐状态）
• SVG Tiny 1.2（据我所知，并没有真正使用，即使你可以从 Illustrator 导出它。它原本是为了旧款 BlackBerry 而设计的）
  

  SVG 1.2 Tiny 是为各种设备（从手机和 PDA 到笔记本电脑和台式电脑）实现 SVG 而设计的配置文件，因此包含了 SVG 1.1 Full 中包含的功能子集。

• SVG 2（编辑草案状态，也位于此处）显然将包含诸如描边定位（内部、外部、中间）等内容。
  

  这个版本的 SVG 基于 SVG 1.1 第二版，通过提高语言的可用性以及添加作者通常请求的新功能来改进。

  说到 SVG 2，这里有Tavmjong Bah 讨论了一些新功能。我听说 z-index 也将在 SVG 2 中出现，但现在你必须更改源顺序来复制它。

• 还有一些专门针对标记和描边的规范。

SVG 会议

有很多事情可以讨论！尤其是现在 SVG 在浏览器中的支持水平如此普遍的时代。

幻灯片

• SVG: So Very Good 泰勒·斯蒂卡
• 你应该使用 SVG 本·维瑟（带演示）
• 抛弃像素 托德·帕克在 Artifact Conf 上
• 用 CSS 和 SMIL 动画 SVG 萨拉·苏伊丹
• 用 CSS 样式和动画可缩放矢量图形 萨拉·苏伊丹。 在 Smashing Magazine 上还有一篇文章。
• SVG 优化 凯尔·福斯特的终极版
• SVG 詹姆斯·科尔曼
• SVG 用于响应式 Web 扬·范·赫莱蒙德
• 下一级 SVG 伊利亚·普哈尔斯基
• 迈克·博斯托克关于 D3.js
• SVG 反击 马特·巴克斯特
• 马戏团滤镜：深入 SVG 高级滤镜效果 迈克尔·穆拉尼
• SVG – 少像素，多乐趣！ 斯文·沃尔费尔曼
• 响应式 SVG 亚历克斯·沃克
• 滤镜效果
• SVG 和 Web 标准的未来 Tavmjong Bah
• SVG 中渐变的未来？ 尼科斯·安德罗尼科斯
• SVG 和开放 Web 的力量 道格·谢珀斯（幻灯片以 SVG 格式 =））
• 一系列演讲 来自 2015 年 CSS Dev Conf

视频形式的演讲

• SVG 适用于所有人 由我
• 用 CSS 样式和动画可缩放矢量图形 萨拉·苏伊丹在 CSSConf 上
• 你不知道 SVG 德米特里·巴拉诺夫斯基（带幻灯片）
• SVG 和 RaphaelJS 简介 马克·格拉班斯基
• 交互式矢量图形基础 和可缩放矢量图形的快速浏览 马克·格拉班斯基
• 将 SVG 添加到你的工具箱 Lennart Schoors
• 用于响应式 HTML5 的 SVG 扬·范·赫莱蒙德
• 使用 Adobe Illustrator 创建 SVG 加载动画
• 使用 CSS 和其他有趣的东西制作 SVG 线动画教程
• 一点 Snap.svg 墨菲·兰德尔
• SVG 卡拉·希科克
• 使用 SVG 的现代 Web 图形设计 普里扬卡·赫鲁尔
• 惊喜和快乐：CSS + SVG 克里斯·赖特
• W3C 标准和实施者小组 (2014)
• 使用 CSS 操纵 SVG 凯尔·福斯特
• 增强 SVG 中的动画和交互性 Devina Coutinho

播客

• 道格·谢珀斯在 The Web Ahead 上 与珍·西蒙斯
• ShopTalk 129：与萨拉·苏伊丹

SVG 书籍

• Practical SVG 克里斯·科耶尔 – 2016 t
• 乔尼·特里萨尔的 SVG 袖珍指南 – 2014
• 杰伊·尼克的互动式 SVG 学习 – 2010
• 斯科特·穆雷的 Web 交互式数据可视化 – 2013
• J. David Eisenberg 和 Amelia Bellamy-Royds 的 SVG 精华（最初于 2002 年发布，2014 年发布了第二版）
• 克里斯·威尔逊的 RaphaelJS：Web 上的图形和可视化 – 2013
• 乔恩·弗罗斯特的用 SVG 构建 Web 应用程序 – 2012
• 迈卡·拉克尔的 24 小时自学 SVG – Sams Teach Yourself SVG in 24 Hours
• 达米安·达伯的学习 Raphael JS 矢量图形 – 2013
• 杰里米·科贝特的 SVG 拼贴 – 2013
• 雅各布·詹科夫的 SVG 压缩 – 2013

SVG 错误

希望到目前为止，SVG 已经是一个庞大的宇宙。有如此多的功能，以及功能与其他功能和技术相结合，因此出现错误和浏览器不一致性也就不足为奇了。

• SVG 怪异：埃米尔·布约克伦德，“一个记录错误和其他奇怪 SVG 行为的存储库”
• svg-edit 在其维基上跟踪了一些浏览器错误。
• 你可以搜索 WebKit 错误跟踪器查找与 SVG 相关的错误。
• 与Mozilla 的错误跟踪器相同。
• 并且 Chromium。
• Vectomatic 跟踪了一些 bug。

杂项

强制性的随机事物！

• 即使您已正确链接，您的 .svg 文件也未显示？您的服务器可能发送了错误的 Content-Type（text/xml 而不是 image/svg+xml）。使用 .htaccess 修复。
• 您可以使用 .svg 替换光标。SVG 光标 by Robert Longson
• SVG 绝对是 favicon 的理想选择，但目前 (2014 年 10 月) 只有 Firefox 支持。 Safari 9 的“固定标签” 接受 (需要？) SVG。
• SVG 占位符图像生成器 by Doug Schepers
• 如果您曾经使用过空白 GIF 作为填充图像 (或相同的 Data URI)，Stephen Shaw 这里介绍了如何使用 SVG 替代，这更容易维护可配置的长宽比。
• GitHub 支持 SVG 的差异比较，既是代码，也是可视化。
• Trianglify：一个 JavaScript 库，用于生成可作为 SVG 图像使用的彩色三角形网格。
• 电子邮件中 SVG 的基础知识
• Poly Maker – Paul Lewis 对在 SVG 中制作多边形艺术的精彩解释。说到 Poly，Matthew Wagerfield 的 平面表面着色器 也可以输出 SVG。
• IJSVG 是一个适用于 Mac OSX 10.7+ COCOA 的库，用于在您的 COCOA 应用程序中渲染 SVG。
• 使用 React 构建 SVG 图标 by Brent Jackson。
• 为什么 SVG 将变得非常重要？ by David Dailey
• Flash 设计师？ Flash2Svg：“直接从 Flash Pro 导出动画 SVG 文件”

SVG 2

• SVG 2 规范
• SVG 2 新功能