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

Внести вклад UX
1

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

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

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

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

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

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

image
image964×126 16.9 KB

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

2 лайка
2

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

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

3

Спасибо!

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

e1ff136dadb082718c04bb5aaf0f1395de79ba93

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

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

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

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

e1ff136dadb082718c04bb5aaf0f1395de79ba93

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

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

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

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

2 лайка
Add the .svg file extension to "image files"
4

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

5 лайков
5

Спасибо!

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

4 лайка
7

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

Я экспериментировал с несколькими проблемными файлами, используя как ImageMagick, так и librsvg. Похоже, что ImageMagick по умолчанию использует DPI 96, а librsvg — 90. Думаю, любой вариант приемлем, если мы выберем разумное значение по умолчанию и будем его придерживаться…

5 лайков
9

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

Спасибо!

12

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

13

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

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

Или же это больше вопрос приоритетов относительно того, сколько времени CDCK готов уделить этой проблеме? В таком случае буду рад получить указание на код; я не хочу создавать ощущение, что это обременительно. Вы видели в моих предыдущих вкладах, что я не эксперт в Ruby или RoR, но готов добавить это в свой список задач для изучения. (Я изначально создал эту тему, прежде чем мы осознали, что система отбрасывает единицы измерения и предполагает пиксели, поэтому думал, что это дизайнерское решение, из-за чего разместил её в ux, а не в bug :smiling_face:)

1 лайк
17

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

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

5 лайков
18

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

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

2 лайка
19

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

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

4 лайка
20

pencil
pencil768×1152 10.9 KB

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

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

8 лайков
21

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

5 лайков