CSS 中的 SVG

Stefan Judis 有一篇“今天我学到了”（TIL）文章解释了 如何将 SVG 滤镜内嵌到 CSS 中。 想法是 CSS 有 filter 属性，它支持一些内置函数，比如 grayscale(100%) 等等。

但它也可以指向由 SVG 定义的滤镜。 因此，您可以执行 filter: url(#my-custom-filter)，它位于一些内嵌 <svg> 中，如 <filter id="my-custom-filter">。 这样引用 HTML 感觉有点奇怪。 滤镜是一种视觉效果，所以将其包含到 CSS 中是有意义的。 如下所示

img {
  filter: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg">\
      <filter id="waves" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">\
        <feTurbulence type="turbulence" baseFrequency="0.01 0.01" numOctaves="1" seed="1" stitchTiles="noStitch" result="turbulence" />\
        <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="20" xChannelSelector="G" yChannelSelector="A" result="displacementMap" />\
      </filter>\
    </svg>#waves')
  ;
}

这是 Stefan 的湍流滤镜示例，CSS 无法单独实现。

看看所有这些反斜杠 (\)。 让人希望 CSS 有模板字面量，对吧？ 我担心代码格式化器或压缩器会卡住，但我不知道，也许它会没事。

好的一点是 SVG 保持了相当完整的结构（可读和可编辑）。 因此，您可以在 CSS 中编辑 SVG 滤镜并尝试一下

我还想到了 Yoksel 的工具。 这个 双色调和三色调图像 编辑器太酷了。 我可以拿起其中一个滤镜并将其放到一些 CSS 中

滤镜不是唯一一种可以内嵌到 CSS 中的 SVG 类型。 您也可以将 SVG 绘制直接放到 CSS 中。

这在除 Safari 之外的所有现代浏览器中都能正常工作。 但我认为在不久的过去，我们需要对 SVG 中的更多特殊字符进行编码才能使其正常工作（尽管您 不必诉诸 base64）。 Yoskel 的 URL 编码器 就是为此而设计的——我只是不知道它现在是否还必要。