SVG innerhalb von CSS

Stefan Judis hat einen "Today I Learned" (TIL) Beitrag veröffentlicht, der erklärt, wie SVG-Filter in CSS inline eingebettet werden können. Die Idee ist, dass CSS die `filter`-Eigenschaft hat, die einige eingebaute Funktionen unterstützt, wie z. B. `grayscale(100%)` und ähnliches.

Es kann aber auch auf einen von SVG definierten Filter verweisen. Sie könnten also filter: url(#my-custom-filter) verwenden, was in einem Inline-<svg> als <filter id="my-custom-filter"> enthalten ist. Es ist schon witzig, auf diese Weise auf das HTML verweisen zu müssen. Ein Filter ist etwas so Visuelles, dass es Sinn macht, ihn in CSS zu integrieren. Das sieht dann so aus

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')
  ;
}

Das ist Stefans Turbulenzfilter-Beispiel, etwas, das CSS allein definitiv nicht kann.

Schauen Sie sich all diese Backslashes (\) an. Man wünschte sich, CSS hätte Template-Literale, oder? Ich habe Bedenken, dass ein Code-Formatter oder Minifier damit Probleme haben könnte, aber ich weiß es nicht wirklich, vielleicht wäre es in Ordnung.

Das Schöne ist, dass das SVG ziemlich intakt bleibt (lesbar und editierbar). Hier können Sie also den SVG-Filter in CSS bearbeiten und herumspielen

Ich denke auch an Yoksel's Werkzeuge. Dieser Editor für zwei- und dreifarbige Bilder ist so cool. Ich kann einen dieser Filter nehmen und ihn ebenfalls in CSS einfügen

Filter sind aber nicht die einzige Art von SVG, die Sinn macht, in CSS einzufügen. Sie können auch direkt SVG-Zeichnungen in CSS einfügen.

Das funktioniert überall außer Safari in einem schnellen Test in modernen Browsern. Aber ich denke, in nicht allzu ferner Vergangenheit mussten wir mehr Sonderzeichen im SVG kodieren, damit es funktioniert (obwohl Sie nicht auf Base64 zurückgreifen mussten). Yoskels URL-Encoder ist genau dafür da – ich weiß nur nicht, ob er noch notwendig ist.