Las ventajas de utilizar SVG en el desarrollo web son bien conocidas . Los SVG son de tamaño pequeño, pueden hacerse bastante accesibles, son escalables manteniendo su calidad y pueden animarse. Aún así, hay una curva de aprendizaje. Cosas, como la sintaxis de SVG, pueden ser un poco complicadas y tener que modificar manualmente el código SVG a veces no está fuera de discusión.

La mayoría de los recursos SVG permiten aplicar estilos de forma predecible. Por ejemplo, este círculo tiene un estado de desplazamiento que funciona de manera muy similar a cualquier otro elemento en el DOM.

Sin embargo, un problema que encontró en varios proyectos front-end es que un cliente, diseñador o sitio de recursos de marca proporciona un SVG activo subóptimo . No hay nada “malo” en estos archivos, pero el código SVG requiere un manual de revisión para lograr la funcionalidad necesaria. En lugar de solicitar archivos nuevos, suele ser más fácil modificarlos yo mismo.

Diseñar archivos SVG es complicado por el hecho de que, como archivos basados ​​en XML, actúan como HTML en algunos aspectos, pero no en otros. Trabajemos con un ejemplo proporcionado por el propio Instagram (que también se puede encontrar fácilmente en Wikipedia ). Debido a que los espacios entre los caminos actúan como una especie de transparencia, esta imagen muestra cualquier fondo que se haya aplicado detrás de ella.

¿Por qué no hay un color de fondo en el SVG para que podamos aplicar un cambio de color al pasar el mouse (por ejemplo svg:hover { background: #888; })? Es porque los caminos llenan el reverso del espacio que uno pensaría que ocuparían. El espacio negativo representa todo lo que se encuentra detrás de este elemento ( bodyen los ejemplos de CodePen a continuación). A menudo, esto no es un problema e incluso puede ser deseable para diseños de fondo grandes para garantizar transiciones orgánicas entre áreas de contenido. Sin embargo, debido a que estoy usando este SVG como enlace, tendré que modificar el archivo para poder diseñar el espacio detrás de él.

svg  viewBox="0 0 24 24"  titleInstagram/title  path d="..." transform="translate(0 0)" fill="#fff"/  path d="..." transform="translate(0 0)" fill="#fff"/  path d="..." transform="translate(0 0)" fill="#fff"//svg

El logotipo de Instagram es un ejemplo perfecto de un archivo SVG incómodo que requiere más delicadeza de CSS que la mayoría. Nuevamente, este SVG no tiene nada de malo, pero presenta algunos desafíos de estilo. Para agregar un estado de desplazamiento que altere el fondo, necesitaremos cambiar el código anterior.

Hay varias formas de hacerlo, pero la solución más sencilla es agregar otro elemento detrás de la imagen. Debido a que el ícono de Instagram es rectangular, podemos agregar un rectelemento detrás de las tres rutas de primer plano que componen este SVG. Si el logo fuera circular u ovalado, habría usado el elemento circleo ellipse. Asegúrese de establecer una altura y un ancho que coincidan al viewBoxagregar este tipo de elemento, y use el rxvalor para redondear las esquinas según sea necesario. En lugar de agregar una clase o rellenar cada ruta en el elemento SVG, podemos apuntar a los elementos recty pathen el archivo CSS.

La ventaja de este enfoque es su simplicidad. En lugar de tener que modificar varios archivos o utilizar JavaScript o bibliotecas de JavaScript de terceros, podemos agregar una línea de código al bloque de código SVG y aplicarle estilo.

Si, por alguna razón, necesita o simplemente prefiere dejar el archivo SVG como está, puede revisar el CSS para lograr una funcionalidad similar.

Podríamos agregar una backgroundpropiedad a la social-linkclase pero, para este tutorial, usaré la estrategia un poco más complicada, pero igualmente efectiva, de revisar un SVG aplicándole un pseudoelemento. En el siguiente ejemplo, utilizó la ::beforepseudoclasa para agregar una forma y la opacitypropiedad para hacerla visible al pasar el mouse. Para evitar que esta forma deje un borde alrededor del ícono, lo hice un poco más pequeño que el SVG usando las propiedades heighty width( calc(100% - 2px)). Luego centro el pseudoelemento detrás del SVG y hago coincidir la propiedad de transición tanto para el elemento como para el pseudoelemento.

/* Sets the link's dimensions */.social-link {  display: block;  height: 24px;  position: relative;  width: 24px;}/* Targets the pseudo-element to create a new layer */.social-link::before {  background: #fff;  border-radius: 2px;  content: "";  display: block;  height: calc(100% - 2px);  opacity: 0;  position: absolute;  transition: all 0.2s ease-in-out;  width: calc(100% - 2px);}/* Changes the background color of the pseudo-element on hover and focus */.social-link::before:hover, .social-link::before:focus {  background: #000;}/* Makes sure the actual SVG element is layered on top of the pseudo-element */.social-link svg {  position: relative;  z-index: 1;}/* Makes the background-color transition smooth */.social-link svg path {  transition: all 0.2s ease-in-out;}/* SVG paths are initially white */.social-link path {  fill: #fff;}/* The pseudo-elememt comes into full view on hover and focus */.social-link:hover::before, .social-link:focus::before {  opacity: 1;}/* Fills the SVG paths to black on hover and focus  */.social-link:hover svg path, .social-link:focus svg path {  fill: #000;}

Recomiendo las estrategias anteriores para una solución rápida porque usar JavaScript básico o una biblioteca de JavaScript como vivus.js o raphaeljs es excesivo para agregar un estado de desplazamiento a un SVG en la mayoría de los casos. Sin embargo, hay ocasiones en las que es preferible modificar un SVG usando JavaScript. Debido a que JavaScript es sin duda el método más flexible para cambiar estilos, examinamos cómo se vería.

Mi ejemplo separa el archivo JavaScript, pero si desea agregar JavaScript dentro del elemento SVG, deberá agregar un scriptelemento, como un archivo HTML. Asegúrese de agregar un marcador CDATA a su scriptelemento para asegurarse de que se analice como XML.

Estoy usando jQuery para simplificar un poco las cosas y mantener CSS lo más mínimo posible, aunque para mayor claridad, agregué una backgroundpropiedad en la social-linkclase en el archivo CSS en lugar de agregarla mediante JavaScript. Tenga en cuenta que esta solución apunta svg patha alterar el método CSS en lugar de asignar una clase a estas rutas porque, en este caso, cada ruta debe tratarse de la misma manera.

Hay muchas formas de diseñar archivos SVG, pero los ejemplos recopilados en este artículo son útiles y ampliables. Las estrategias para modificar archivos SVG deben evaluarse mediante la funcionalidad completa de una aplicación, pero sospecho que la mayoría de los desarrolladores de aplicaciones para el usuario encontrarán que el rectelemento ofrece la solución más simple y legible.

Agradecimientos

Muchas gracias a Joe Essey y a mis amigos de Nebo Agency, Allison Lewis y Nile Livingston (consulte el artículo de Nile, “SVG para la Web” ).