Автоматическое масштабирование SVG, встроенного в HTML при изменении размера окна
Я хотел бы встраивать некоторые SVG в HTML-страницу таким образом, чтобы при ее изменении размер автоматически изменялся (с использованием SVG, CSS или JS), сохраняя при этом исходное соотношение сторон.
Например, используя пример из 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>
Можно ли установить ширину SVG = 5% ширины окна и пропорционально масштабировать высоту?
Я пробовал пару вещей, включаяpreserveAspectRatio="xMinYMin meet" и установив размеры до 100% в пределах<div> контейнер, но еще не заработал.
Какие-либо предложения?