Cómo dar color a una imagen svg en CSS
Las opiniones, hechos e interpretaciones expresadas en esta publicación, que no han sido sometida a revisión editorial o de otro tipo, son de exclusiva responsabilidad de sus autoras y pueden no coincidir con las de Adalab.”
Te sientas delante de tu ordenador, para seguir maquetando esa web tan chuli que te han encargado y que está quedando divina de la muerte. Le quieres poner unos cuantos iconos de redes sociales para que la gente sepa cómo localizarte. Comienzas a buscar y te haces con unos iconos de extensión .svg que son justo lo que buscabas, no se pixelan si los agrandas y además pesan muy muy poquito pero…. Horror!!! son de color negrooooo!!!! no pegan para nada con el diseño de la web, necesitarías más bien que fueran verdes…. ¿Y ahora qué hago yo?” piensas. La respuesta es muy sencilla…. Seguir leyendo este post :)
Imágenes .SVG
Las imágenes .svg Scalable Vector Graphics están desarrolladas en formato XML, es decir, son código que se puede ver y modificar. Si abres una imagen .svg con un editor de código te mostrará algo así:
Para poder manejar estas imágenes y cambiarles el color, lo primero que tenemos que hacer es meterlas dentro de nuestro código html. Y para hacerlas un poco más manejables, en vez de añadirlas directamente, vamos a minificarlas antes ¿Y esto qué es? Hacer el código más liviano, eliminando espacios en blanco y cosas innecesarias. Tranquila que no tienes que hacerlo tú, hay muchas aplicaciones web que lo hacen por ti. Yo utilizo y te recomiendo https://jakearchibald.github.io/svgomg/
Verás que después de minificar el código te ocupa la mitad o menos de lo que ocupaba… mucho más elegante para ponerlo en nuestro html.
Añadiendo los iconos .svg al código HTML
¿Y ahora donde lo colocamos? Justo después de la etiqueta <body > . Si añades varias imágenes verás que ocupan demasiado.
Si te manejas con SASS, mi recomendación es que hagas un parcial para tener ahí guardaditas las imágenes .svg y debajo de la etiqueta <body> haces la llamada a ese parcial.
Ahora, en el código minificado de los svg tenemos que hacer algunas modificaciones.
Primero creamos un contenedor <svg> para guardarlos a todos y le indicamos una clase, por ejemplo “icons-lib”
Cada imagen comenzará por la etiqueta <svg> la cambiamos por <symbol> y le añadimos un id para poder llamarlas posteriormente. El código quedará de la siguiente manera:
Ahora me ves, ahora no me ves
En este punto, si vemos la web desde un navegador,comprobaremos que las imágenes aparecen en la parte superior de la página. Para ocultarlas, utilizamos la clase “icons-lib” del contenedor de imágenes <svg>y desde css las ocultamos
¡Iconos preparados!
Ya tenemos las imágenes preparadas para utilizarlas. Las podemos llamar desde cualquier parte del código html, para ello hemos de utilizar la siguiente sintaxis:
donde #ico-mobile, es el id que hemos indicado en la etiqueta <symbol> de la imagen. La clase “color-icon” que hemos definido la utilizamos en css para cambiar el color de la imagen con la propiedad fill:
Bien… prueba ahora a verlo en el navegador. Siiii, se vé donde tú querías peeeero, quizás necesitas reajustar el tamaño de la imagen. Olvidate de hacerlo en css con width y height, lamento decirte que eso no va a funcionar.
Reajustando el tamaño de los .svg
Tenemos que volver a la etiqueta <symbol> donde tenemos nuestra imagen .svg minificada. Si, como es el caso del ejemplo, aparecen los atributos width y height, los eliminamos, y en su lugar ponemos el atributo viewbox=”0 0 400 400” los primeros dos valores son las coordenadas x e y respectivamente, los dos últimos valores son width y height respectivamente. Juega un poco con todos ellos para darle el tamaño que necesitas a la imagen y recolocarla si es necesario.
Voilá! Ya hemos cambiado el color de la imagen svg a través del CSS. Seguro que se le pueden cambiar más propiedades, pero eso ya te lo dejo a ti…
Espero haberte ayudado, si necesitas contactar conmigo puedes hacerlo a través de Twitter.
