html - ejemplos - svg web

Ajuste automático de escala de un SVG incrustado en HTML en el tamaño de la ventana

Question

Me gustaría incrustar algunos SVG en una página HTML de forma tal que se cambie el tamaño automáticamente (usando SVG, CSS o JS) cuando se cambie el tamaño de la página, mientras se conserva la relación de aspecto original.

Por ejemplo, usando un ejemplo de W3Schools:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

¿Es posible establecer el ancho SVG = 5% del ancho de la ventana, y tener la altura escalada proporcionalmente?

He intentado un par de cosas, incluyendo preserveAspectRatio="xMinYMin meet" y estableciendo las dimensiones al 100% dentro de un contenedor <div> , pero todavía no lo he conseguido.

¿Alguna sugerencia?

Answer 1

Necesita un viewBox viewBox en su elemento raíz SVG, que definirá el tamaño total de la imagen SVG:

<svg version="1.1" viewBox="0 0 300 185">

Ahora puede establecer el ancho O la altura de la imagen a través de CSS y se escalará perfectamente.