虽然 SVG 提供了很多图形元素，允许我们通过编码的方式来绘制各式各样的图形，但很多时候，通过代码绘制复杂图形时，着实是件痛苦的事情。除了效率低，易于出错之外，在视觉上总是难于满足美学的需求。
其实，可以先借助 SVG 编辑器来辅助我们快速创建 SVG 图形，并获取相应的 SVG 代码，再将代码应用到自己的 Web 项目中。或者说，如果你只需要修复 SVG 文件中的一些问题，但又不想使用诸如 Figma 或 Sketch 这样的大型应用程序，那么 Boxy SVG 或 Editor Method 将是不错的选择。它们具有基本 SVG 编辑功能和可视化编辑器的 Web 应用程序。
Boxy SVG: https://boxy-svg.com/
除此之外，你还可以使用 Vecta、MacSVG （一款轻量级的开源 MacOS 应用程序，用于 SVG 编辑和动画制作）和 SVG-Edit 等在线 SVG 编辑器。
在 Web 开发过程中，常常会使用一些不规则的图形增加 UI 的视觉美感。例如，Blob 形状、水波纹、斑点背景、分隔线和多边形等。可以通过一些在线生成器，快速获得所需要的形状。
Polygon Generator：https://codepen.io/winkerVSbecks/full/wrZQQm/
这是一款由 @Varun Vachhar 使用 JavaScript 构建的多边形生成工具，你只需要定义边数、半径和中心点位置，就可以为你生成一个 <polygon> 元素绘制的多边形。通常情况下，是一个正多边形。
在社区中生成 Blob 图形的生成器有很多款，例如 BlobMaker 就是其中之一。它允许你随机生成一个 Blob 形状，你也可以根据个性化定制一个 Blob 形状。该生成器可以导出 SVG 文件，也可以直接获取 SVG 代码：
BlobMaker：https://www.blobmaker.app/
如果你觉得 BlobMaker 生成器还不够用，那么 Haikei 将能满足你更多的应用场景。你可以使用 Haikei 应用程序来生成一个更高级的 SVG 资源，比如分层波浪、堆叠波浪以及斑点背景等：
Haikei App: https://app.haikei.app/
除了 Haikei 应用可以生成类似波浪的 SVG 图形之外，你还可以考虑使用 SVGwave 生成器。你可以调整颜色、层次和一些设置，选择一个随机生成的选项，并将其导出为 SVG 或 PNG：
SVGwave：https://svgwave.in/
SVGWave 除了能生成静态的水波纹之外，还可以生成动态的水波纹。
如果你需要生成更复杂的水波纹，那么可以选择 Wavelry 生成器，它允许在锐利、线性和平滑波浪之间进行选择：
Wavelry：https://wavelry.vercel.app/
而 SVG Gradient Wave Generator 生成器则更进一步，它允许你调整振幅、平滑渡、饱和度和色调。
SVG Gradient Wave Generator：https://www.outpan.com/app/9aaaf27303/svg-gradient-wave-generator
最后，Loading.io 不仅提供生成波浪图形，还可以对它们进行动画处理。
Loading.io：https://loading.io/background/m-wave/
所以，如果你的设计中需要波浪，这些工具基本上可以满足你的需求。
当页面上有几个部分时，通常会用轻微的背景颜色变化将它们分隔开。然而，可以使用任何形式的形状作为这些部分之间更有趣的分隔线。ShapeDivider 允许你生成自定义形状的分隔线，并将它们导出为SVG文件。它为你预设置了十种不同的分隔线效果，你可以选择其中的一个，并调整颜色、宽度、高度以及其他一些设置，并在窄屏和大屏上实时预览结果。
ShapeDivider：https://www.shapedivider.app/
注意，前面提到的波浪生成器也可以为你生成波浪形分隔线！
在 Web 上，除了位图、纯色、渐变色作为页面或元素的背景之外，还可能会需要一些不规则的图形作为背景，例如斑点背景、图案背景等。
为了让创建抽象和彩色背景变得轻而易举，Moe Amaya 的项目 Cool Backgrounds 现在将一些出色的背景生成器汇集在一起：
Cool Backgrounds: https://coolbackgrounds.io/
SVG 有一个强大的功能，那就是 SVG 的 <pattern> 元素，它允许我们创建复杂的图案，用于填充 SVG 图形元素。当然，它创建的图案也可以用于作为页面或元素的背景。如果仅通过代码来创建这些图案，那你需要对 <pattern> 具有足够深的了解。如果你并不想了解它的底层工作原理，那么使用在线生成器将是一个不错的选择：
可以直接使用一些在线工具来生成图案瓷砖。例如：
我们曾在本系列的《SVG 在 Vue 中的应用》《SVG 在 React 中的应用》《SVG 在 Nextjs 中的应用》和《图标系统实战》中探讨过如何使用 SVG 构建工具创建 SVG 精灵。其优势就不在这里复述了。
其实，除了使用构建工具之外，还可以使用在线生成器来创建 SVG 精灵，例如 SVG Spreact 生成器，你只需要将 SVG 文件拖到 SVG Spreact 中，它就会自动帮助生成一个 SVG 精灵。该工具还会帮你整理 SVG、优化它，并生成一个包含 HTML 标记和在 CodePen 上演示的 SVG 精灵。
SVG Spreact：https://svgsprit.es/
在前文中曾提到过，很多图形编辑软件导出的 SVG 文件或代码可能会包含大量的元信息和不必要的细节，如空元素、注释、隐藏路径或重复内容。这意味着，将导出的 SVG 应用到项目中之前，需要对 SVG 进行优化。这样做除了提高 SVG 的可读性之外，还有利于提高 Web 性能。
通常情况之下，你可以直接在项目中配置 SVGO 来对 SVG 进行优化，你也可以通过其他方式使用 SVGO，例如 GitHub Actions、Webpack 加载器、Vite 加载器、VS Code 插件、Sketch 插件或 Figma 插件。除此之外，你还可以使用 SVGOMG 在线对 SVG 进行优化：
SVG 滤镜是 SVG 中一个重要特性，相对于 SVG 的其他特性而言，不管是学习还是使用都要复杂的多。所以，本文中花了多节课与大家一起探讨 SVG 滤镜的特性与使用：
其实，我们还可以借助相关的工具使我们快速了解和掌握 SVG 滤镜，并能将所掌握的技能用于实际开发中。例如 SVG Filters、SVG FM 和 SVG Filters Builder 等。尤其是 SVG Filters，这款工具多次出现在本系列 SVG 滤镜相关的篇章中：
SVG Filters:https://yoksel.github.io/svg-filters/#/
除此之外，还有 SVG Color Matrix Mixer 小工具，允许你为页面上的任何组件直观地生成复杂的颜色矩阵滤镜，然后使用 <feColorMatrix> 滤镜基元作为 CSS 滤镜（filter）属性的值来更改 HTML 元素的颜色。该工具还提供了一段代码片段，方便你立即应用滤镜：
SVG Color Matrix Mixer：https://fecolormatrix.com/
与之相似的还有一款名为 SVG Color Filter Playground 的小工具：
SVG Color Filter Playground：https://kazzkiq.github.io/svg-color-filter/
还有一款与滤镜颜色有关的工具则是 SVG Gradient Map Filter ，与之前两款略有不同之处是，可以使用它来快速创建双色调或多调图像效果：
SVG Gradient Map Filter：https://yoksel.github.io/svg-gradient-map/#/
SVG 坐标系统与我们熟悉的 Web 坐标系统有所不同，而且理解和掌握 SVG 坐标系统是使用 SVG 的前提条件。在 SVG 坐标系统中，<svg> 元素的 viewBox 和 preserveAspectRatio 属性则是其中的重中之重。下面这个小工具，有利于你更好的理解和掌握这两个属性以及 SVG 坐标系统：
通过前面的学习，我们已经知道在开发过程中有多种方式可以将 SVG 用于 Web 上。常见的几种方式是：
img 或 iframe 引用 SVGbackground-image 或 mask-image 等属性引用 SVG在使用 HTML 元素 （比如img 或 iframe） 和 CSS 属性 （比如 background-image 或 mask-image）引用 SVG 时，并不总是引用 .svg 文件。我们还可以引用 Data URI 或 Base 64 等数据格式。如果你的项目工程中没有配置相关的构建工具，那么可以考虑使用诸如 SVGViewer、eeencode 和 URL-encoder 等在线工具，将 SVG 代码转换为所需要的数据格式：
URL-encoder：https://yoksel.github.io/url-encoder/
另外，你的 Web 项目可能是基于 React 框架在开发。要在 React 环境中使用 SVG （内联方式），则需要将 SVG 属性替换为其 JSX 有效的等效项。也就是说，我们需要一款诸如 SVG2JSX 的工具，帮助我们快速将 SVG 代码转换为符合 JSX 语法规则的代码：
SVG2JSX：https://svg2jsx.com/
如果你不想使用像 SVG2JSX 这样的在线工具来转换 SVG 代码，你也可以考虑在项目的工程中配置 SVGR，它也能自动化将 SVG 转换为符合 JSX 语法格式的代码，并且还提供了 Prettier 配置以及整个过程中对 SVG 进行优化。我曾在《SVG 在 React 中的应用》一篇中向大家介绍过 SVGR 的使用，这里就不再花时间复述！
我们在使用 SVG 的时候，尤其是将 SVG 作为剪切路径或遮罩图形时，需要将 SVG 图形中的绝对单位转换为相对单位，这样更易于适配不同尺寸的元素。如果碰到这方面的需求，推荐你使用 @yoksel 的 “Convert SVG absolute clip-path to relative”，一款非常不错的小工具，它能将剪切路径中的绝对值转换为相对值：
Relative Clip-path：https://yoksel.github.io/relative-clip-path/
上面介绍的都是从一种数据转换成另一种数据格式。接下来，我们来看图像格式之间的转换，这种需求可能不多，但偶尔你也可能会有这方面的需求。例如，将 JPG 或 PNG 格式的位图转换为 SVG 格式的图像。
如果你在之后的开发过程中真碰到这方面的需求，可以考虑使用 SVGurt 工具，它是一款开源的图像转换为 SVG 的工具，提供了许多控件和调节选项，你可以根据需要调整这些参数，最终转换成符合你需求的 SVG：
SVGurt：https://svgurt.com/#/
你也可以使用 PicSVG，它也可以将位图转换为 SVG：
PicSVG：https://picsvg.com/
SVG 的美妙之处在于它的本质：你可以直接通过代码进行路径动画、过渡和形态变换，甚至可以组合多个动画效果。然而，我们不必每次都从头写动画。Vivus Instant 是一个简单的工具，允许你对 SVG 路径进行动画化。
Vivus Instant：https://maxwellito.github.io/vivus-instant/
你也可以使用由 @Sergej Skrjanec和 @Ana Travas开发免费工具 SVGArtista，它包含了一些基本的填充和描边动画效果。你也可以定义动画的缓动函数、方向、持续时间和延迟时间等：
SVGArtista：https://svgartista.net/
如果你要给 SVG 添加比较复杂的动画，那么 SVGator 将是首选。它是一款专门用于 SVG 动画的编辑器，提供了丰富的功能。有点类似于 AE 软件。不过，该工具需要付费，免费版本功能非常有限：
SVGator：https://www.svgator.com/
如果你喜欢直接使用代码进行动画制作，那么 GSAP 是一个极好的工具，它允许你使用 JavaScript 对 SVG 、CSS 属性、React 、Canvas 或其他内容进行动画化。此外，你也可以看看 SVG.js，它是一个轻量级的工具，专门用于操作和动画化 SVG。如果你想要类似于 AE 的高质量动画效果，那么 Lottie 绝对值得一试，无论是在 Web 上还是在 iOS 和 Android 平台上，都能创建出非常丰富的 SVG 动画。
这里所提到的仅仅是 JavaScript 动画库的一小部分，如果你想了解更多的，可以用于 SVG 动画创作的动画库，可以进一步查阅 GSAP、Anime.js、Motion 等动画库的官方文档！
我想应该有不少同学有类似的困惑与烦恼！当你有大量的 SVG 文件，应该如何管理它们？如何知道哪里有什么，如何轻松找到所需要的 SVG ？SVGX 是一款免费的桌面 SVG 资源管理器，可以帮助你将所有 SVG 文件集中管理。你可以书签标记、搜索和预览 SVG 图标，在线编辑 SVG 标记，并通过一键复制粘贴 SVG 和 CSS。默认情况下，它还使用 SVGO 对 SVG 进行优化：
SVGX：https://svgx.app/
Web 上有成百上千的资源，我们希望这里列出的一些资源能在你的日常工作中派上用场，尤其是帮助你避免一些耗时的例行任务。最后再向大家推荐 fffuel.co ，是一个色彩工具和免费 SVG 生成器的集合，适用于渐变、图案、纹理、形状和背景：
fffuel.co：https://www.fffuel.co/