README.md - изображение в svg с пробелом в верхнем и нижнем полях

Question

Я пишу README.md, который вставляет это svg изображение:

Some text

<p align="left">
          <img width="256" height="256" src="https://github.com/DavidCdeB/Trial/blob/master/Images/extract2.svg">
</p>

Other text

Некоторое пустое пространство добавляется в верхнем и нижнем полях, как показано здесь:

^{Рис. 1}

Я реализовал решение, опубликованное здесь , где говорится, чтоФайл SVG должен быть открыт в редакторе Inkscape, а затем выполните команду Go to File> Document Properties> Resize Page to content> Resize page to drawing or selection.Это удаляет пространство вокруг SVG.Однако после этого проблема все еще появляется, и я продолжаю видеть пустое пространство в верхнем и нижнем полях.

Обновление:

Как очень хорошо указано@squeamish ossifrage, собственный размер изображения svg составляет width="318.978mm" height="97.003448mm".Таким образом, теперь это объясняет, почему изображение, объявленное с width="256" height="256", приводит к дополнительному интервалу.

Если в теге <img> я не указываю размеры:

Some text

<p align="left">
  <img src="https://github.com/DavidCdeB/Trial/blob/master/Images/extract2.svg">
</p>

Other text

Я получаю следующее:

^{Рис. 2}

, где дополнительный интервал не виден, но изображение слишком велико.

Если я укажу width="318.978mm" height="97.003448mm" в <img>тег:

Some text

<p align="left">
  <img width="318.978mm" height="97.003448mm" src="https://github.com/DavidCdeB/Trial/blob/master/Images/extract2.svg">
</p>

Other text

Результат следующий:

^{Рис. 3}

, что намного лучше.

Теперь, это интересная вещь: если svg имеет собственные размеры width="318.978mm" height="97.003448mm", почему при явном объявлении width="318.978mm" height="97.003448mm" в теге <img размер изображения так сильно изменяется (Рис. 3) относительно того, что произойдет, если спецификация не будет объявлена ​​(рис. 2)?

Answer 1

почему при явном объявлении width = "318.978mm" height = "97.003448mm" в теге img размер изображения так сильно изменяется (Рис. 3) относительно того, что происходит, если не объявлена ​​никакая спецификация (Fig.2)?

Это потому, что SVG-файл имеет ширину 318,978 мм, а не 318,978 пикселей.

318,978 мм равен 1205,586 пикселей.

Причина, по которой <img width="318.978mm" height="97.003448mm" ... дает вам изображение 318x97, заключается в том, что атрибуты width и height для <img> определены как значения в пикселях .Поэтому mm игнорируется.

См. Раздел "4.8.18 Атрибуты измерения" в стандарте HTML .

.