Autoscaling un SVG incrustado en HTML en el cambio de tamaño de la ventana
Me gustaría incrustar algo de SVG en una página HTML de tal manera que se redimensione automáticamente (usando SVG, CSS o JS) cuando se cambia 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 escalar la altura proporcionalmente?
He probado un par de cosas incluyendopreserveAspectRatio="xMinYMin meet" y establecer las dimensiones al 100% dentro de una<div> contenedor, pero todavía no lo tengo funcionando.
¿Alguna sugerencia