Si bien puedes usar cualquier formato para tus iconos, como GIFs, usar imágenes SVG ofrece muchas ventajas, aunque también desafíos.

SVG (Scalable Vector Graphics) es un formato de imagen que, a diferencia de un JPG (y otros formatos basados en píxeles), se puede escalar sin perder calidad. Esto se debe a que utiliza datos vectoriales en lugar de píxeles.

Los archivos SVG están definidos en un formato XML, donde tienen atributos que son leídos por el navegador, el cual los interpreta y visualiza. Por lo tanto, las ventajas son claras: es un formato de archivo ligero, escalable y flexible.

Dado que los SVG son código en lugar de píxeles, su visualización depende de que el navegador interprete correctamente el archivo, lo que puede generar algunos desafíos, como:

Ambos problemas tienen una causa raíz en común.

Cuando un SVG no tiene etiquetas de ancho (width) y alto (height), Firefox no puede determinar su tamaño y no logra cargarlo. Por otro lado, navegadores como Google Chrome asignan un ancho y alto por defecto, aunque no estén definidos, lo que puede llevar a que el SVG aparezca con un tamaño diferente al esperado.

Solucionar esto es bastante sencillo: el SVG debe tener un tamaño definido mediante las propiedades de ancho (width) y alto (height).

Si estás usando Adobe Illustrator, ten en cuenta que, por defecto, los SVG se exportan como responsivos, lo que resulta en la ausencia de las etiquetas de tamaño.

Para solucionarlo: