Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG

Manipulando Iconos SVG Con CSS Simple

by
Read Time:6 minsLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Este artículo es el segundo en una serie de tres partes mostrando las nuevas aproximaciones a iconografía que Iconic estará entregando.


Estilizando Iconos Con CSS

Los iconos inteligentes han atraído mucho interés, pero estilizar podría ser la característica más interesante en una base cotidiana. Los conjuntos de iconos cubren un amplio arreglo de diferentes temas, aunque son generados en un solo estilo visual. Esto es frecuentemente apropiado, si no es que óptimo. Sin embargo, hay muchas situaciones en donde iconos específicos pueden y deberían tener estilo específico (sea color, ancho de trazo, u otros atributos).

El estilo no era una posibilidad con imágenes estáticas (a menos que sacaras archivos para cada estética diferente). Las tipogragías de iconos nos acercaron más permitiendo estilizado simple, pero on era granular---significando que si coloreabas el icono de rojo, todo el icono sería rojo. Con SVG, la libertad existe para estilizar elementos individuales dentro de un icono, que abre enteramente nuevas posibilidades.


Un Icono, Posibilidades Infinitas

La combinación de SVG y CSS es mágica. La imagen puede tomar diferentes aspectos, tener tratamientos hechos a la medida e interesantes transiciones interactivas. El marcado SVG proporciona acceso y control a todos los elementos contenidos en el. Esto significa que un icono de bombilla puede ser "encendido" con CSS, el icono de contraste puede ser estilizado para reflejar un contraste específico y un icono de semáforo puede comunicar ir. Poder estilizar al nivel elemental trae nueva vida a los iconos---ellos pueden ser verdaderamente únicos.

stylingstylingstyling
Mira esto en acción

Temas de Iconos

El siguiente paso lógico de estilizar iconos con CSS es crear temas de conjunto para una estética consistente. Parte de nuestro enfoque para Iconic es exponer y abordar los retos alrededor de temas de icono. Normalmente, estilizar un conjunto de iconos (más allá de simplemente cambiar el color), era una tarea laboriosa que dependía de tener los archivos fuente de vector. ¿No los tienes? Bueno, no tienes suerte.

Los iconos SVG pueden resolver este problema. Yo digo "pueden" porque estructurando consistentemente una colección de iconos SVG entera es difícil. Los iconos necesitan ser diseñados y construidos con el tema en mente para que los estilos sean consistentes a lo largo del conjunto. Sin embargo, cuando funciona, es muy impresionante de ver.

themingthemingtheming

Hemos juntado un demo para mostrar el tema de iconos en acción. Este te muestra cuánto puede hacerse cuando las reglas CSS son aplicadas a un conjunto entero de iconos.

Juega con nuestro demo de temas de iconos.


Casos de Uso Interesantes

El estilizado de iconos puede ir mucho más allá que solo cambios arbitrarios de color. Esta aproximación nos da la oportunidad de proporcionar otra capa valiosa de información.

Proporciona información contextual simple

Piensa en todos lo iconos que ves en una interface que muestran información contextual. Solo piensa en los iconos de brocha o relleno en varias aplicaciones que comunican con qué color vas a dibujar o rellenar. Los iconos SVG que están diseñados para ser estilizados pueden hacer justo eso.

contextual-stylescontextual-stylescontextual-styles

Estados de Esilizado

Comunicar estado con un icono es frecuentemente tan simple como usar color. Esto puede ya puede ser logrado con fuentes de iconos, ¿pero qué si quisieras ir más allá de un simple cambio de color? Este es otro caso de uso perfecto para SVG y CSS. Por ejemplo, echemos un vistazo al icono de señal WIFI.

state-stylesstate-stylesstate-styles

Cómo funciona

Nota: El ejemplo de abajo aún es un prototipo prueba de concepto. Nada del siguiente código es final, solo una beta. Aún estamos en la fase R&D de esta aproximación y sabemos que hay muchos problemas que aún necesitan ser abordados. Estaremos trabajando en una dirección más concreta para este método después de que la campaña Kickstarter esté completa.

La mecánica de estilizar iconos es bastante simple. Si has usado CSS en el pasado (lo que asumo que has hecho), hay muy poco que aprender. Esa es una parte de lo que hace a este método tan grandioso---es soprendentemente poderoso usar las habilidades y herramientas que ya conoces. El estilizado SVG tiene un conjunto de reglas CSS enteramente únicas que necesitarás aprender, pero los conceptos son sencillos y requieren esfuerzo mínimo para recoger.

El trabajo real viene de diseñar y construir un icono para que sea realmente estilizable. Al igual que Smart Icons, este método depende de que el SVG sea directamente inyectado en el DOM y que sea estructurado semánticamente para estilizado. Esto va más allá de solo agregar clases a cada elemento en tu icono SVG (pero no hace daño). Cebar un icono para estilizar es un poco en la forma de arte. Estamos bastante seguros de que hay una ciencia en esto y esperamos escribir más sobre el proceso en el futuro. Nuestra meta con Iconic es ayudar a hacer este proceso claro y repetible para que otros diseñadores de iconos puedan hacer sus iconos estilizables.

Tomemos el ejemplo de estilizar el icono de señal WIFI para mostrar sus varios estados. Verás rápidamente qué tan aproximable es.

Mira el código en acción

HTML

JS

CSS

SVG: signal.svg

¿No tan mal, verdad? Una vez que un icono SVG se configura apropiadamente para ser estilizado, ¡el resto es pan comido!


Todo Esto Puede Ser Mejor Con SVG 2.0

Como puedes ver, puedes hacer mucho con SVG y CSS, pero aún hay algunas limitaciones. Uno de los principales problemas con los que nos encontramos es la alineación de trazo. Todos los trazos en SVG 1.1 tienen alineación centrada, significando que el trazo será dividido a partes iguales en cada lado de la ruta. No pensamos que esto sea óptimo para diseño de iconos por varias razones incluyendo recorte potencial en grosores incrementados de trazo y un proceso de dibujo más complejo para acomodar trazos alineados al centro.

Afortunadamente, esto es corregido en SVG 2.0---los trazos pueden ser ahora alineados al centro, interior y exterior. Desafortunadamente, parece que SVG 2.0 aún está lejos. Nuestra esperanza es que Iconic ayudará a reunir más interés en SVG y alentar un proceso más acelerado.


Conclusión

El estilizado de iconos ha sido un poco ignorado en Iconic, pero pensamos que es una técnica masivamente poderosa. Realmente creemos que va a tener un enorme impacto en la manera en que la gente usa y ve los iconos en el futuro. Lo grandioso sobre esta técnica es que la tecnología ya está ampliamente soportada---todo lo que necesitas son iconos que puedan sacar ventaja de esta.


Apoya a Iconic en Kickstarter

La meta de Iconic es ayudar a proporcionar nuevas aproximaciones a iconografía. Aún tenemos mucho que compartir contigo y esperamos compartir nuestra siguiente entrega.

iconic-logoiconic-logoiconic-logo

Por favor considera apoyar a Iconic en Kickstarter

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.