Как задать SVG 100vw 100vh?

Question

[art style]

есть svg

<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1903px"
	 height="938px" viewBox="0 0 1903 938" style="overflow:visible;enable-background:new 0 0 1903 938;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#F4FFFD;}
</style>
<defs>
</defs>
<polygon class="st0" points="1903,102.33 1903,938 0,938 0,0 1903,0 "/>
</svg>

это прямоугольник(или что либо другое) рассчитанное под экран 1903х938(мой viewport на экране 1920х1080 при масштабе 100 в хроме) можно управлять через параметры html а можно через css
что лучше для управления? я допустим хочу сделать это svg бекграундом секции и растянуть на всю секцию 100vw и 100vh. как?

Answer 1

[Никита Михайлов]

Добавь preserveAspectRatio="none" к svg. Это уберёт сохранение пропорций элемента.

После этого можно удалить атрибуты height и width. Теперь возможно управлять размерами через CSS.

Comments

[art style]

не сработало. при изменении width height меняется только viewbox а не сама ширина/высота элемента