Cómo aplicar filtros SVG en Illustrator CC

Los efectos, como la omnipresente sombra, son un elemento esencial en la caja de herramientas de todo diseñador. Es posible que haya notado que el menú Efecto de Adobe Illustrator CC incluye un submenú sustancial para filtros SVG. El conjunto de filtros disponible se está expandiendo a medida que Illustrator evoluciona para brindar más soporte para SVG.

Por cierto, si ha utilizado Illustrator durante años, es posible que recuerde que el menú Efecto solía enumerar efectos y filtros. Los filtros eran como efectos, excepto que no se podían editar fácilmente una vez aplicados. Pero los filtros SVG no son un renacimiento de esos tipos de filtros; Los filtros SVG se denominan filtros porque operan a través del elemento de filtro SVG en la codificación de páginas web.

Aquí hay otra cosa interesante sobre los filtros SVG: como descubrirá en breve, puede importar e incluso crear sus propios filtros SVG.

Cuando aplica un filtro SVG, puede parecer similar a un efecto que no es SVG. Por ejemplo, esta figura muestra dos cuadrados idénticos, pero el de la izquierda tiene aplicado un efecto de sombra paralela ráster y el de la derecha tiene aplicado un filtro de sombra paralela vectorial (SVG) .

Un efecto de sombra paralela (izquierda) y un filtro SVG (derecha).

Cuando selecciono el rectángulo con el filtro SVG, ese filtro aparece en el panel Apariencia, como se muestra.

ilustrador-filtro-sombra-paralela

Las diferentes formas en que los efectos y los filtros SVG cambian la ruta de un objeto tienen implicaciones sutiles pero reales. Algunas de esas implicaciones son relevantes solo para desarrolladores web y de aplicaciones, pero desde el final del flujo de trabajo, lo importante a tener en cuenta es evitar mezclar filtros SVG y efectos de trama en los proyectos porque afectan a los objetos de manera diferente.

Por cierto, no puedo evitar compartir aquí que el cuadrado con la sombra paralela de trama en estas figuras es casi siete veces más grande que el que tiene el filtro SVG. Solo un breve anuncio de servicio público de la industria de SVG sobre cómo puede perder peso (archivo) con SVG.

Y como ya habrá supuesto, los efectos de trama no son programables. Cuando se los entrega a un animador o un codificador HTML, su compañero de equipo desarrollador no tendrá el mismo tipo de libertad para controlar cómo funcionan los efectos de trama en una animación o una transición.

Por último, cuando aplica filtros SVG en lugar de efectos de trama a la ilustración SVG, no tiene que preocuparse de que esos filtros se degraden cuando se cambia la escala de la ilustración en un navegador.

Cómo aplicar filtros SVG

He defendido la aplicación de filtros SVG siempre que sea posible en las ilustraciones SVG. Veamos cómo sucede eso:

Seleccione los objetos a los que está aplicando el filtro.

Elija Efecto → Filtros SVG y seleccione un filtro.
El submenú SVG Filters tiene una lista de filtros con nombres que, en el mejor de los casos, son solo semi-intuitivos (como AI_Shadow_1, que es una sombra paralela) y, más a menudo, solo crípticos (como AI_Dilate_6). Tendrá que experimentar hasta que tenga una idea de cómo funcionan estos filtros.

Con el objeto al que aplicó el filtro aún seleccionado, vea el panel Apariencia (elija Ventana → Apariencia).

Pase el cursor sobre el filtro aplicado y haga clic en él para revelar el cuadro Aplicar filtro SVG, que se muestra aquí.

Edición de filtros SVG.

Aquí puede cambiar el filtro aplicado y usar la casilla de verificación Vista previa para ver cómo se verá el filtro. También puede seleccionar y eliminar un filtro SVG en el panel Apariencia, como se muestra.

Eliminando un filtro SVG.

Cómo importar filtros SVG

El conjunto de filtros de Illustrator es útil, pero difícilmente supera los límites de lo que puede hacer con los filtros SVG. Si codifica en HTML, encontrará un tutorial accesible para crear sus propios filtros SVG en w3schools .

También puede comprar conjuntos adicionales de filtros en línea e incluso encontrar algunos conjuntos agradables de filtros SVG sin SVG . Para instalar este conjunto de filtros u otros filtros, siga estos pasos:

Elija Efecto → Filtros SVG → Importar filtro SVG.

En el cuadro de diálogo que se abre, navegue y haga doble clic en el archivo de filtros SVG que descargó.
El archivo probablemente será un archivo SVG.

Elija Efecto–> Filtros SVG para aplicar nuevos filtros a los objetos seleccionados.
Después de importar filtros nuevos, aparecen en el submenú Filtros SVG.