Определить viewBox для svg, если в самом svg он отсутствует
Есть два svg.
В первом случае у svg есть заданный viewBox="0 0 57.21 126.47" https://jsfiddle.net/5jaLdyex/
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.21 126.47">...
Во втором случае у svg viewBox удален. В остальном svg без изменений. https://jsfiddle.net/5jaLdyex/1/
<svg xmlns="http://www.w3.org/2000/svg">...
width/height тоже отсутствуют и в первом случае, и во втором.
Вопрос: как определить пропорции для svg #2? Точно знаю, что это возможно сделать, потому что если загрузить этот svg в конструктор canva, то он определит размер 57.21 126.47 даже если не задано width/height/viewBox.
Ответы (2 шт):
https://svgwg.org/specs/integration/#svg-css-sizing
Если нет width/height/viewBox, то размер SVG будет 300×150px независимо от содержимого.
Значения wdth height можно узнать использовав метод JS getBBox()
const svg = document.querySelector("svg");
const {x, y, width, height} = svg.getBBox();
console.log(width);
Вы можете установить значение параметров viewBox равными высоте и ширине пользовательского окна просмотра (viewport)
<script>
const svg = document.querySelector("svg");
const {x, y, width, height} = svg.getBBox();
svg.setAttribute("viewBox", `${x} ${y} ${width} ${height}`);
</script>
Значения будут те же, как в вашем первом примере viewBox="0 0 57.21 126.47"
Именно так и нарисовано ваше изображение в векторном редакторе.
Чтобы уменьшить его, например в 10 раз, нужно в шапке svg увеличить viewBox в 10 раз viewBox="0 0 572.1 1264.7"
или с помощью JS
<script>
const svg = document.querySelector("svg");
const {x, y, width, height} = svg.getBBox();
<!-- Увеличиваем viewBox - уменьшаем изображение -->
svg.setAttribute("viewBox", `${x} ${y} ${width * 10} ${height * 10}`);
</script>
Другой путь для регулировки размеров SVG
Раз вы уже знаете размер viewBox="0 0 57.21 126.47" укажите его явно, не указывая width, height в шапке SVG.
Оберните SVG в div и укажите width, height в относительных единицах
<style>
.container {
width:10vw;
height:10vh;
}
<div class="container">
<svg viewBox="0 0 57.21 126.47">
</svg>
</div>