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

Или, если это скорее вопрос приоритетов, сколько времени CDCK хочет потратить на решение этой проблемы, я буду рад указанию на соответствующий код; я не хочу создавать здесь дополнительную нагрузку. Вы видели в моих предыдущих вкладах, что я не эксперт по Ruby или RoR, но я был бы готов добавить это в свой список задач для изучения. (Я создал эту тему изначально до того, как мы поняли, что она отбрасывает единицы измерения и предполагает пиксели, поэтому подумал, что это дизайнерское решение, поэтому и разместил её в Contribute > UX, а не в Contribute > 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 лайков