一些非常棒的 SVG 链接

我一直遇到很棒的 SVG 作品。 演示、教程、工具、艺术... 一些最好的永恒资源最终出现在我们的 SVG 集锦 中。 我认为有些最适合发布在像这样的文章中！

其中一些是全新的。 一些不是，但我最近发现它们很有用，或者我以前没见过。

SVG 日历

CJ Gammon 写了关于使用 SVG 以编程方式创建日历 布局的文章，使用的是 Snap.svg.

查看 Pen 日历生成器，作者为 CJ Gammon (@cjgammon)，发布在 CodePen 上。

他用它为家人制作了一个日历！

SVGeneration

SVGeneration 有许多非常优雅的基于 SVG 的图案的“配方”。 它是一些小的 JavaScript 函数，它们接受参数（您可以调整参数），输出图案。 因此您可以进行一定程度的控制，最终可以复制粘贴您想要的 SVG 代码。

SVG Nest

假设您有一些形状想要从纸张（或任何其他材料）上剪裁出来。 您如何最好地排列它们以最大限度地利用这些材料？ SVG Nest 就是为此而设计的。

如果您使用激光切割机、等离子切割机、CNC 机等，这是一个常见问题。 在计算机术语中，这称为不规则装箱问题。

BrooklynJS SVG 形状变形幻灯片

前几天，我在 BrooklynJS 做了一个关于 SVG 形状变形的简短演讲。 这是幻灯片

SVG 峰会总结幻灯片

我还参加了 SVG 峰会，并在最后做了总结演讲。 这是幻灯片

PostCSS 内联 SVG

PostCSS Inline SVG 是 PostCSS 的一个插件，它允许您引用 SVG 文件，然后使用 CSS 语法控制其属性。

这个

@svg-load nav url(img/nav.svg) {
    fill: #cfc;
    path:nth-child(2) {
        fill: #ff0;
    }
}
.nav {
    background: svg-inline(nav);
}

变成这个

.nav {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23cfc'%3E%3Cpath d='...'/%3E%3Cpath d='...' fill='%23ff0'/%3E%3Cpath d='...'/%3E%3C/svg%3E");
}

在我看来，这是 PostCSS 的最佳实践。 这是一个巧妙且有用的想法，它发明了一种新的语法来实现这个想法（所以它不会踩到未来技术发展的脚趾），但它感觉很熟悉，有点像标准 CSS 特性。

生成漂亮的 SVG 多边形

由 Sten Hougaard 演示，它生成随机化的 SVG 多边形博客

查看 Pen 生成漂亮的 SVG 多边形，作者为 Sten Hougaard (@netsi1964)，发布在 CodePen 上。

logomono

正如他们所说：“健壮、单色、精简” SVG 标志。 它是一个大型的标志库，但项目的页面也提供了一些关于如何最好地服务 SVG 标志的想法。 例如，如何在一个标志中处理明色或暗色问题，以及标志周围的最佳渲染空间。

logomono 正在开发中。

SPARKK 的 SVG 图标

是否曾经需要非常快速地获取一些 SVG 代码？ 我很喜欢 The Noun Project，但即使使用它（或其很棒的 应用程序），也需要执行几个步骤。 使用 SVG Icons，您只需点击想要的内容并复制代码即可。

Icon Jar

说到 The Noun Project 应用程序，如果您喜欢它，也许您会更喜欢 Icon Jar，它就像您自己的本地、可定制、更强大的版本。 但它的核心仍然是拖放您需要的图标。

SVG 动画鼓组

播放它！ 由 Josh Ellis 演示的非常酷的演示。

查看 Pen SVG 动画鼓组（播放我！），作者为 Josh (@iamjoshellis)，发布在 CodePen 上。

新闻稿/播客

如果您像我一样喜欢一直听到关于新的 SVG 内容，Jachin Sheehy 有一个名为 SVG Weekly 的每周新闻稿，而 Rob Levin 有一个名为 SVG Immersion 的播客。