Как встроить SVG с исходным размером в HTML?

Question

[IvanRobot]

Пытаюсь встроить SVG в HTML разметку, но картинка визуально сжимается.. SVG встраивается как inline элемент. Но иконка получается сжатой. Иконка становиться меньше, а средняя чёрточка шире тех, что по краям.

Исходный SVG в редакторе

SVG в браузере Chrome

Разметка:

<div class="pic pic-toggle js-toggle" set="guest"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
  <g class="toggle-group">
    <path class="toggle-bars toggle-bar-1" d="M1.5 21.5h27a1.5 1.5 0 0 1 0 3h-27a1.5 1.5 0 0 1 0-3z"></path>
    <path class="toggle-bars toggle-bar-2" d="M1.5 13.5h27a1.5 1.5 0 0 1 0 3h-27a1.5 1.5 0 0 1 0-3z"></path>
    <path class="toggle-bars toggle-bar-3" d="M28.5 13.5h-27a1.5 1.5 0 0 0 0 3h27a1.5 1.5 0 0 0 0-3z"></path>
    <path class="toggle-bars toggle-bar-4" d="M1.5 5.5h27a1.5 1.5 0 0 1 0 3h-27a1.5 1.5 0 0 1 0-3z"></path>
  </g>
</svg></div>

Стили:

.pic {
	display: block;
}

.pic-toggle {
	cursor: pointer;
	width: 30px;
	height: 30px;

	.toggle-group {
		fill: #fff;
	}

Не могу понять в чём моя ошибка. Подскажите, как решить эту проблему :)

Answer 1

[Moskus]

Для начала, у вас линии всегда будут отображаться хз как, потому что вы их не по пикселям, а по половинам пикселей выравнивали (что видно при первом же взгляде на код). Во-вторых, средняя линия отличается от верхней и нижней, потому что у вас две средних линии нарисованы (toggle-bar-2, toggle-bar-3), соответственно, полупрозрачные пиксели в области antialiasing-а накладываются и линия выглядит жирнее.
С размером иконки - все в порядке, так что если у вас есть с этим проблемы, то на это влияет либо код, который вы не привели, либо отличный от 100% масштаб viewport-а в Chrome.

Comments

[IvanRobot]

Когда загружаю SVG в https://jakearchibald.github.io/svgomg/ то картинка отображается корректно.

[Moskus]

IvanRobot, вы со мной поспорить хотите? У вас проблема, я объяснил вам подробно, почему (по крайней мере, о том, о чем я могу точно судить), а вы спорите, доказывая, что где-то еще картинка, которая увеличена в двадцать раз, отображается корректно. Вы не офигели?

Answer 2

[Егор Поляков]

Больше похоже на ошибку Viewport.
Посмотрите аналогичный пример: https://bundlespace.com/intro/lessons/lesson-group... > сравните код SVG.