关于 SVG 的所有你需要知道的内容

欢迎！…

在本课程开始时，我想强调一下 *为什么* SVG 如此引人注目。也许对设计师来说最引人注目的原因是：它们看起来很棒。视觉上非常清晰。矢量（“SVG”中的“V”）总是这样。…

我们刚刚了解到 SVG 在视觉上非常清晰。SVG 也很灵活。这对于网络上的元素来说并不独特，但独特之处在于，无论你将它们调整到多大尺寸，它们都能保持完美的清晰度。…

SVG 文件的大小取决于它的复杂程度，而不是它的“大小”。请记住，SVG 不在乎它渲染的尺寸，无论尺寸如何，它们都灵活且清晰。

想象一个 100×100 像素的…

使用 SVG 可以非常简单

<img src="image.svg" alt="image">

是的！

查看 Chris Coyier 在 CodePen 上的笔 7d5d25d7a93f10035b9b19c6f4fce516 (@chriscoyier)。…

SVG 图像也可以用作 CSS 中的 background-image，就像 PNG、JPG 或 GIF 一样。

.element {
  background-image: url(/images/image.svg);
}

SVG 的所有优点都随之而来，比如在保持清晰度的同时保持灵活性。此外，你…

也许使用 SVG 的最佳方式是“内联 SVG”——即将 SVG 代码直接放入 HTML 中。它非常有效！

查看 Chris Coyier 在 CodePen 上的笔 gpcDi (@chriscoyier)。

很多…

如果我对这些方法有点贬低，请原谅我。我从未遇到过任何用例，这些用例明确表明它们是最佳选择。曾经有一段时间，<object> 是使用 SVG 的唯一方法，但这些…

我们已经介绍了“内联 SVG”——即将 SVG 语法直接放入 HTML 中。你也可以在其他地方使用相同的内联 SVG，比如在 <img> 或 background-image 中。这有点奇怪。

这就像

<img src='data:image/svg+xml;utf8,<svg 

图库摄影网站通常都有一种方法可以按“矢量”筛选搜索结果。请记住，无论你下载时获得什么格式，你通常都可以将其在 Illustrator 中打开，从而对其进行更改并保存…

Noun Project 是一个（非常）棒的获取 SVG 的地方。让我们列举一下它的优点

• 从字面上看，所有内容都是 SVG 格式，并且实际上就是这样提供的
• 它们是 SVG 最适合的图像类型
• 很多

请记住，任何矢量图形都可以转换为 SVG。Adobe 软件非常擅长此操作。PDF 中可能包含矢量内容——只需打开 PDF，你就可以获取矢量部分。…

SVG 有一个非常酷且功能强大的元素，称为 <use>。它的概念非常简单。它找到另一段 SVG 代码（通过 ID 引用），并在 <use> 元素内部克隆它。

最基本的用例是…

<use> 元素对于内联 SVG 图标系统的整个想法至关重要。我们了解到，一种干净的方法是将你打算稍后绘制的所有内容都放入 <defs> 块中，这样它就不会…

一旦我们有了我们所谓的“defs 块”的 SVG——定义了我们稍后想要绘制的所有内容的那一部分 SVG——我们将其放在哪里？到目前为止，我们一直将其直接…

将该 SVG defs 块放在文档顶部绝对有效。它也有一些优点，比如无需发出 HTTP 请求，所有绘图图形的信息都直接在…

术语“构建工具”可能令人恐惧。它让人联想到需要配置和奇怪系统依赖项的花哨命令行工具，这些工具在你看到它们时就会崩溃。有时构建工具就是这样，我们将在…

我们当然可以对构建工具进行更深入的研究。在发布本文时，构建工具的典型代表是 Grunt。它有一些竞争对手，但 Grunt 一直是最受欢迎的工具。如果…

我们已经了解到，构建工具对于将一个充满 SVG 的文件夹转换为 SVG defs 块之类的任务特别有用。就像我们所处的这个可爱的网络世界中经常发生的那样，总是有更多…

内联 SVG 可以被“样式化”，因为它在页面上显示的那一刻就具有填充、描边等等。这很棒，也是使用内联 SVG 的一种完全有效的方式。但是你也可以…

我们了解到，使用 <use> 插入 SVG 片段的一个限制是，你无法编写影响它的复合 CSS 选择器。例如

<svg class="parent">
  <!-- shadow DOM boundary is effectively here -->
  <use class="child">
     

当你使用内联 SVG 时，所有 SVG 代码都直接在 HTML 中，因此也在 DOM 中。你可以像对 <div>、<h1> 或任何其他 HTML 元素一样对其进行样式设置。CSS 样式带来了…

尽管使用 CSS 制作 SVG 动画对普通前端人员来说可能更舒适，但 SVG 还有另一种直接内置于 SVG 语法本身的动画方法。我们在这个视频中简要介绍了这一点，但是…

此提示仅适用于拥有 Adobe Illustrator CC（Creative Cloud）的用户。我确认它在该版本或更新的 CC 2014 版本中有效。

它非常简单：从 Illustrator 复制，粘贴到 HTML 中。

你的…

此视频没有内容，但这里有一些有用的信息，介绍如何在 Adobe Illustrator 中手动优化 SVG，超越应用程序自动执行的操作。

有时你想要使用的 SVG 在 Illustrator 中看起来完美无缺，但它并不完全符合…

这是一件有点深奥的事情，我只需要自己做一次，发现它很令人困惑，所以我想为此做一个完整的视频。

问题是，并非所有内容在…

JavaScript 是我们将介绍的制作 SVG 动画的最后一种方法。我们研究了 CSS，它很棒并且非常舒适，但它无法处理你可能想要制作动画的一些 SVG 属性。然后我们研究了…

一种流行的 SVG 动画技巧是路径绘制。如果你无法想象它，这里有一个我创建的 包含无数示例的合集。本质上，SVG 形状周围的描边会随着时间的推移自行绘制。

我第一次从 Jake…

SVG 中有一个 <text> 元素。这并不奇怪：它用于将文本放入 SVG 中。不是字母的形状轮廓（尽管你也可以这样做），而是实际的普通网页文本。可选择、对 SEO 友好、可访问、普通的…

也许有一天你会希望你拥有的图形是 SVG，但你只有光栅图形，例如 GIF、JPG 或 PNG。

在本视频中，我们来看一个这样的示例。我们有这个箭头…

这可能没有特别大的用例，除了显而易见的情况：你需要在一个更大的 SVG 设计中包含其他光栅图形。这样，它就可以与其他元素一起移动和缩放。

语法…

也许你听说过 CSS 滤镜？你可以从 CSS 对任何元素应用它们，例如

.apply-css-filter {
  -webkit-filter: grayscale(0.5);
  filter: grayscale(0.5);
}

你甚至可以将其应用于 HTML 元素或 SVG 元素。

但是，还有…

剪裁和蒙版概念非常简单。隐藏元素的某些部分并显示其他部分。它们之间的实际区别也很简单。剪裁始终是矢量路径，路径内部可见，外部…

即使没有任何软件，你也可以用 SVG 做很多事情。假设你可以在线获取到优质的 SVG 图片源，你可以直接使用它们。但通常情况下，我们需要对它们进行一些调整。…

我们之前讨论过手动优化 SVG。手动选择细节以及可以组合或移除的内容。在这个屏幕录制中，我们将探讨使用工具优化 SVG。这些工具可以减少文件…

我们花了大量时间讨论使用内联 <svg> 和 <use> 元素。你可以用它构建一个图标系统，它充满了优势。

当然，你也可以通过其他方式创建 SVG 图标系统。你…

当你使用内联 <svg> 时，所有元素都位于 DOM 中，就像 <div>、<span> 和任何其他 HTML 元素一样。

如果你有像这样的 SVG

<svg>
  <rect id="foo" x="10" y="10" width="100" height="100" />
</svg>

并且…

在这个屏幕录制中，我们深入探讨了Léonie Watson 关于可访问 SVG 的文章，并逐点进行讲解。我很喜欢文章的第一点，即使用 SVG 本身就是一个好主意，因为…

在这个视频中，我们尝试通过创建一个以各种不同方式使用 SVG 的网站，将我们学到的知识整合在一起。我们逐步创建了一个虚构的…的网站。

感谢大家的观看，这对我以及这个网站来说意义重大。

这篇博文 是一个巨大的资源列表，涵盖了本系列中讨论的所有内容，以及更多关于 SVG 的信息。…