SVG Magical Mystery Tour — Parte II

Un workshop en Nerdearla — Parte II: Preguntas respondidas

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

En este artículo quiero ampliar información que se habló en el taller, dejar links útiles para responder las preguntas que surgieron y para quienes estén interesados en profundizar más en el mundo de SVG.

Preguntas

-Recomendás tener conocimientos en matemáticas (y materias derivadas) para crear/manejar SVG? Más que nada para programadores dedicados a lógica más que a algoritmos.

No, pero ayuda. Sobre todo usando librerías como Three.js o D3.js donde se aplican más conocimientos de geometría, física y matemática en general para darle más realismo a los efectos.

-Cuál es la diferencia de rendimiento entre un loader en SVG y simplemente rotar una imagen para un loader?

Es probable que a nivel rendimiento, no haya una gran diferencia entre usar un SVG y otro formato de imagen (JPG, PNG, GIF). Pero de base es muy probable que un SVG sea más liviano que cualquier otro formato y con mayor capacidad de compresión.

Para tener en cuenta: al usar una imagen raster seguramente necesitemos hacer un HTTP request; en cambio al SVG podemos tenerlo inline directamente en el DOM.

Hay otras cuestiones a considerar: la imagen tiene/necesita transparencia? tiene bordes redondeados? tiene muchos detalles o colores? En ese sentido quizás no enfoquemos tanto en la performance, pero sí en la calidad visual y el control que querramos tener sobre el loader.

La diferencia entre usar cualquier formato de imagen raster o uno vectorial como SVG, es que los bordes de la imagen no van a ser tan nítidos en una imagen de bitmap, sobre todo se va a notar en curvas y transparencias. Considerar que los gifs usan bits con transparencia binaria, o son transparentes o son opacos, no existe la semitransparencia o traslucidez, por eso en nuestros gifs con fondo transparente veremos un dentado o pixelado en los bordes.