Понимание SVG ViewBox

Хотя полное понимание того, как работают SVG, довольно сложно и может считаться «редким» навыком, оно может оказаться весьма полезным. ViewBox может оказаться весьма запутанным для новичка, поэтому вот базовое руководство, в котором я рассказываю самые основы viewBox.

Поле просмотра

viewBox — это то, что делает SVG масштабируемыми. Мы можем сделать наш SVG любого размера, который нам нравится, и все будет масштабироваться естественным образом, поскольку элементы в SVG относятся к нему. viewBox можно рассматривать как телескоп; он масштабируется и панорамируется до размеров, которые мы ему даем. Он имеет 4 атрибута -

min-x, min-y, width и height.

Позиция viewBox может быть установлена с помощью первых двух атрибутов. Это координаты, откуда начинается viewBox .

Атрибуты width и height отвечают за функцию «масштабирования». Если эти значения совпадают с высотой и шириной SVG, ничего не изменится.

Однако, если они больше, чем размеры SVG, это создаст эффект «уменьшения масштаба», и наоборот, если они меньше. Чтобы было понятнее, давайте посмотрим на этот код:

<svg
      style="border: 1px solid black;"
      height="300"
      width="300"
      viewBox="0 0 300 300"
      xmlns="<http://www.w3.org/2000/svg>"
    >
   
      <rect x="0" y="0" width="100%" height="100%" fill="red" />      
      <circle cx="50%" cy="50%" r="10" fill="black" />
    
</svg>

Размеры SVG: 300*300, прямоугольник и круг внутри.

Поскольку размеры SVG и размеры viewBox одинаковы, SVG выглядит одинаково.

Вот как будет выглядеть SVG без viewBox.

О фигурах:

Прямоугольник начинается с 0,0 SVG, и, поскольку размеры указаны в процентах, он покрывает весь SVG.

Круг начинается с 50%, 50%-, который является центром прямоугольника SVG, с заданным радиусом 10px

Изменение высоты и ширины

Увеличение:

Чтобы создать эффект «увеличения», все, что нам нужно сделать, это изменить два последних атрибута — height и width., если их значения меньше значений SVG; которые в нашем случае являются 300*300, viewBox работами, подобными телескопу или увеличительному стеклу, они показывают нам меньшую площадь, но в увеличенном виде.

Теперь, если мы изменим координаты viewBox на 0 0 100 100, мы увидим, что круг кажется больше. Относительно центра SVG окно просмотра теперь показывает нам 100*100. Поскольку центр кругов был в процентах, он все еще остается в центре.

Точно так же мы можем изменить его на 0 0 50 50.

Если мы используем здесь большие размеры, вместо увеличения масштаб будет уменьшен.

<svg
style="border: 1px solid black;"
height="300"
width="300"
viewBox="0 0 100 100"
xmlns="<http://www.w3.org/2000/svg>"
>
<rect x="0" y="0" width="100%" height="100%" fill="red" />
<circle cx="50%" cy="50%" r="10" fill="black" />
</svg>

Уменьшение:

Точно так же, если высота и ширина viewBox больше, чем у SVG, создается эффект «уменьшения масштаба». Это связано с тем, что, хотя SVG равен 300*300 , увеличение значений viewBox означает, что он показывает нам большую площадь, чем эта, из-за чего SVG выглядит меньше.

В случае viewBox = "0 0 1000 1000" видимая область теперь масштабируется до 1000px*1000px.

Поскольку размеры элемента <rect> указаны в процентах, визуально он остается неизменным, но circle заметно меньше.

Понимание SVG ViewBox