# SVG-файлы при загрузке отображаются слишком мелко

**URL:** https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283
**Category:** UX
**Created:** [19.Февраль.2021 01:18:45 UTC](https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283 "2021-02-19T01:18:45Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![mcdanlj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcdanlj/32/131829_2.png) [@mcdanlj](https://meta.discourse.org/u/mcdanlj)
#### Post date: [19.Февраль.2021 01:18:45 UTC](https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283/1 "2021-02-19T01:18:45Z")

</div>

Мы разрешаем загрузку SVG-файлов на Maker Forums, отчасти потому, что одна из наших групп пользователей — это пользователи лазерных гравёров и резаков, где формат SVG широко используется. Мы хотим, чтобы люди могли загружать их: как для скачивания другими пользователями, так и для просмотра в ходе обсуждений. Часто это происходит в контексте запросов о помощи.

К сожалению, такие файлы часто отображаются крайне маленькими, иногда практически невидимо маленькими. Сегодня вечером кто-то загрузил SVG-файл, который автоматически был установлен размером 12×8 пикселей. Из-за этого цветные линии исчезли, и изображение выглядело как фотография белого медведя в метель. (Я удивлён, что модератор категории вообще заметил наличие SVG-файла.) Это уже давно известная для нас проблема.

Опытные пользователи, возможно, могли бы узнать, что можно, например, изменить `12x8` на `480x320`, чтобы реально увидеть изображение. Однако опытные пользователи чаще всего не нуждаются в этом: большинство людей, загружающих SVG-файлы, — это новички, ищущие помощи, и они не знают об этой особенности Discourse.

Что заставляет Discourse ограничивать размер SVG-файлов всего несколькими пикселями?

Вот запрос от модератора категории для справки:

> **[SVG Scaling](https://forum.makerforums.info/t/svg-scaling/82506)**
>
> @mcdanlj There is something odd going on with uploaded SVG scaling. In this thread: https://forum.makerforums.info/t/k40-whisperer-not-detecting-lines/82505/4 TanneM273 uploaded an SVG file and the scale was ridiculously small. When I...

Редакция: Из этой темы, возможная причина, почему это может чаще влиять именно на этот форум, чем на другие:

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/7/f73b8afd12c11f57704659e6578ff017e018b070.png)

Распространённые лазерные резаки модели “K40” имеют рабочее поле размером 12×8 дюймов и работают с точностью до тысячных долей дюйма, а не в метрической системе. Поэтому использование дюймов для таких SVG-файлов вполне обосновано — это не вопрос «пользователям следует использовать метрическую систему».

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [21.Февраль.2021 02:18:25 UTC](https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283/2 "2021-02-21T02:18:25Z")

</div>

Кажется, ваши настройки нестандартные. Что произойдет, если вы загрузите сюда SVG?

SVG-файлы могут представлять угрозу безопасности, поэтому обычно не разрешают их свободное отображение в сообщениях.

---

<div class="post-metadata">

### Author: ![mcdanlj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcdanlj/32/131829_2.png) [@mcdanlj](https://meta.discourse.org/u/mcdanlj)
#### Post date: [21.Февраль.2021 13:17:06 UTC](https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283/3 "2021-02-21T13:17:06Z")

</div>

Спасибо!

> [@codinghorror](#):
>
> Что происходит, когда вы загружаете сюда SVG?

Вот как выглядит этот конкретный пример графики здесь (это не пятно грязи на вашем экране, это отрисованная графика):

![e1ff136dadb082718c04bb5aaf0f1395de79ba93](https://global.discourse-cdn.com/meta/original/3X/e/1/e1ff136dadb082718c04bb5aaf0f1395de79ba93.svg)

Я вижу здесь точно такой же выводимый размер 12x8 пикселей; вот исходный Markdown точно таким, каким он отображается после загрузки этого файла, без каких-либо изменений:

```plaintext
![e1ff136dadb082718c04bb5aaf0f1395de79ba93|12x8](upload://wffVySQ30j5UczxrY5nifKC0kEP.svg) 

```

> [@mcdanlj](#):
>
> Опытные пользователи, возможно, узнают, что они могут, например, изменить `12x8` на `480x320`, чтобы фактически увидеть изображение

Изменение выводимого размера с 12x8 на 480x320 делает изображение видимым не просто как пылинку:

```plaintext
![e1ff136dadb082718c04bb5aaf0f1395de79ba93|480x320](upload://wffVySQ30j5UczxrY5nifKC0kEP.svg) 

```

![e1ff136dadb082718c04bb5aaf0f1395de79ba93](https://global.discourse-cdn.com/meta/original/3X/e/1/e1ff136dadb082718c04bb5aaf0f1395de79ba93.svg)

> [@codinghorror](#):
>
> Я думаю, что ваши настройки нестандартные.

Какие именно «настройки» вы имеете в виду?

> [@mcdanlj](#):
>
> Мы разрешаем загрузку SVG на Maker Forums, отчасти потому, что одна из наших пользовательских групп — пользователи лазерных гравировальных машин и резаков, где SVG широко используются. Мы хотим, чтобы люди могли их загружать: как для скачивания другими пользователями, так и для просмотра в ходе обсуждения.

Очевидно, что это потребовало разрешения загрузки SVG; насколько я помню, мне пришлось добавить `svg` в конфигурацию `authorized_extensions` около двух лет назад.

> [@codinghorror](#):
>
> SVG могут представлять угрозу безопасности, поэтому редко разрешают их свободную отрисовку в сообщениях.

Я видел код санитизации SVG в Discourse. Я вижу, что они здесь отрисовываются. Из-за ценности SVG для одной из ключевых миссий Maker Forums, в сочетании с тем, как мы управляем нашей пользовательской базой, мы сознательно выбрали их отображение. Когда у людей возникают проблемы с лазерной резкой/гравировкой SVG, возможность увидеть SVG в контексте обсуждения является ценным подспорьем для понимания и диагностики.

Поскольку мне удалось отобразить SVG здесь, на meta, presumably вы приняли такое же решение, хотя, очевидно, по другой причине.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [21.Февраль.2021 19:29:19 UTC](https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283/4 "2021-02-21T19:29:19Z")

</div>

Отлично, спасибо за дополнительные подробности. Возможно, @jamie.wilson сможет взглянуть на эту проблему на следующей неделе.

---

<div class="post-metadata">

### Author: ![mcdanlj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcdanlj/32/131829_2.png) [@mcdanlj](https://meta.discourse.org/u/mcdanlj)
#### Post date: [21.Февраль.2021 21:56:16 UTC](https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283/5 "2021-02-21T21:56:16Z")

</div>

Спасибо!

Просто хочу убедиться, что в ходе расследования точка зрения Скорча, изложенная выше, о том, что размер 12x8 пикселей, вероятно, не случаен, а скорее всего обусловлен отсутствием обработки единиц измерения в атрибутах `width` и `height` элемента `svg`: `<svg ... width="12in" height="8in" ...>` — я не осознавал этого, когда впервые задал вопрос. ☺

---

<div class="post-metadata">

### Author: ![jamie.wilson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamie.wilson/32/185466_2.png) [@jamie.wilson](https://meta.discourse.org/u/jamie.wilson)
#### Post date: [25.Февраль.2021 20:45:58 UTC](https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283/7 "2021-02-25T20:45:58Z")

</div>

> [@mcdanlj](#):
>
> Замечание Scorch выше о том, что размер 12x8 пикселей, скорее всего, не случаен, а обусловлен тем, что единицы измерения в атрибутах width и height элемента `svg` не обрабатываются:

Вы абсолютно правы. Библиотека, которую мы используем для получения размеров изображений, просто извлекает целочисленное значение атрибутов `width` и `height` в SVG-файлах и не пытается парсить типы единиц измерения. Я изучу вопрос и постараюсь найти наиболее чистое решение этой проблемы.

Я экспериментировал с несколькими проблемными файлами, используя как [ImageMagick](https://imagemagick.org), так и [librsvg](https://ru.wikipedia.org/wiki/Librsvg). Похоже, что ImageMagick по умолчанию использует DPI 96, а librsvg — 90. Думаю, любой вариант приемлем, если мы выберем разумное значение по умолчанию и будем его придерживаться…

---

<div class="post-metadata">

### Author: ![mcdanlj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcdanlj/32/131829_2.png) [@mcdanlj](https://meta.discourse.org/u/mcdanlj)
#### Post date: [25.Февраль.2021 22:04:17 UTC](https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283/9 "2021-02-25T22:04:17Z")

</div>

Либо 90, либо 96 точек на дюйм сделали бы SVG с шириной и высотой, заданными не только в дюймах, но и в миллиметрах, более разумного размера. Сейчас SVG с размерами в миллиметрах отображаются примерно в масштабе 1 мм на пиксель браузера, то есть в 3–4 раза меньше оригинала. Раньше я просто пожимал плечами и говорил: «Ну, масштабируемый, вроде бы…», но если вы сможете добавить поддержку как дюймов, так и миллиметров с разумным разрешением по умолчанию, это значительно улучшит отображение обоих вариантов. 🎉

Спасибо!

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [28.Февраль.2021 01:52:25 UTC](https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283/12 "2021-02-28T01:52:25Z")

</div>

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

---

<div class="post-metadata">

### Author: ![mcdanlj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcdanlj/32/131829_2.png) [@mcdanlj](https://meta.discourse.org/u/mcdanlj)
#### Post date: [28.Февраль.2021 13:57:42 UTC](https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283/13 "2021-02-28T13:57:42Z")

</div>

> [@codinghorror](#):
>
> Нас беспокоит, что SVG вообще не отображается в электронной почте, поэтому полезность этого решения довольно ограничена.

HTML для электронной почты — это такой ограниченный набор (не говоря уже о непоследовательной реализации; см. Litmus), и вы сами указываете, что Discourse создан для современного веба (например, бесконечная прокрутка), поэтому я не был уверен, что полное отображение всего, что можно представить в вебе, в электронной почте является ключевым приоритетом. Это для меня новая тема для изучения. (Я могу представить, что при наличии бесконечных ресурсов можно было бы конвертировать SVG в PNG для вставки в электронную почту, что дало бы более высокое качество, чем множество хаков, необходимых для HTML-писем в целом, но поскольку SVG по умолчанию отключен, это кажется _очень_ низким приоритетом…)

@Neotinker размышлял о том, чтобы в какой-то момент использовать onebox с Three.js для встраивания интерактивных 3D-моделей в обсуждения этих моделей на Discourse; это было бы функцией, которую мы хотели бы включить для форумов создателей (Maker Forums), если бы такая функция когда-нибудь появилась. Не помешает ли соображение «это нельзя отобразить в электронной почте» принятию такой доработки, если он или кто-то другой её реализует? (Я отмечаю, что сам Three.js использует Discourse для своего собственного форума…)

Или, если это скорее вопрос приоритетов, сколько времени CDCK хочет потратить на решение этой проблемы, я буду рад указанию на соответствующий код; я не хочу создавать здесь дополнительную нагрузку. Вы видели в моих предыдущих вкладах, что я не эксперт по Ruby или RoR, но я был бы готов добавить это в свой список задач для изучения. (Я создал эту тему изначально до того, как мы поняли, что она отбрасывает единицы измерения и предполагает пиксели, поэтому подумал, что это дизайнерское решение, поэтому и разместил её в #Contribute > UX, а не в #Contribute > Bug ☺)

---

<div class="post-metadata">

### Author: ![jamie.wilson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamie.wilson/32/185466_2.png) [@jamie.wilson](https://meta.discourse.org/u/jamie.wilson)
#### Post date: [28.Февраль.2021 20:33:02 UTC](https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283/17 "2021-02-28T20:33:02Z")

</div>

> <https://github.com/discourse/discourse/pull/12230>
>
> SVG files can have dimensions expressed in inches, centimeters, etc., which may …lead to the dimensions being misinterpreted (e.g. “8in” ends up as 8 pixels).
> 
> If the file type is \`svg\`, ask ImageMagick to work out what size the SVG file should be rendered on screen.
> 
> NOTE: The \`pencil.svg\` file was obtained from https://freesvg.org/1534028868, which has placed the file in to the public domain.

В пятницу во второй половине дня я создал запрос на слияние, который должен решить проблему, когда SVG-файлы отображаются крошечными, если их размеры указаны в дюймах, сантиметрах, миллиметрах или подобных единицах.

Запрос на слияние ожидает код-ревью, поэтому пока недоступен, но скоро должен быть готов к использованию.

---

<div class="post-metadata">

### Author: ![mcdanlj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcdanlj/32/131829_2.png) [@mcdanlj](https://meta.discourse.org/u/mcdanlj)
#### Post date: [28.Февраль.2021 22:00:31 UTC](https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283/18 "2021-02-28T22:00:31Z")

</div>

Спасибо, что поделились коммитом, чтобы я мог увидеть, где и как это было сделано!

Извините, я неправильно понял @codinghorror — мне показалось, что он имел в виду, что дело превратилось в притчу о банке с червями, и я не хотел создавать здесь много работы.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [01.Март.2021 00:33:53 UTC](https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283/19 "2021-03-01T00:33:53Z")

</div>

Нет проблем! Мы фанаты SVG, но также и реалисты 😉

В любом случае, предложения по небольшим улучшениям всегда приветствуются!

---

<div class="post-metadata">

### Author: ![jamie.wilson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamie.wilson/32/185466_2.png) [@jamie.wilson](https://meta.discourse.org/u/jamie.wilson)
#### Post date: [01.Март.2021 17:57:02 UTC](https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283/20 "2021-03-01T17:57:02Z")

</div>

![pencil](https://global.discourse-cdn.com/meta/original/3X/8/e/8e63ade2480fe3d13fd3c8087a787e8c49a012b7.svg)

Вот SVG-изображение карандаша размером 8 дюймов на 12 дюймов.

Изменения были объединены и станут доступны после обновления.

---

<div class="post-metadata">

### Author: ![mcdanlj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcdanlj/32/131829_2.png) [@mcdanlj](https://meta.discourse.org/u/mcdanlj)
#### Post date: [01.Март.2021 21:43:32 UTC](https://meta.discourse.org/t/svg-uploads-displayed-too-small/180283/21 "2021-03-01T21:43:32Z")

</div>

Спасибо большое! Я уже разместил это на форуме Maker 🎉
