SVG viewbox всегда относительно его размера?

Question

Довольно простой пример, если у меня есть этот квадрат SVG:

<svg class="svg-correct-symbol" viewBox="0 0 442.533 442.533" 
    width="50px" height="50px"> 

И изменить его на:

<svg class="svg-correct-symbol" viewBox="0 0 200 200" 
     width="50px" height="50px"> 

Я позабочусь около четверти права изображения? Поскольку ширина и высота уменьшены в два раза от window(viewbox), вы просматриваете SVG.

Таким образом, количество просмотров: 442.533 всегда будет означать 100% ширины/высоты изображения.

Как это устанавливается по умолчанию для набора номера? Является ли этот размер окна просмотра определяемым по размеру файла при его экспорте? Я хотел бы иметь viewBox чего-то более округленного, как viewBox="0 0 16 16".

С уже экспортированным изображением я не вижу способа его изменить.

Answer 1

Номер по умолчанию viewBox. Он определяется во время создания svg-изображения (вручную или с помощью программного обеспечения, такого как иллюстратор). Он имеет 4 координаты x y width height. Сложно то, что эти координаты не имеют никакого отношения к размеру изображения, и, как вы упомянули, он определяет только область, которую вы просматриваете.

Вы можете установить viewbox на любые значения, которые вы хотите. Но вам также понадобится scale svg-изображение, соответствующее вашему новому окну просмотра. Аналогично, вам также может понадобиться translate/сдвинуть изображения на оси x , y, чтобы довести их до центра или подогнать рамку/viewbox.

Оформить регистрацию svg transform из документации. This учебник также может быть полезен для понимания преобразований svg.

И если вы используете программное обеспечение, такое как иллюстратор, все, что вам нужно сделать, это установить размер монтажной области, которая определяет окно просмотра, а затем масштабируется соответствующим образом.