Hay muchas formas diferentes de usar SVG. Dependiendo de qué manera, la táctica para cambiar el color de ese SVG en diferentes estados o condiciones: :hover, :active, :focus, cambio de nombre de clase, etc. – es diferente.
Veamos las formas.
SVG en línea
Inline SVG es mi forma favorita de usar SVG de todos modos, en parte debido a lo fácil que es acceder y diseñar el SVG.
Ver la pluma
bJXNyy por Chris Coyier (@chriscoyier)
en CodePen.
Si está acostumbrado a trabajar con fuentes de iconos, una cosa que puede disfrutar de ellas es lo fácil que es cambiar el color. Está limitado en gran medida a un solo color con fuentes de iconos de una manera que SVG no lo es, pero aún así, es sorprendentemente fácil cambiar ese color con color. El uso de SVG en línea le permite configurar fill, que se conecta en cascada a todos los elementos dentro del SVG, o puede llenar cada elemento por separado si es necesario.
Símbolo SVG / Uso
Existe un sprite SVG, que es un grupo de SVG convertidos en <symbol> elementos tales que cualquier icono dado pueda ser referenciado fácilmente con un <use> elemento.
Ver la pluma
Use SVG Hovers por Chris Coyier (@chriscoyier)
en CodePen.
Aún puede establecer el color de relleno desde fuera de CSS con bastante facilidad de esta manera, pero hay advertencias.
- Los elementos SVG internos (como el
<path>) no pueden llenarse por sí mismos. Esto permite que el conjunto de relleno del SVG principal se conecte en cascada al Shadow DOM creado por<use>. Tan pronto como tengas algo como<path fill="blue" ... />en el<symbol>, ha perdido el control de CSS externo. - Asimismo, el
fillde los elementos individuales no se pueden controlar dentro del SVG como podría hacerlo con el SVG en línea. Esto significa que está bastante firmemente en territorio de un solo color. Eso cubre la mayoría de los casos de uso de todos modos, pero aún así, es una limitación.
Imágenes de fondo SVG
SVG se puede configurar como una imagen de fondo como PNG, JPG o cualquier otro formato gráfico. En este punto, ha renunciado a poder cambiar el fill. Una posibilidad, que yo diría que no es particularmente buena, es tener dos versiones de cada ícono, en los colores respectivos, e intercambiar entre ellos:
Ver la pluma
Fondo SVG Hovers por Chris Coyier (@chriscoyier)
en CodePen.
No te culpo si prefieres no intercambiar fuentes, por lo que otra posibilidad es ponerte complicado con los filtros.
Ver la pluma
Fondo SVG flotante con filtros por Chris Coyier (@chriscoyier)
en CodePen.
Tratar de encontrar los filtros correctos para obtener el color correcto es algo complicado. Afortunadamente, Barrett Sonntag creó una herramienta para calcular los filtros por usted. Cambiar de negro a rojo resulta en una combinación loca como esta: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);.
SVG también tiene object, lo cual es un poco bueno porque tenía un respaldo incorporado en el día, aunque el soporte del navegador es tan bueno en estos días, honestamente nunca lo he usado. Pero si lo está usando, probablemente tenga que usar este filter técnica para cambiar de color al pasar el mouse.
Ver la pluma
Objetos flotantes SVG de fondo por Chris Coyier (@chriscoyier)
en CodePen.
Use una máscara en lugar de una imagen de fondo
De esta manera, el SVG todavía está a cargo de dibujar esencialmente la forma, pero el color proviene del background-color (¡o imagen! ¡o degradado!) detrás de él en lugar del SVG en sí.
Ver la pluma
Fondo SVG flotante con máscara por Chris Coyier (@chriscoyier)
en CodePen.
Imágenes de fondo SVG como URL de datos
Esto no cambia mucho desde arriba, pero abre una posibilidad interesante: usar una variable para los rellenos internos. Aquí es con Sass manteniendo las URL como variables:
Ver la pluma
Fondo SVG flotante con variables de URL de datos por Chris Coyier (@chriscoyier)
en CodePen.
¡También puede hacer esto con propiedades personalizadas de CSS nativo!