Как работает viewBox?

Question

С viewport – все понятно. Это просто видимая область svg.
С viewBox немного запутано получается: если viewBox больше – изображение меньше, если viewBox меньше – изображение больше. Почему?
Если, как я понимаю, значения viewBox указываются в пикселях (это же не просто процентное соотношение, а определенное значение).
Вот, например:

.facebook_logo {
  width: 500px;
  height: 500px;
  outline: 1px double red;
}

<svg display="none">
            <symbol id="facebook">
                <path d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
                 C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
                c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
                h2.516V4.458z"/>
        </symbol>  
</svg>
<svg viewBox="0 0 20 20" class="facebook_logo logo_footer">
                <use xlink:href="#facebook"></use>
</svg>

Тут даже на глаз видно, что картинка не 20*20. Чего я не понимаю? Заранее спасибо.

готовлю ответ. Это хороший вопрос! — Alexandr_TT, Aug 17 '20 at 19:10

Alexandr_TT · Accepted Answer · 2020-08-18T11:23:26.880

Это наверное один из самых фундаментальныx вопросов по SVG.
Кто понимает, как работает viewBox, как взаимодействует viewport с viewBox, у тех отпадает половина вопросов типа:
почему обрезается изображение, почему изображение не масштабируется при изменении размера родительского контейнера, или при смене гаджета, почему исчезает изображение и т.д и т.п

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

.facebook_logo {
  width: 500px;
  height: 500px;
  outline: 1px double red;
}

<div class="facebook_logo">
<svg  xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
            &lt;path id="facebook" d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
             C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
            c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
            h2.516V4.458z"/&gt;


</svg>
</div>

В случае если не указан viewport, а это width и height в шапке svg файла, то изображение занимает либо 100% экрана, либо наследует width и height родительского контейнера. В этом примере размеры для родителя .facebook_logo width: 500px; height: 500px;

Изображение увеличивается в 25 раз, так как исходное изображение имеет размеры 20 х 20 px viewport / viewBox или 500 / 20 = 25 раз

Другими словами 1px viewBox растягивается на 25 px viewport поэтому и происходит увеличение изображения в 25 раз.

Если бы был указан размер viewport width="20px" height="20px" равный viewbox="0 0 20 20", то иконка не изменилась бы в размерах, так как viewport / viewBox = 1

<svg  xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" style="border:1px solid red;">
            &lt;path id="facebook" d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
             C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
            c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
            h2.516V4.458z"/&gt;


</svg>

либо указаны те же размеры в родительском контейнере

.facebook_logo {
  width: 20px;
  height: 20px;
  outline: 1px double red;
}

<div class="facebook_logo">
<svg  xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
            &lt;path id="facebook" d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
             C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
            c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
            h2.516V4.458z"/&gt;


</svg>
</div>

Но при указании фиксированных размеров иконка не будет масштабироваться при изменении размера дисплея.

Чтобы получить масштабирование, необходимо указывать размеры в процентах или в относительных единицах

.facebook_logo {
  width: 5vw;
  height: 5vh;
 }

<div class="facebook_logo">
<svg  xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
            &lt;path id="facebook" d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
             C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
            c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
            h2.516V4.458z"/&gt;


</svg>
</div>

Связанный вопрос

Для более глубокого вхождения в тему статья на нашем сайте:
Как взаимодействуют между собой viewport и viewBox

и тут ещё можно почитать с подробными объяснениями, действующими иллюстрациями

Большое спасибо за такой подробный и ПОНЯТНЫЙ ответ))) — Eva, Aug 18 '20 at 12:54

Как работает viewBox?

1 Answers1

Linked