Me preguntaba acerca de los archivos SVG. Sé que es una colección de vectores definidos por etiquetas de ruta en XML, entonces, ¿por qué tiene un ancho y una altura en píxeles en la etiqueta svg y qué pasa si eliminamos esas dimensiones?
El ancho y la altura solo son relevantes cuando viewBox
está configurado. Sin ese atributo, puede eliminar de forma segura el ancho y la altura. Siempre se mostrará a la escala en la que se dibujó. Si <rect>
se configuró un 10px ancho 20px alto, se mostrará a esa escala 10x20 con o sin ancho o altura cuando no se establece viewBox.
Si viewBox
se establece un atributo, puede usar el ancho y la altura para ajustar la escala original hacia arriba o hacia abajo.
Sin ancho y alto pero con viewBox configurado, esto permitirá que el svg se escale infinitamente, lo que puede o no ser el comportamiento deseado. En una página HTML receptiva, esto a menudo se desea. Se escalará hacia arriba o hacia abajo para adaptarse al contenedor delimitador.
Estos son lo mismo
<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg">
Esto duplica la escala original.
<svg viewBox="0 0 120 120" width="240" height="240"
xmlns="http://www.w3.org/2000/svg">
Esto permite una escala infinita
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">