2

Есть два 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 ответа 2

2

Значения 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>
4
  • А если говорить про серверное решение? Чтобы getBBox дал результат отличный от нуля, надо чтобы svg обязательно было отображено в документе. Как я понимаю, если этот код запустить со стороны того же nodejs, то будет возвращено 0 0. "Другой путь для регулировки размеров SVG" - это не то, что нужно. Пользователь загружает svg произвольное без width, без height, без viewBox. Вот нужно узнать его ширину и высоту. И, конечно, хотелось бы это сделать со стороны сервера.
    – Floyat
    22 июл 2020 в 13:01
  • @Floyat там даже просто опытным путём чисто по координатам видно что viewbox равен 0 0 59 126 22 июл 2020 в 13:23
  • @MaximLensky исходный viewBox 0 0 57.21 126.47, а не 0 0 78 126. И что за опытный путь? Речь про абсолютно любое svg изображение без viewBox, width, height и с любым количеством path внутри. Со стороны клиента - getBBox работает. Но это не самое удобное решение, которое работает только с видимыми svg в документе.
    – Floyat
    22 июл 2020 в 13:30
  • Нашёл серверное решение со стороны PHP: $img = new imagick(); $img->readImageBlob($raw); $img->trimImage (0); $dimension = $img->getImageGeometry(); в $dimension будет нужная ширина и высота.
    – Floyat
    22 июл 2020 в 13:36
0

https://svgwg.org/specs/integration/#svg-css-sizing

Если нет width/height/viewBox, то размер SVG будет 300×150px независимо от содержимого.

1
  • Если загрузить svg #2 в конструктор (canva.com), то они задают вот такие размеры для svg: width="57.266632080078125" height="126.50769805908203" viewBox="0.000884773675352335 -0.017702089622616768 57.266632080078125 126.50769805908203" То есть они определили точные размеры без ширины, без высоты и viewBox. Вот пытаюсь понять хотя бы примерный алгоритм для этого. Причём тут 300х150?
    – Floyat
    22 июл 2020 в 9:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.