SVG con css en páginas web para tus íconos

admin

April 29, 2016

html

No Comment

Si habitualmente usas en tus web un set de íconos, para social media por ejemplo (facebook logo, twitter logo), sabrás que es un dolor de muelas estar modificando las imágenes cambiandoles los colores para que vayan con la paleta del sitio, cada nuevo sitio que haces.

¿No sería grandioso usar solo una imagen y cambiar solamente los colores con hojas de estilo?
Pues es posible, utilizando objetos SVG como imágenes.

Primero, en el archivo svg, le ponemos un “id” al elemento que queremos modificar (línea 11) y agregamos la referencia a la hoja de estilos (línea 2):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="mystyle.css"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   ...
>
<g
   id="logo"
   >
	<path
   id="Facebook"
   d="M158.081,83.3c0,10.839,0,59.218,0,59.218h-43.385v72.412h43.385v215.183h89.122V214.936h59.805   c0,0,5.601-34.721,8.316-72.685c-7.784,0-67.784,0-67.784,0s0-42.127,0-49.511c0-7.4,9.717-17.354,19.321-17.354   c9.586,0,29.818,0,48.557,0c0-9.859,0-43.924,0-75.385c-25.016,0-53.476,0-66.021,0C155.878-0.004,158.081,72.48,158.081,83.3z"
   />
</g>
</svg>

Luego, en la hoja de estilos que declaramos en el SVG, para el elemento que acabamos de declarar modificamos las propiedades. Deben ser propiedades SVG, no HTML.

#Facebook {
	fill: red;
}

Por ultimo, utilizamos el svg como objeto dentro de nuestro HTML.

<html>
<body>
	<object data="facebook-letter-logo-edit.svg" height="50px" type="image/svg+xml">
	  <img src="yourfallback.jpg" />
	</object>
</body>
</html>

Y voila! Podemos modificar loas propiedades de estilo de las imágenes en curvas con CSS, adecuándolas a la paleta de cada sitio conjuntamente con nuestro HTML, sin necesidad de estar utilizando los programas de diseño cada vez.

svg test

Happy coding! 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Busca en el blog aqui

Herramientas Útiles

Suscribete al blog

Recibe en tu correo las últimas publicaciones

Publicidad

Sígueme en Twitter