БЛОГ НА HUSL


Как ПРАВИЛЬНО задать размеры с помощью viewport svg-элементу?

Автор вопроса: Eva

Не могу до конца разобраться с размерами svg. Иконка instagram отображается так, как должна: сам svg -25*25, вся иконка - 49*49.

Проблема возникает с иконкой facebook. Я думаю, что тут проблема в том, сколько места занимает viewport svg. Это видно на третьем элементе в моем коде. Весь viewport – 11*20, НО это не значит, что и сам svg будет ровно этих же размеров. Как видно из кода, сам svg facebook получается гораздо меньше.

Вопрос такой: как добиться нужных размеров для facebook svg, не меняя при этом viewBox? Почему возникает такое отличие в поведении двух иконок: instagram спокойно можно настроить через viewport, прописав ему 25*25, c facebook такого эффекта не выходит.

.instagram_logo {
    width: 25px;
    height: 25px;
    padding: 12px;
    fill: #ffffff;
    background: #2f3c4d;
    border-radius: 10px;
}

.facebook_logo {
    width: 11px;
    height: 20px;
    padding: 9px 14px;
  fill: #ffffff;
  background: #2f3c4d;
  border-radius: 10px;
}

.facebook {
    width: 11px;
    height: 20px;
  outline: 1px solid red;
  fill: #ffffff;
  background: #2f3c4d;
  border-radius: 10px;
}
<!--Иконка Инстаграм -->
<svg viewBox="0 0 169.063 169.063" class="instagram_logo">
  <g>
     <path d="M122.406,0H46.654C20.929,0,0,20.93,0,46.655v75.752c0,25.726,20.929,46.655,46.654,46.655h75.752
                    c25.727,0,46.656-20.93,46.656-46.655V46.655C169.063,20.93,148.133,0,122.406,0z M154.063,122.407
                    c0,17.455-14.201,31.655-31.656,31.655H46.654C29.2,154.063,15,139.862,15,122.407V46.655C15,29.201,29.2,15,46.654,15h75.752
                    c17.455,0,31.656,14.201,31.656,31.655V122.407z"/>
                    <path d="M84.531,40.97c-24.021,0-43.563,19.542-43.563,43.563c0,24.02,19.542,43.561,43.563,43.561s43.563-19.541,43.563-43.561
                    C128.094,60.512,108.552,40.97,84.531,40.97z M84.531,113.093c-15.749,0-28.563-12.812-28.563-28.561
                    c0-15.75,12.813-28.563,28.563-28.563s28.563,12.813,28.563,28.563C113.094,100.281,100.28,113.093,84.531,113.093z"/>
                    <path d="M129.921,28.251c-2.89,0-5.729,1.17-7.77,3.22c-2.051,2.04-3.23,4.88-3.23,7.78c0,2.891,1.18,5.73,3.23,7.78
                    c2.04,2.04,4.88,3.22,7.77,3.22c2.9,0,5.73-1.18,7.78-3.22c2.05-2.05,3.22-4.89,3.22-7.78c0-2.9-1.17-5.74-3.22-7.78
                    C135.661,29.421,132.821,28.251,129.921,28.251z"/>
    </g>
</svg>

<!-- Иконка Фейсбук-->
<svg class="facebook_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 23.101 23.101">
                <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"/>
</svg>

<svg class="facebook" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 23.101 23.101">
                <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"/>
</svg>


Источник

Ответы (1 шт):

Автор решения: Alexandr_TT

Вопрос такой: как добиться нужных размеров для facebook svg, не меняя при этом viewBox? Почему возникает такое отличие в поведении двух иконок: instagram спокойно можно настроить через viewport, прописав ему 25*25, c facebook такого эффекта не выходит.

Основная причина в разных физических размерах иконок (как они нарисованы в векторном редакторе)

Для иконки intstagram размеры в редакторе были 169.063 х 169.063px поэтому вы указали
viewBox="0 0 169.063 169.063"

Для иконки facebook нужно было указать viewBox="5.7 0 11.61 23.101"

Update: Уточнения по вопросу в комментариях

Эти цифры возвращает метод JS getBBox() и выводит в console.log(bbox); Когда запускаете пример на выполнение, цифры появляются внизу экрана

var svg = document.getElementsByTagName("svg")[0];
var bbox = svg.getBBox();
console.log(bbox);
.facebook_logo {
    width: 25px;
    height: 25px;
    padding: 12px;
  fill: #ffffff;
  background: #2f3c4d;
  border-radius: 10px;
}
<!-- Иконка Фейсбук-->
<svg  class="facebook_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="5.7 0 11.61 23.101">
                <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"/>
</svg>

И чтобы иконки выглядели одинаково сделать правила CSS одинаковыми для обоих иконок

.instagram_logo, .facebook_logo {
    width: 25px;
    height: 25px;
    padding: 12px;
    fill: #ffffff;
    background: #2f3c4d;
    border-radius: 10px;
}
<!--Иконка Инстаграм -->
<svg viewBox="0 0 169.063 169.063" class="instagram_logo">
  <g>
     <path id="instagram" d="M122.406,0H46.654C20.929,0,0,20.93,0,46.655v75.752c0,25.726,20.929,46.655,46.654,46.655h75.752
                    c25.727,0,46.656-20.93,46.656-46.655V46.655C169.063,20.93,148.133,0,122.406,0z M154.063,122.407
                    c0,17.455-14.201,31.655-31.656,31.655H46.654C29.2,154.063,15,139.862,15,122.407V46.655C15,29.201,29.2,15,46.654,15h75.752
                    c17.455,0,31.656,14.201,31.656,31.655V122.407z"/>
                    <path d="M84.531,40.97c-24.021,0-43.563,19.542-43.563,43.563c0,24.02,19.542,43.561,43.563,43.561s43.563-19.541,43.563-43.561
                    C128.094,60.512,108.552,40.97,84.531,40.97z M84.531,113.093c-15.749,0-28.563-12.812-28.563-28.561
                    c0-15.75,12.813-28.563,28.563-28.563s28.563,12.813,28.563,28.563C113.094,100.281,100.28,113.093,84.531,113.093z"/>
                    <path d="M129.921,28.251c-2.89,0-5.729,1.17-7.77,3.22c-2.051,2.04-3.23,4.88-3.23,7.78c0,2.891,1.18,5.73,3.23,7.78
                    c2.04,2.04,4.88,3.22,7.77,3.22c2.9,0,5.73-1.18,7.78-3.22c2.05-2.05,3.22-4.89,3.22-7.78c0-2.9-1.17-5.74-3.22-7.78
                    C135.661,29.421,132.821,28.251,129.921,28.251z"/>
    </g>
</svg>

<!-- Иконка Фейсбук-->
<svg  class="facebook_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="5.7 0 11.61 23.101">
                <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"/>
</svg>

Практические советы

  1. Если вы хотите избежать головной боли с вёрсткой svg иконок, то постарайтесь выбирать их с одинаковыми значениями viewBox

  2. Если вы рисуете иконки самостоятельно в векторном редакторе, то необходимо перед созданием иконки выбрать в меню редактора размер документа, допустим 24х24px

При рисовании не допускайте выхода линий за серые рамки, это границы документа.

В противном случае, фрагменты вне границ будут обрезаны (не видны) в svg.

Если визуальный размер изображения на экране редактора мелкий, то можно увеличить его клавишей +

→ Ссылка

licensed under cc by-sa 3.0 with attribution.