Использование параметров viewBox для масштабирования изображений

Question

У меня три варианта одного изображения SVG, составленного из двух окружностей и одного пятиугольника. Во всех вариантах параметры окружностей и патч пятиугольника абсолютно одинаковые. Но выглядят варианты совершенно по разному:

Большое изображение

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="270" height="300" viewBox="0 0 130 150" version="1.1">
  <g>
     <circle cx="38.63" cy="64.5" r="33.4" stroke="brown"  style="fill:greenyellow;"/>
&lt;path d="M38.8 31.3 69.4 53.6 57.6 89.6 19.7 89.5 8.1 53.4z"  style="fill:violet;stroke-dashoffset:0.1;stroke:#f20404"/&gt;
&lt;circle cx="38.63" cy="64" r="25" stroke="dodgerblue"  style="fill:skyblue;"/&gt;

</g>
</svg>

Уменьшенное изображение

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="270" height="300" viewBox="0 0 540 600" version="1.1">
  <g>
     <circle cx="38.63" cy="64.5" r="33.4" stroke="brown"  style="fill:greenyellow;"/>
&lt;path d="M38.8 31.3 69.4 53.6 57.6 89.6 19.7 89.5 8.1 53.4z"  style="fill:violet;stroke-dashoffset:0.1;stroke:#f20404"/&gt;
&lt;circle cx="38.63" cy="64" r="25" stroke="dodgerblue"  style="fill:skyblue;"/&gt;

</g>
</svg>

Обрезанное изображение

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="270" height="300" viewBox="0 0 65 75" version="1.1">
  <g>
     <circle cx="38.63" cy="64.5" r="33.4" stroke="brown"  style="fill:greenyellow;"/>
&lt;path d="M38.8 31.3 69.4 53.6 57.6 89.6 19.7 89.5 8.1 53.4z"  style="fill:violet;stroke-dashoffset:0.1;stroke:#f20404"/&gt;
&lt;circle cx="38.63" cy="64" r="25" stroke="dodgerblue"  style="fill:skyblue;"/&gt;

</g>
</svg>

Во всех трех вариантах отличаются параметры только viewBox
Видимо в этом причина изменения масштаба и положения изображений. Но методом "тыка" - подбора этих значений трудно установить нужное положение и масштаб изображения. Хочется понять основные закономерности взаимного влияния этих параметров.

Alexandr_TT · Answer 1 · 2019-01-25T07:41:14.557

width=270и height=300 в шапке вашего svg файла это - viewport

Масштаб svg изображения определяется соотношением viewport / viewBox, при

viewport / viewBox = 1 - изображение будет иметь масштаб 1:1 (размер оригинала)

<svg width = "270" height="300" viewBox="0 0 270 300">
viewport / viewBox > 1 - изображение будет увеличено

Как в вашем первом примере:

<svg  width="270" height="300" viewBox="0 0 130 150" version="1.1">

(270 / 130 = 2 и 300 / 150 = 2) Изображение увеличено в два раза по сравнению с оригиналом. Так как один пиксель viewBox растягивается до двух пикселей viewport.
viewport -это пользовательская область просмотра, которая выводится на экран.

viewport / viewBox < 1 - изображение будет уменьшено по сравнению с оригиналом

ваш второй пример:

<svg  width="270" height="300" viewBox="0 0 540 600" >

В этом варианте два пикселя viewBox сжимаются до одного пикселя viewport

В третьем примере с обрезкой изображения

<svg  width="270" height="300" viewBox="0 0 65 75">

viewBox оказался меньше размера оригинала поэтому захватил только часть изображения и увеличил только эту часть.

В связи с этим возникают интересные возможности:

манипулируя размерами viewBox можно спрятать и снова показать изображение.
создать интересные эффекты с масштабированием
1. ниже пример динамического появления с масштабированием фигур svg.

Анимация начинается при клике по маленькому зелёному прямоугольнику в верхнем левом углу.

body {
padding:0;
margin:0;
}
svg text {
fill:white;
}

<svg id="svg1" width="300" height="300" viewBox="200 200 2700 2700" style="border:1px solid grey;">
<rect id="R1" x="0" y="0" width="100" height="100" fill="#5A9C6E" /> 
<rect id="R2" x="100" y="0" width="100" height="100" fill="#A8BF5A" />
<rect id="R3" x="200" y="0" width="100" height="100" fill="#FAC46E" />
<rect id="R4" x="0" y="100" width="100" height="100" fill="greenyellow" />
<rect id="R5" x="100" y="100" width="100" height="100" fill="#5A9C6E" />
<rect id="R6" x="200" y="100" width="100" height="100" fill="skyblue" />
<rect id="R7" x="0" y="200" width="100" height="100" fill="#FAC46E" />
<rect id="R8" x="100" y="200" width="100" height="100" fill="yellow" />
<rect id="R9" x="200" y="200" width="100" height="100" fill="#5A9C6E" />
<text x="35" y="55" font-size="24" > R1 </text>
<text x="135" y="55" font-size="24" > R2 </text>
<text x="235" y="55" font-size="24" > R3</text>
<text x="35" y="155" font-size="24" style="fill:grey;" > R4 </text>
<text x="135" y="155" font-size="24" > R5 </text>
<text x="235" y="155" font-size="24" > R6 </text>
<text x="35" y="255" font-size="24" > R7 </text>
<text x="135" y="255" font-size="24" style="fill:grey;" > R8 </text>
<text x="235" y="255" font-size="24" > R9 </text>
<animate  attributeName="viewBox"  begin="svg1.click+0.25s" values="200 200 2700 2700;0 0 300 300" dur="1.5s" fill="freeze"  restart="whenNotActive" />
 </svg>

Тот же принцип, что и в первом примере, но использованы растровые картинки
Анимация начинается при клике.

body {
padding:0;
margin:0;
}
svg {
background: linear-gradient(to right, white 33%,  skyblue 90%);
}
svg rect {
fill:none;
stroke:#c3c3c3;
stroke-width:0.5;
}

<svg id="svg1" width="300" height="300" viewBox="200 200 2700 2700" style="border:0px solid grey;">
<rect id="R1" x="0" y="0" width="100" height="100"  />
<rect id="R2" x="100" y="0" width="100" height="100"  />
<rect id="R3" x="200" y="0" width="100" height="100" fill="#FAC46E" />
<rect id="R4" x="0" y="100" width="100" height="100" fill="greenyellow" />
<rect id="R5" x="100" y="100" width="100" height="100" fill="#5A9C6E" />
<rect id="R6" x="200" y="100" width="100" height="100" fill="skyblue" />
<rect id="R7" x="0" y="200" width="100" height="100" fill="#FAC46E" />
<rect id="R8" x="100" y="200" width="100" height="100" fill="yellow" />
<rect id="R9" x="200" y="200" width="100" height="100" fill="#5A9C6E" />
<image xlink:href="https://i.stack.imgur.com/81zH5.png"  x="0" y="0" width="100" height="100"  /> 
<image xlink:href="https://i.stack.imgur.com/g835v.png" x="100" y="0" width="100" height="100"  /> 
<image xlink:href="https://i.stack.imgur.com/naLsU.png" x="200" y="0" width="100" height="100"  />
<image xlink:href="https://i.stack.imgur.com/UgIKN.png"  x="0" y="100" width="100" height="100"  /> 
<image xlink:href="https://i.stack.imgur.com/Lp3Mv.png" x="100" y="100" width="100" height="100"  /> 
<image xlink:href="https://i.stack.imgur.com/NyyyT.png" x="200" y="100" width="100" height="100"  />
<image xlink:href="https://i.stack.imgur.com/VQHVg.png"  x="0" y="200" width="100" height="100"  /> 
<image xlink:href="https://i.stack.imgur.com/A0G0r.png" x="100" y="200" width="100" height="100"  /> 
<image xlink:href="https://i.stack.imgur.com/VomF9.png" x="200" y="200" width="100" height="100"  />
<animate  attributeName="viewBox"  begin="svg1.click+0.25s" values="200 200 2700 2700;0 0 300 300" dur="1.5s" fill="freeze"  restart="whenNotActive" />
 </svg>

Использование параметров viewBox для масштабирования изображений

1 Answers1

Linked