¿Hay algún concepto de tamaño en un SVG?


11

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?

Respuestas:


15

El ancho y la altura solo son relevantes cuando viewBoxestá 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 viewBoxse 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">
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.