El arte de los filtros SVG y por qué son tan geniales
Después de casi 20 años de desarrollo, el diseño de páginas web actual, con su pantalla de alta densidad y compatibilidad con la función OpenType, está a sólo un paso del diseño de impresión del mundo real. Pero hay un área del diseño gráfico en la que seguimos recurriendo al uso de mapas de bits en lugar de texto sin formato: fuentes que muestran elementos que son letras ilustrativas, coloridas, dramáticas, divertidas, experimentales o artísticas.
Un caso para mostrar texto en HTML
Podemos elegir entre miles de fuentes web y agregarles efectos CSS, algunas con amplio soporte de navegador (como proyecciones y transformaciones 3D), algunos pueden ser más experimentales (como clip de fondo y trazo de texto), pero son básicos. Si queremos poder mostrar una fuente realmente excelente en nuestro sitio web, normalmente optamos por incrustarla como una imagen.
Las desventajas de usar imágenes en la Web son obvias: tamaño de archivo, falta de viabilidad para contenido que cambia con frecuencia o generado por el usuario, accesibilidad y pérdida de tiempo, por nombrar algunas.
Entonces, ¿no sería fantástico si pudiéramos editar estilos para las letras, tal como lo hacemos a menudo con el texto usando CSS? ¿Aplicar diferentes colores a múltiples bordes? ¿Agregar bisel interior y bisel exterior? ¿Agregar patrones, texturas y efectos 3D? ¿Darle un estilo universal? ¿Usar múltiples colores y giros? ¿Darle un estilo ocupado?
Filtros SVG complejos: CSS
Mucho de esto ya es posible: la clave es desatar la magia de los filtros SVG. Los filtros SVG (incluidos los filtros CSS) generalmente se consideran una forma de manipular mapas de bits mediante efectos de desenfoque o manipulación de color. Pero hay más en ellos que eso. Al igual que las reglas CSS, los filtros SVG pueden ser un conjunto de capas visuales agregadas sobre el texto tradicional. Con la propiedad de filtro CSS, estos efectos se pueden usar fuera de SVG y aplicarse directamente al contenido HTML.
Puede haber algunas dudas cuando se trata de filtros en CSS y SVG: los filtros SVG se pueden definir con un elemento de filtro SVG y se pueden aplicar en archivos SVG. Los filtros CSS se pueden aplicar a cualquier elemento HTML mediante el atributo de filtro. Los filtros CSS como desenfoque, contraste y rotación de tono son atajos predefinidos y efectos de filtro SVG de uso común. Además, la especificación también nos permite hacer referencia a filtros definidos por el usuario en archivos SVG. También es un poco confusa la etiqueta patentada -ms-filter, que quedó obsoleta en IE9 y se eliminó cuando se lanzó IE10.
Este artículo trata principalmente del primer caso: filtros utilizados en archivos SVG incrustados en páginas HTML, pero más adelante intentaremos aplicar filtros SVG al contenido HTML.
Las ilustraciones de este artículo son ejemplos de efectos de filtro SVG aplicados al texto. Haga clic en la imagen para ver el texto original (visible en navegadores modernos que admiten SVG). Los llamo filtros SVG "complejos" porque en realidad estos filtros son una combinación de múltiples efectos que luego se combinan en una sola salida. Aunque la apariencia de las letras ha cambiado significativamente, el texto sigue siendo fácil de capturar y accesible, y se puede seleccionar y copiar. Debido a que los filtros SVG son compatibles con todos los navegadores modernos, estos efectos se pueden mostrar en los navegadores IE10 y superiores.
Comprender los filtros SVG puede ser un desafío. Incluso un efecto tan simple como una sombra paralela requiere una sintaxis compleja y detallada. Algunos filtros, como feColorMatrix y feComposite, son difíciles de dominar sin un conocimiento profundo de las matemáticas y la teoría del color. Este artículo no es un tutorial sobre cómo aprender filtros SVG.
En lugar de eso, presentaré un conjunto de bloques de construcción estándar para lograr algunos efectos, con la menor explicación posible y me concentraré en documentar los pasos individuales para lograr esos efectos. Lo que ven es principalmente sobre cómo se hace, y para aquellos que quieran saber por qué, puse una lista de lectura al final de esta publicación.
Construcción del filtro
El siguiente es un diagrama de la construcción de un filtro SVG complejo. El resultado del filtro es un efecto de texto desgastado, que usaremos como ejemplo para recorrer paso a paso:
Dividamos este efecto en sus partes:
Texto verde
p>Sombra paralela roja
El texto y la sombra paralela están separados por un espacio transparente
El texto tiene un efecto sucio y desgastado
Nuestro filtro SVG se construye combinando múltiples módulos pequeños, también llamados "primitivas de filtro". Cada módulo se construye a partir de un conjunto o más primitivos, que luego se combinan en una salida unificada. Las imágenes a continuación pueden ayudarlo a comprender:
Los pasos para crear filtros complejos, las mejores ilustraciones
Agregar filtros
Comenzamos desde un archivo SVG de plantilla vacío para filtros y texto que comienza con:
lt;svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink ="http: //www.w3.org/1999/xlink"gt;
lt;defsgt;
lt;style type="text/css"gt;
p>
lt;![CDATA[
.filtered{
filtro: url(#myfilter);
…
}
]]gt;
lt /stylegt;
lt; filtro id="mifiltro"gt; lt ;!-- filtrar cosas que suceden aquí --gt;
lt;/filtergt;
lt;/defsgt;
lt;g class=" filtrado "gt;
lt; text x="0" y="200" transform="rotate(-12)"gt; Petrollt;/textgt;
lt;/ ggt ;
lt;/svggt;
Elemento de filtro
Partimos del elemento de etiqueta de filtro Entre sus etiquetas de inicio y fin, podemos colocar transform, Todas las reglas para colores, operaciones de mapas de bits, etc. Los filtros se pueden aplicar como atributos en el elemento de destino o mediante CSS. El elemento de destino suele ser un elemento en SVG, pero más adelante veremos otra opción interesante: aplicar filtros SVG a elementos HTML.
Varios atributos utilizados para controlar el elemento de filtro:
posición xey (predeterminado -10);
ancho y alto (predeterminado 120); p>
atributo id, requerido para referencias posteriores;
filterRes, solución predefinida (no recomendada en la especificación "Módulo de efectos de filtro nivel 1");
Unidades relativas (predeterminado objectBoundingBox) o unidades absolutas (userSpaceOnUse predeterminado) filterUnits.
Acerca de las primitivas de filtro
Como ya sabemos, las primitivas de filtro son una parte integral de los filtros SVG. Cualquier efecto contiene al menos una primitiva. Una primitiva suele contener una o dos entradas (in, in2) y una salida (resultado). Las entradas primitivas incluyen desenfocar, mover, rellenar, combinar o distorsionar, etc.
Esta especificación nos permite utilizar varias propiedades del elemento filtrante como fuentes de entrada. Dado que la mayoría de las propiedades no funcionan en todos los navegadores, en este artículo usaremos SourceGraphic (elementos sin filtrar, con colores, trazos, sombreados, etc.) y SourceAlpha (áreas opacas con canales alfa, es decir, la parte rellena de negro en la imagen original), los cuales tienen muy buena compatibilidad con el navegador.
Cómo espesar el texto de entrada
La primera primitiva de filtro que debemos entender es feMorfología, que se utiliza para espesar o adelgazar la entrada (operator="dilate") (operator=" erosionar") - por lo tanto, ideal para crear contornos y bordes.
Así es como espesamos SourceAlpha en 4 píxeles:
Imagen engrosada en 4 píxeles
lt; feMorphology operator="dilate" radio ="4" in="SourceAlpha" result="BEVEL_10" /gt;
Crear una proyección
El siguiente paso es crear una proyección 3D basada en la primitiva anterior, combinada con feConvolveMatrix. Esta primitiva de filtro es una de las más poderosas y difíciles de dominar. Principalmente te ayuda a crear tus propios filtros. En resumen, define una trama de píxeles (una matriz del núcleo) que cambia según los valores de sus píxeles vecinos. Esto le permite crear sus propios efectos de filtro, como desenfoque, filtros de nitidez o sombra paralela.
Esta es una proyección de 45 grados y 3 píxeles de profundidad creada por feConvolveMatrix. El atributo de orden define el ancho y el alto, de modo que la primitiva sepa si aplicar una matriz de 3x3 o una matriz de 9x1:
Utilice feConvolveMatrix para crear una entrada de proyección engrosada
lt; = "3, 3" kernelMatrix=
"1 0 0
0 1 0
0 0 1" in="BEVEL_10" resultado="BEVEL_20" / gt;
Teniendo en cuenta que IE11 y Microsoft Edge no pueden manejar matrices de más de 8x8, ni pueden manejar bien matrices complejas, es mejor eliminar todos los retornos de carro antes de implementar este código.
Esta primitiva también se puede aplicar a las direcciones izquierda, superior, derecha e inferior. Como queremos que la proyección esté en la parte inferior derecha, debemos modificar el resultado.
Las dos propiedades targetX y targetY definen el punto de partida del efecto. Lamentablemente, IE los analiza de forma diferente que otros navegadores. Por lo tanto, para mantener la compatibilidad entre navegadores, usaremos otra primitiva de filtro feOffset para manejar esto.
COMPENSACIÓN
Como sugiere el nombre, feOffset requiere un valor de entrada, como sigue:
lt; feOffset dx="4" dy="4" in ="BEVEL_20" result="BEVEL_30"/gt;
Recortar la parte proyectada
feComposite es una de las pocas primitivas de filtro que requiere dos entradas. Utiliza la síntesis de Porter-Duff para combinar dos imágenes. feComposite se puede utilizar para enmascarar o recortar elementos. Así es como restar el resultado de feMorphology del resultado de feConvolveMatrix.
Recorta la primera primitiva en negrita de la proyección
lt;feComposite operator="out" in="BEVEL_20" in2="BEVEL_10" result="BEVEL_30" /gt;
Sombrear la proyección
Este proceso consta de dos pasos:
Primero, utilizamos feFlood para crear un área sombreada. Esta primitiva simplemente generará un rectángulo basado en el color que definimos en el área de filtro.
lt;feFlood Flood-color="#582D1B" result="COLOR-red" /gt;
Luego usamos un feComposite para recortar la parte transparente de BEVEL_30:
p>
Colorear la proyección
lt;feComposite in="COLOR-red" in2="BEVEL_30" operator="in" result="BEVEL_40" /gt;
Combina el bisel y la imagen original en una sola salida
feMerge puede generar el bisel y la fuente juntos:
Mezcla el bisel y la imagen original en una sola salida
lt; feMerge result="BEVEL_50"gt;
lt;feMergeNode in="BEVEL_40" /gt;
lt;feMergeNode in="SourceGraphic" /gt;
lt;/feMerget;
Parece el resultado que esperábamos. Démosle un efecto desgastado para que parezca más realista.
Agregar texturas fractales
feTurbulence es una de las primitivas más divertidas. Sin embargo, podría derretir su CPU multinúcleo y hacer que sus ventiladores giren como un turborreactor Boeing 747. Por lo tanto, utilícelo con precaución, especialmente en dispositivos móviles, ya que esta primitiva puede tener un impacto muy negativo en el rendimiento de renderizado.
Al igual que feFlood, feTurbulence genera un rectángulo relleno, pero utiliza una textura desordenada y desestructurada.
Tenemos a mano varios valores que pueden usarse para cambiar la textura y el ritmo de la textura. De esta forma podemos crear superficies como efectos de madera, arena, acuarela o cemento agrietado. Estas configuraciones tienen un impacto directo en el rendimiento del filtro, así que pruébelas minuciosamente.
Aquí está el código sobre cómo crear una textura similar a un pincel:
lt;feTurbulence baseFrequency=".05,.004" width="200" height="200" top="-50" type ="fractalNoise" numOctaves="4" seed="0" result="FRACTAL-TEXTURE_10" /gt;
De forma predeterminada, feTurbulence genera una textura coloreada, no la que queremos. Necesitamos una imagen alfa en escala de grises; estaría bien un poco más de contraste. Utilice feColorMatrix para aumentar el contraste y convertirlo a escala de grises:
Finalmente, agregue el efecto de textura fractal
lt feColorMatrix type="matrix" value=
"0 0 0 0 0,
0 0 0 0 0,
0 0 0 0 0,
0 0 0 -1,2 1,1 "
in="FRACTAL-TEXTURE_10" result="FRACTAL-TEXTURE_20" /gt;
Lo último que debemos hacer es combinar la textura alfa y el texto, todavía usando nuestro antiguo amigo feComposite:
lt; feComposite in="BEVEL_50" in2="FRACTAL-TEXTURE_20" operator="in"/gt;
Finalmente hecho O(∩_∩)O ~
Cómo aplicar filtros SVG a SVG
Aquí hay dos formas de aplicar filtros SVG a elementos de texto SVG:
Vía CSS
p>.filtered {
filtro: url(#filter);
}
Por atributo
lt text filter="url(#filter; )"gt;Algunos textlt;/textgt;
Aplicar filtros SVG al contenido HTML
Una de las características más escalofriantes de los filtros es que pueden incrustar SVG, definir un filtro en SVG y aplíquelo a cualquier elemento HTML usando CSS:
filter: url(#mySVGfilter);
Mientras escribo esto Al escribir este artículo, tanto Blink como WebKit deben agregar un prefijo , de la siguiente manera:
-webkit-filter: url(#mySVGfilter);
Esto suena fácil en teoría, pero en la práctica, es un arte oscuro orz:
WebKit, Firefox y Blink actualmente admiten la aplicación de filtros SVG al contenido HTML. IE y Microsoft Edge mostrarán elementos sin filtros, así que asegúrese de que el estilo predeterminado se vea bien ~
Es posible que los SVG que contengan filtros no estén configurados para mostrar: ninguno. Pero puedes configurar la visibilidad: ocultarte tú mismo.
A veces, el tamaño del SVG afectará directamente la cantidad de elementos de destino aplicados.
¿Mencioné que WebKit, Blink y Firefox entienden esta sintaxis? Bueno, Safari (y su pequeño amigo, Mobile Safari) es un caso especial. Puedes ejecutar estas demostraciones en Safari, pero probablemente te volverás loco.
Al momento de escribir este artículo, no recomiendo usar filtros SVG en contenido HTML en la versión actual de Safari (8.0.6). Como los resultados son impredecibles, la tecnología no es invulnerable. Peor aún, si Safari no puede representar su filtro por algún motivo, tampoco mostrará el elemento HTML de destino, ooohhh pesadilla :-(. Según la regla general, aumenta la cantidad de veces que permite que Safari muestre su filtrar Oportunidad, mediante el posicionamiento absoluto y la fijación del tamaño del elemento de destino. Como prueba de concepto, he configurado un efecto de filtro "popular", optimizado para Safari de escritorio, donde la aplicación de un feImage a un elemento HTML parece funcionar. es imposible
DEMOSTRACIÓN anterior, aplicada al contenido HTML
En estas demostraciones, los elementos envolventes están configurados en contenteditable = "true" para facilitar la edición de texto. experimental y no funcionará en Safari, IE o Edge)
Texto relleno con imagen
Rellenar texto con imágenes
Extruido y relleno con patrón
Extruido e iluminado
Aspecto grunge con la ayuda de filtros fractales
El efecto grunge logrado con la ayuda de filtros fractales
feTurbulencia para lograr el efecto de agua derramada
feTurbulencia para lograr el efecto de agua salpicada
Algunos efectos de color pop-arty
Efectos de color pop-arty
Estilo incompleto
Estilo pintado a mano
Filtros personalizados
Dependiendo de su complejidad, un filtro puede ser algo complejo. Al crear un filtro, puede agregar o eliminar reglas. Cambie su orden y valores, pero pronto se confundirá. Aquí hay algunas reglas que escribí para ayudarme a rastrear los problemas a medida que ocurren. Lo que me parece lógico y estructurado puede parecerle confuso e incomprensible. en mente.
Agrupación
Dividí las primitivas de filtro en varios grupos según sus propias funciones, como: "borde", "relleno", "bisel", etc. Al principio y al final del módulo, tomaré notas según el nombre del grupo.
Nombres
Las buenas reglas de nomenclatura pueden ayudarle a organizar mejor los filtros y es conveniente realizar un seguimiento. las condiciones internas y externas de la primitiva Después de experimentar con esquemas similares a BEM, finalmente me decidí por una estructura de nombres muy simple:
NOMBRE-DE-GRUPO_número-de-pedido
Por ejemplo. , puedes usar nombres como BEVEL_10, BEVEL_20, OUTLINE_10, etc. Empiezo en 10 y uso 10 como incremento para que sea más fácil ajustar el orden de las primitivas y agregar primitivas en el medio o al principio de un grupo de primitivas. Prefiero usar bloques completos de contenido juntos porque me ayudan a escanear el contenido original más rápido.
Seguir declarando entradas y resultados
Aunque no es obligatorio, suelo declarar una "entrada" y un "resultado". (Si se omite, la salida de la primitiva toma por defecto la entrada de su sucesora)
Algunos componentes básicos
Veamos primero lo que puede lograr una sola técnica.
Luego, al combinar estos componentes básicos, podemos crear nuevos efectos de filtro complejos.
Trazo de texto
Delineado
lt;!-- 1. Espesar la entrada con feMorfología: --gt;
lt ; feMorphology operator="dilate" radio="2"
in="SourceAlpha" result="thickened" /gt;
lt;!-- 2. Cortar SourceAlpha - -gt;
lt;feComposite operator="out" in="SourceAlpha" in2="thickened" /gt;
Este método no garantiza que el resultado se verá bien. Especialmente cuando combina dilatación con valores de radio más grandes, los resultados pueden ser peores que la geometría creada con ancho de trazo. Dependiendo de la situación, una mejor opción es almacenar el texto en un elemento de símbolo, luego insertarlo mediante uso cuando sea necesario y luego espesarlo mediante la propiedad de ancho de trazo de CSS. Tenga en cuenta que el ancho del trazo no se puede aplicar al contenido HTML.
Arrancado
Arrancado
lt;!-- 1. crear un relleno fractal feTurbulence --gt;
lt ; feTurbulence result="TURBULENCE" baseFrequency="0.08"
numOctaves="1" seed="1" /gt;
lt;!-- 2. crear un mapa de desplazamiento que toma el relleno fractal como entrada para distorsionar el objetivo: --gt
lt; feDisplacementMap in="SourceGraphic" in2="TURBULENCE" scale="9" /gt;
Relleno de color
Coloreado
lt;!-- 1. Cree un área rellena de color --gt;
lt;feFlood Flood-color=" # F79308" result="COLOR" /gt;
lt;!-- 2. Cortar SourceAlpha --gt;
lt;feComposite operator="in" in= " COLOR" in2="SourceAlpha" /gt;
Una cosa que hay que mencionar es que, además de feFlood, feColorMatrix es otro método que puede cambiar el color de entrada original, aunque el concepto en sí es más difícil de entender.
COMPENSACIÓN
Off Set.
lt;!-- Compensar el gráfico de entrada por la cantidad definida en sus atributos "dx" y "dy": - -gt;
lt;feOffset in="SourceGraphic" dx="10" dy="10" /gt;
Proyección
Extruido
lt;!-- Define una matriz de convolución que aplica un bisel. --gt;
lt;!-- El orden define la profundidad del ángulo de extrusión se define por la posición de "; 1" en la matriz. Aquí vemos una extrusión de 45 grados y 4 píxeles de profundidad: --gt;
lt; feConvolveMatrix order="4, 4"
kernelMatrix= "
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1" in="SourceAlpha " result="BEVEL" /gt;
lt;!-- extrusión desplazada: --gt;
lt;feOffset dx="2" dy ="2" in= "BEVEL" resultado="OFFSET" /gt;
lt;-- fusionar desplazamiento con Fuente:
lt; lt;feMergeNode in="OFFSET" /gt;
lt;feMergeNode in="SourceGraphic" /gt;
lt;/feMergegt;