Blog
SVG es un gran formato para iconos. Los formatos vectoriales se ven nítidos y nítidos, sin importar el tamaño o el dispositivo, y obtenemos toneladas de control de diseño cuando los usamos en línea.
SVG
SVG también nos da otra característica poderosa: la capacidad de manipular sus propiedades con CSS. Como resultado, podemos hacer interacciones rápidas y sencillas donde antes se necesitaban trucos CSS astutos o intercambiar archivos de imagen completos.
Esas interacciones incluyen el cambio de color en los estados de desplazamiento. Suena como algo tan sencillo aquí en 2019, pero en realidad hay algunas formas totalmente válidas de hacerlo, lo que solo demuestra más los increíbles poderes de SVG.
En primer lugar, comencemos con un pequeño marcado SVG abreviado:
<svg class="icon">
<path .../>
</svg>
.icon:hover {
fill: #DA4567;
}
Esta es, con mucho, la forma más fácil de aplicar un estado de desplazamiento de color a un SVG. ¡Tres líneas de código!
También se puede hacer referencia a los SVG mediante una etiqueta o como imagen de fondo. Esto permite que las imágenes se almacenen en caché y podemos evitar inflar su HTML con trozos de código SVG. Pero la desventaja es grande: ya no tenemos la capacidad de manipular esas propiedades usando CSS. Cada vez que me encuentro con íconos que no están en línea, mi primer puerto de escala es insertarlos, pero a veces esa no es una opción. img
Filtros
Los filtros CSS nos permiten aplicar un montón de efectos geniales, al estilo de Photoshop, directamente en el navegador. Los filtros se aplican al elemento después de que el navegador renderiza el diseño y la pintura inicial, lo que significa que retroceden correctamente. Se aplican a todo el elemento, incluidos los elementos secundarios. Piense en un filtro como una lente colocada sobre la parte superior del elemento al que se aplica.
brightness();
contrast();
grayscale();
invert();
opacity();
saturate();
sepia();
hue-rotate();
blur();
drop-shadow();
Todos los filtros toman un valor que se puede cambiar para ajustar el efecto. En la mayoría de los casos, este valor puede expresarse en unidades decimales o porcentuales (p. ej. o ).brightness(0.5)brightness(50%)
Nada más sacarlo de la caja, no hay ningún filtro CSS que nos permita añadir nuestro propio color específico. Tenemos , pero eso solo ajusta un color existente; No agrega un color, lo cual no es bueno ya que estamos comenzando con un ícono monocromático.hue-rotate()
Lo que cambia las reglas del juego sobre los filtros CSS es que no tenemos que usarlos de forma aislada. Se pueden aplicar varios filtros a un elemento separando por espacio las funciones de filtro.
Si necesitamos un control más preciso (y un mejor soporte para navegadores) que el que pueden ofrecer los filtros CSS, entonces es hora de recurrir a SVG.
Los filtros provienen originalmente de SVG. De hecho, bajo el capó, los filtros CSS son solo accesos directos a filtros SVG con un conjunto particular de valores incorporados.
A diferencia de CSS, el filtro no está predefinido para nosotros, por lo que tenemos que crearlo. ¿Cómo lo hacemos?
Los filtros SVG se pueden aplicar al contenido SVG dentro del mismo documento SVG. O bien, se puede hacer referencia al filtro y aplicarlo al contenido HTML en otro lugar.
Para aplicar un filtro SVG al contenido HTML, hacemos referencia a él de la misma manera que un filtro CSS: mediante la función filter. La dirección URL apunta al ID del filtro SVG.url()
El filtro SVG se puede colocar en línea en el documento o la función de filtro puede hacer referencia a un SVG externo. Prefiero la última ruta, ya que me permite mantener mis filtros SVG ordenados en una carpeta de activos.
En este momento, este filtro está vacío y no hará nada, ya que no hemos definido una primitiva de filtro. Las primitivas de filtro son las que crean los efectos de filtro. Hay una serie de primitivas de filtro disponibles para nosotros, que incluyen:
Al igual que con los filtros CSS, podemos usarlos solos o incluir múltiples primitivas de filtro en la etiqueta para obtener efectos más interesantes. Si se utiliza más de una primitiva de filtro, cada operación se basará en la anterior. "filter"
Eventos
La animación es una de las mejores maneras de aportar personalidad y carácter de marca a una experiencia en línea, pero en el ajetreado mundo del desarrollo front-end, a menudo se puede pasar por alto.
En este taller cubrimos todo lo que necesitas saber para empezar y dominar la animación SVG.
SVG es un gran formato para crear gráficos ilustrativos en la web, pero a veces puede parecer un poco... ¿plano?
La ilustración en el mundo real es gloriosamente desordenada. Está lleno de texturas, errores humanos, manchas y salpicaduras de pintura. En esta charla echamos un vistazo a cómo podemos usar diferentes técnicas SVG para recrear algo de 'desorden' táctil
¿Alguna vez te has sentido poco inspirado por la rutina diaria?
¿Como si la codificación fuera todo trabajo y nada de diversión? Yo también.
En esta charla explico cómo jugar con SVG me ayudó a explorar algunas API de navegador nuevas y divertidas. Doy algunos consejos sobre cómo empezar, comparto algunas demostraciones y aconsejo sobre cuándo buscar una biblioteca de animación.
