В моем случае координаты равны 0 и 0. А значения width и height по
24px. Но почему-то это изображение рендерится очень большим. Почему
так происходит и как это исправить?
На словах трудно объяснить, как работают совместно viewport (это width и height в шапке SVG) и viewBox. Поэтому я попытаюсь сделать это на примерах.
Возможно я повторю какие-то моменты, которые комментировал @MaximLensky и @Eva в своем ответе, благодарность им за это!
Любое SVG изображение имеет реальные физические размеры, то есть те размеры, как оно нарисовано в векторном редакторе или в аналогичном коде, написанном в текстовом редакторе.
Узнать эти размеры можно с помощью метода JS getBBox()
<svg style="border: 1px solid red" viewBox="0 0 24 24">
<path id="cross" fill="currentColor" d="M13.205 12L20 5.205 18.795 4 12 10.795 5.205 4 4 5.205 10.795 12 4 18.795 5.205 20 12 13.205 18.795 20 20 18.795 13.205 12z">
</path>
</svg>
<script>
let bb = cross.getBBox();
console.log(bb);
</script>
Видим, что 4px - отступ слева + 16x ширина самого изображения + 4px отступ справа, то есть физический размер ширины иконки составляет 24px, тоже самое и по высоте 24px.
Выбран viewBox="0 0 24 24" то есть изображение иконки захвачено полностью, а вот как оно будет показано пользователю зависит от размеров width, height пользовательского окна просмотра.(от viewport).
- Если
width, height не указаны в шапке SVG, то браузер устанавливает их равными 100% и растягивает изображение на весь экран, как в вашем случае
width, height равны viewBox
Изображение будет показано, как есть, без изменения физических размеров 24x24px
<svg width="24" height="24" viewBox="0 0 24 24" style="border: 1px solid red">
<path id="cross" fill="currentColor" d="M13.205 12L20 5.205 18.795 4 12 10.795 5.205 4 4 5.205 10.795 12 4 18.795 5.205 20 12 13.205 18.795 20 20 18.795 13.205 12z">
</path>
</svg>
<script>
let bb = cross.getBBox();
console.log(bb);
</script>
- Увеличивая width height допустим в два раза больше, чем размеры viewBox мы тем самым увеличим изображение в два раза.
Другими словами 1px viewBox будет растянут до двух пикселей viewport
<svg width="48" height="48" viewBox="0 0 24 24" style="border: 1px solid red">
<path id="cross" fill="currentColor" d="M13.205 12L20 5.205 18.795 4 12 10.795 5.205 4 4 5.205 10.795 12 4 18.795 5.205 20 12 13.205 18.795 20 20 18.795 13.205 12z">
</path>
</svg>
<script>
let bb = cross.getBBox();
console.log(bb);
</script>
- width, height < viewBox в два раза
При этом два пикселя viewBox сжимаются до одного пикселя viewport, поэтому изображение уменьшается в два раза
<svg width="12" height="12" viewBox="0 0 24 24" style="border: 1px solid red">
<path id="cross" fill="currentColor" d="M13.205 12L20 5.205 18.795 4 12 10.795 5.205 4 4 5.205 10.795 12 4 18.795 5.205 20 12 13.205 18.795 20 20 18.795 13.205 12z">
</path>
</svg>
<script>
let bb = cross.getBBox();
console.log(bb);
</script>
Более подробно о взаимодействии viewport c viewBox
Обратите внимание, что, как бы мы не манипулировали размерами выводимого изображения, физические размеры его, на самом деле остаются прежними. Это показывает getBBox() в каждом примере.
Почему в спрайтах иконок и других SVG изображениях не указывают width, height
Причина проста, - svg, как правило помещают в родительский контейнер и задавая размеры этого контейнера заполняют его полностью SVG
.container{
width:64px;
height:64px;
}
<div class="container">
<svg viewBox="0 0 24 24" style="border: 1px solid red">
<path id="cross" fill="currentColor" d="M13.205 12L20 5.205 18.795 4 12 10.795 5.205 4 4 5.205 10.795 12 4 18.795 5.205 20 12 13.205 18.795 20 20 18.795 13.205 12z">
</path>
</svg>
</div>
Чтобы сделать изображение адаптивным, достаточно указать размеры родительского контейнера в относительных единицах
.container{
width:3vw;
height:3vh;
}
<div class="container">
<svg viewBox="0 0 24 24" style="border: 1px solid red">
<path id="cross" fill="currentColor" d="M13.205 12L20 5.205 18.795 4 12 10.795 5.205 4 4 5.205 10.795 12 4 18.795 5.205 20 12 13.205 18.795 20 20 18.795 13.205 12z">
</path>
</svg>
</div>
Связанные ответы:
- Как взаимодействуют между собой viewport и viewBox
- Использование параметров viewBox для масштабирования изображений
- Как работает viewBox?
