SVG dentro de CSS

Stefan Judis tiene una publicación “Hoy aprendí” (TIL) que explica cómo los filtros SVG se pueden integrar en CSS . La idea es que CSS tiene la filterpropiedad que admite algunas funciones integradas, grayscale(100%)cosas así.

Pero también puede apuntar a un filtro definido por SVG. Entonces podrías hacer filter: url(#my-custom-filter)que esté en alguna línea svgcomo filter. Es un poco divertido tener que hacer referencia al HTML de esa manera. Un filtro es algo tan visual que tiene sentido incorporarlo al CSS. Eso se parece a esto:

img {  filter: url('data:image/svg+xml,    svg       filter x="-20%" y="-20%" 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')  ;}

Ese es el ejemplo del filtro de turbulencia de Stefan, algo que CSS por sí solo definitivamente no puede hacer.

Mire todas esas barras invertidas ( ). Te hace desear que CSS tuviera literales de plantilla, ¿eh? Me pone nervioso que un formateador o minificador de código se ahogue con eso, pero en realidad no lo sé, tal vez estaría bien.

Lo bueno es que el SVG permanece bastante intacto (legible y editable). Así que aquí puedes editar el filtro SVG en el CSS y jugar:

También pienso en las herramientas de Yoksel . Este editor para imágenes de dos y tres tonos es genial. Puedo elegir uno de esos filtros y colocarlo en CSS también:

Sin embargo, los filtros no son el único tipo de SVG que tiene sentido integrar en CSS. También puedes poner el dibujo SVG directamente en CSS.

Esto funciona en todas partes excepto en Safari en un rápido avance a través de los navegadores modernos. Pero creo que en un pasado no muy lejano, necesitábamos codificar más caracteres especiales en el SVG para que funcionara (aunque no era necesario recurrir a base64 ). El codificador de URL de Yoskel es literalmente solo para esto; simplemente ya no sé si es necesario.