Jugando con svg’s y CSS

Hace poquito me puse a hacer unas pruebas, para ver que se puede hacer con gráficos svg en el browser.

Para esto usé el logo de Cambá, que fue diseñado usando Inkscape, un editor de gráficos vectoriales libre (por supuesto, no iba a usar illu$trator :p).

Entonces, agarré el archivo con el logo, desde inkscape lo guardé como svg plano, y luego, abrí ese archivo con un editor de texto, y así es como se ve un svg «desde adentro»:

Y este es el svg que vemos normalmente:

Si te fijás en el código del svg, vas a ver que se repiten unos tags similares a esto:

cada uno de esos, es uno de los circulitos del logo. Entonces, para «pegarle» a cada uno de esos circulitos con nuestro CSS, los vamos a seleccionar utilizando el prefijo que tienen en común: la palabra «circle».

Para que cambie el color y darle un efecto «blur» cada vez que posamos el puntero sobre los circulos, nuestro CSS debería verse así:

[id^='circle']:hover {
  cursor:pointer;
  fill:darkgreen !important;
  transition:.4s;
  filter: blur(4px);
}

Acá más info sobre selectores CSS.

Luego, para seguir jugando, hice lo mismo para el texto del logo, esta vez, usando el prefijo «path», que es el que tiene cada una de las letras

[id^='path']:hover {
  cursor:pointer;
  fill:darkgreen !important;
  stroke: darkgreen;
  transform: translate(0,10px);
  transition:.4s;
  stroke-width:4;
}

Hay que tener en cuenta que los SVG tienen estilos especiales en css, por ejemplo, para darle color debemos usar la propiedad «fill», acá una «chuleta» para tener a mano estas propiedades. También les dejo este otro post de CSS Tricks que me fue de mucha utilidad.

Podés ver el experimento online acá!

Y bueno, seguiremos jugando a ver que más se puede hacer!