Почему вокруг встроенной SVG картинки образуются отступы?

Question

[Евгений Обыкновенный]

Странный глюк происходит. Если добавить div c padding-top перед svg картинкой, то слева и справа от svg картинки появляются отступы. Причем, если изображения заменить на png, то отступов нет. Если этот div удалить или скрыть, то отступы пропадают. В Хроме глюк пропадает (в Firefox сохраняется), если между дивом и картинкой вставить пустой див без отступов. Также в Хроме глюк пропадает, если высоту картинки указывать не в em, а в px. Почему так происходит?

Для наглядности упростил код максимально возможно с сохранением глюка. На реальной странице эти отступы еще больше. Чтоб было видно размеры, добавил к изображению рамку.

<div style="padding-top: 0.6em;">
   Текст2
</div>
<img src="file.svg" style="height:1.651em; vertical-align: -0.528em; border: 1px dotted gray;">.

Результат:

<div style="padding-top: 0.6em; display: none;">
    Текст2
</div>
<img src="file.svg" style="height:1.651em; vertical-align: -0.528em; border: 1px dotted gray;">.

Результат:

Answer 1

[Ankhena]

Зачем вам svg для греческой буквы? https://jsfiddle.net/6uy11Lo5/

Comments

[Евгений Обыкновенный]

Это просто для примера. Нужно вставлять сложные многоэтажные latex формулы.

[Ankhena]

Евгений Обыкновенный: тогда выкладывайте нормально код на jsfiddle

[Евгений Обыкновенный]

Отступы есть https://jsfiddle.net/uLrqw7hy/
Отступов нет https://jsfiddle.net/cev4duss/

[Ankhena]

Евгений Обыкновенный: посмотрела в опере и в ФФ, я не вижу никаких разных горизонтальных отступов

[Евгений Обыкновенный]

Ankhena W: сейчас у меня в ФФ тоже одинаков. А в Хроме есть:

[Ankhena]

html,body {
  padding: 0;
  margin: 0;
}

и отступа не будет.
Сейчас он есть одинаковый в обоих ваших вариантах

[Евгений Обыкновенный]

Ankhena W: и это не помогло. Отступы появляются и пропадают, даже если немного поменять в img значение height. Похоже, это какой-то глюк определения размеров картинки или отрисовки страницы, который случайно проявляется от совершенно разных причин. Может, что-то с округлением связано.

https://jsfiddle.net/sykL90vb/
В Хроме: i.imgur.com/RyqzMbN.jpg

https://jsfiddle.net/z6tb84ny/
В Хроме: i.imgur.com/9CZP73A.jpg

В ФФ одинаково.

[Ankhena]

и это не помогло

ну конечно, не поможет, вы же это в javascript написали вместо css

Правда, это все равно не тот отступ, который на ваших скринах

[Евгений Обыкновенный]

Ankhena W: сейчас исправлю, но я уверен, что все равно не поможет) Я сначала проверял на своем локальном html-файлике.

[Евгений Обыкновенный]

https://jsfiddle.net/tzL7fhk5/
i.imgur.com/ztEvAin.jpg

https://jsfiddle.net/m2jmosL5/
i.imgur.com/xKJI4l9.jpg

[Ankhena]

Евгений Обыкновенный: У меня все варианты в хроме выглядят как вот этот ваш скрин i.imgur.com/3md5hjN.jpg

Что бы делала я (если это возможно):
В самой svg заменила бы pt на вменяемые веб-единицы измерения.
Ширину и/или высоту задавала бы либо только в самой svg либо только в img.
Дикие тысячные доли em округлила бы до сотых, а лучше до десятых.
Текст вокруг (знак равенства, точка) внесла бы в svg и жила бы без vertical-align или, если это невозможно, постаралась бы сделать так, чтобы он был равен middle.

Еще бы масштаб проверила на разных вкладаках браузера.

[Евгений Обыкновенный]

Ankhena W:

В самой svg заменила бы pt на вменяемые веб-единицы измерения.

Нельзя. Формулы у меня на сервере генерятся на лету. Никакие известные мне утилиты не дают возможности настраивать параметры и выбирать единицы. К тому же я хочу, чтоб формулы масштабировались вместе с размером текста, поэтому px не хотелось бы применять. Пока единственная мысль, указывать еще и ширину. Но ведь всегда будут погрешности отношения ширины к высоте. Как бы так указать вместе ширину и высоту, чтоб картинка не искажалась, не меняла пропорции. Может высоту задавать через max,min-height, а width будет подчиняться им.

жила бы без vertical-align

Тоже нельзя, без него формулы сдвигаются ниже или выше базовой линии.

vertical-align middle:


vertical-align вычислен:

[Ankhena]

К тому же я хочу, чтоб формулы масштабировались вместе с размером текста, поэтому px не хотелось бы применять.

em прекрасно подошли бы.
И что-то я не уверена, что при масштабировании различными способами не уедет ваш волшебный vertical-align.
А нельзя заранее вертикально центрировать svg?

Пока единственная мысль, указывать еще и ширину. Но ведь всегда будут погрешности отношения ширины к высоте.

Зачем? Достаточно указать что-то одно, второе автоматически будет пропорционально.

===
Всю страницу засунуть в svg или canvas со всеми формулами и текстами прямо из латеха (или как у вас технология устроена).
Нервная дрожь пробирает от слова латех.

Answer 2

[Андрей]

сюда залейте https://jsfiddle.net/

Comments

[Евгений Обыкновенный]

Отступы есть https://jsfiddle.net/uLrqw7hy/
Отступов нет https://jsfiddle.net/cev4duss/

[Евгений Обыкновенный]

Глюк пропадает, если vertical-align неотрицательный.

[Андрей]

Евгений Обыкновенный: это скорее всего из-за высоты которую вы задаете в em попробуйте задать в px и все будет в порядке

[Евгений Обыкновенный]

Андрей: пробовал. В хроме помогает, в ФФ нет.

[Андрей]

Евгений Обыкновенный: странно. у меня в фф норм. разные значения пробовал везде так