Как изменить масштаб SVG (artboard)

Question

Когда вы экспортируете SVG с иллюстратором, создается ящик просмотра, который, я думаю, соответствует размеру Artboards или размеру любого экспортируемого вами элемента. В настоящее время у меня нет доступа к иллюстратору, но я попробую его позже.

В любом случае, я думаю, что всякий раз, когда вы экспортируете что-то, viewBox устанавливается либо в размер области элементов. Скажем, у меня есть панель размером 160 на 160 пикселей, и я экспортирую и SVG, у которого будет viewBox viewBox="0 0 160 160".

Если я не испортил вид, я могу сделать это, скажем, 16x16. В этом случае viewBox="0 0 160 160" еще вида переводится:

viewBox="0 0 100% 100%"

Если бы я изменить Viewbox к чему-то вроде viewBox="0 0 80 80" я получаю ровно одну четверть изображения видимого для меня, что делает много смысла.

Кроме базового изображения всегда будет 160 на 160, что и должно быть viewBox. Я думаю, что вы, вероятно, можете изменить значение 160 на 160 viewbox, если вы экспортируете меньшую монтажную область. Но как бы вы это сделали в коде?

Надеюсь, вы получите концепцию.

Это несколько относится к этому, хотя это другое дело.

https://css-tricks.com/svg-artboard-sizing/

Answer 1

Оставьте viewBox в покое. Просто добавьте width и height атрибутов вашего тега <svg>. Вот простой пример:

<!-- little blue circle: --> 
 
<svg viewBox="0 0 160 160" width="16" height="16"> 
 
    <circle cx="80" cy="80" r="80" fill="blue" stroke="none"/> 
 
</svg> 
 

 
<!-- huge red circle: --> 
 
<svg viewBox="0 0 160 160"> 
 
    <circle cx="80" cy="80" r="80" fill="red" stroke="none"/> 
 
</svg>