6 fallas comunes en SVG

— y cómo solucionarlas

Mariana Beldi
11 min readFeb 11

--

Parte I → Cómo postularse
Parte II → Pregunas respondidas
Anexo → 6 fallas comunes en SVG (y cómo solucionarlas)

Alguien me preguntó recientemente cómo debuggeo SVGs inline. Debido a que son parte del DOM, podemos inspeccionar cualquier SVG inline en cualquier navegador con las DevTools. Gracias a eso, tenemos la capacidad de analizar los elementos y descubrir cualquier problema u oportunidad potencial para optimizar el SVG.

Pero hay veces que ni siquiera podemos ver nuestros SVG. En esos casos, hay seis cosas específicas que busco cuando estoy depurando.

6 common SVG fails cover artwork

1. Los valores de viewBox

El viewBox es un punto común de confusión cuando se trabaja con SVG. Está técnicamente bien usar SVG inline sin él, pero perderíamos uno de sus beneficios más significativos: escalar con el contenedor. Al mismo tiempo, puede ser contraproducente cuando se configura de forma incorrecta, generando un recorte no deseado.

Los elementos están ahí cuando están clipeados, solo que están en una parte del sistema de coordenadas que no vemos. Si abriéramos el archivo en algún programa de edición de gráficos, se vería algo así:

Captura de pantalla de SVG abierto en Illustrator.

¿La forma más fácil de arreglar esto? Agregar overflow="visible" al SVG, ya sea en nuestra hoja de estilo, inline en el atributo de estilo o directamente como un atributo de presentación SVG. Pero si también aplicamos un color de fondo al SVG o si tenemos otros elementos a su alrededor, las cosas pueden verse un poco mal. En este caso, la mejor opción será editar viewBox para mostrar esa parte del sistema de coordenadas que estaba oculta:

Demostración aplicando overflow="hidden" y editando viewBox.

Hay algunos puntos adicionales sobre el viewBox que vale la pena mencionar mientras estamos en el tema:

¿Cómo funciona el viewBox?

--

--

Mariana Beldi

I write about design + code + illustration & SVG. Head of Branding @ Leniolabs.comholasvg.com