Как изменить viewBox у SVG изображения?

Question

[khipster]

Вот скачал я бесплатную SVG картинку, но она очень большого размера. Ну я изменил width и height атрибуты как мне надо, но в атрибуте viewBox остались какие то огромные цифры: "0 0 317.855 317.855".

viewBox это область просмотра (понятно, т.е. не понятно). Как её изменить? И надо ли вообще её менять? И почему при попытке изменить её до значений width и height картинка исчезает? Её автор выбрал и она теперь привязана к рисунку?

https://jsfiddle.net/nonzaot5/

Answer 1

[Михаил Белошицкий]

Вьюбокс позволяет манипулировать изображением внутри svg-картинки.

Вот пример подобных манипуляций с вашей картинкой.

Статья для прояснения: https://sarasoueidan.com/blog/svg-coordinate-systems/

Comments

[khipster]

А откуда берутся изначальные значения viewBox? Почему они такие "кривые" (тысячная дробь)?

[Михаил Белошицкий]

Скорее всего это векторный редактор автоматически их проставляет при сохранении картинки, так чтобы она ровно вписывалась во вьюбокс без зазоров.