PerfectVector
Автор: Irene Kim

Толщина линий раскраски: проверяйте размер печати

Выбирайте толщину линий раскраски в конечном размере. Сравните толщины, сохраните маленькие области для цвета и проверьте, использует ли SVG обводки или заливки.

7 мин чтения
На этой странице

Выбирайте толщину линий раскраски после задания конечного физического размера рисунка. Сравните несколько толщин на одном рисунке, затем проверяйте самые маленькие белые просветы так же внимательно, как чёрные линии. Более толстый контур может сделать фигуру различимее, одновременно закрыв узкую область, которую читатель должен раскрасить.

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

Принимайте решение в размере передачи

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

Сначала задайте размер страницы и рисунка

Начните с редактируемого мастер-файла и предполагаемого размера страницы. Сравнивайте цветок, предназначенный для квадрата 100 мм, именно в этом размере: увеличенный вид редактора может скрыть крошечный просвет.

viewBox SVG — прямоугольник координат рисунка. В нашем квадратном примере сочетаются width="100mm", height="100mm" и viewBox="0 0 100 100", что даёт один миллиметр на единицу рисунка. Тот же viewBox в квадрате 50 мм даёт полмиллиметра на единицу. Спецификация координат SVG определяет это преобразование.

Обычные обводки масштабируются с геометрией этого примера: ширина 0.6 составляет 0,6 мм в большом файле и 0,3 мм в маленьком. В этих файлах нет настройки немасштабируемой обводки; перепроверяйте ширину, если редактор сохраняет обводки при изменении размера.

Сравнивайте линию и пространство рядом с ней

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

Рассмотрим две границы стебля на расстоянии одной единицы рисунка. Увеличение каждой обводки с 0.3 до 0.6 уменьшает чистый просвет с 0.7 до 0.4 единицы. При 1.2 обводки перекрываются и канал закрывается.

Толщина линий и белое пространство
Иллюстрация одного цветка со всё более толстыми чёрными контурами и уменьшающимися белыми просветами между ними.
Иллюстрация: более толстый контур оставляет меньше белого пространства внутри и между соседними фигурами. Измерения ниже получены из отдельного созданного нами примера SVG.
Пробная ширина обводки SVGЛиния при размере 100 ммЧистый просвет стебля при 100 ммЛиния при размере 50 ммЧистый просвет стебля при 50 мм
0,3 единицы0,3 мм0,7 мм0,15 мм0,35 мм
0,6 единицы0,6 мм0,4 мм0,3 мм0,2 мм
1,2 единицы1,2 ммЗакрыт0,6 ммЗакрыт

При размере 100 мм эти пробные толщины составляют примерно 0,85, 1,70 и 3,40 пункта. Это значения для сравнения, а не рекомендованные минимумы или возрастные стандарты. Расчёт просвета описывает параллельный участок стебля; кончики лепестков и криволинейные стыки проверяйте отдельно.

Сделайте небольшое сравнение до изменения всей книги

Сохраните этот исходный пример как flower.svg. Меняйте только stroke-width, чтобы сравнить три строки выше. Затем измените оба внешних размера на 50mm, сохранив viewBox, чтобы получить маленький набор.

<svg xmlns="http://www.w3.org/2000/svg"
     width="100mm" height="100mm" viewBox="0 0 100 100">
  <g fill="none" stroke="#000000" stroke-width="0.3"
     stroke-linecap="butt" stroke-linejoin="round">
    <ellipse cx="50" cy="20" rx="7" ry="10"/>
    <ellipse cx="50" cy="20" rx="7" ry="10" transform="rotate(60 50 35)"/>
    <ellipse cx="50" cy="20" rx="7" ry="10" transform="rotate(120 50 35)"/>
    <ellipse cx="50" cy="20" rx="7" ry="10" transform="rotate(180 50 35)"/>
    <ellipse cx="50" cy="20" rx="7" ry="10" transform="rotate(240 50 35)"/>
    <ellipse cx="50" cy="20" rx="7" ry="10" transform="rotate(300 50 35)"/>
    <circle cx="50" cy="35" r="5"/>
    <path d="M49.5 60V85 M50.5 60V85"/>
  </g>
</svg>

Два прямых контура стебля идут от y=60 до y=85 на расстоянии одной единицы. Проверяйте середину, чтобы сравнить просвет без влияния лепестков или концов линий.

Мы экспортировали все шесть вариантов в PDF с librsvg 2.62.1 и заново открыли их с Poppler 26.02.0. Размеры страниц PDF совпали со 100 мм и 50 мм в пределах округления. При 1 016 DPI измеренные просветы стебля составили 28, 16 и 0 пикселей для большого набора, затем 14, 8 и 0 для маленького, что соответствует таблице при 40 пикселях на миллиметр. Мы проверили отрендеренные файлы; физической печати не было.

  1. Сохраните нетронутый мастер-файл. Выберите один характерный мотив, содержащий открытую область раскрашивания и тесную деталь.
  2. Сделайте три копии с одинаковыми геометрией и физическими размерами. Меняйте только ширину редактируемой обводки.
  3. Проверьте самые тесные места в предполагаемом размере. Если просвет закрывается, попробуйте меньшую толщину или раздвиньте соседние контуры. Удаление ненужного внутреннего штриха может быть понятнее, чем утончение всех линий.
  4. Экспортируйте нужный формат передачи, откройте заново и подтвердите размеры страницы. Сравните экспортированную графику с мастером, включая маленькие отверстия, углы и концы линий.
  5. Повторите проверку в наименьшем размере, который планируете продавать или печатать. Масштабирование готовой страницы может изменить решение.

Используйте одинаковую страницу и масштаб для сравнения. Толщина, подходящая внешнему контуру цветка, может теснить внутренние штрихи. Если внешние и внутренние толщины различаются, проверьте места их встречи после экспорта.

Проверьте, есть ли в SVG обводки или залитые контуры

Заливка окрашивает внутренность фигуры. Поэтому видимая чёрная линия может быть узкой залитой фигурой или центральным контуром с обводкой. Изменение stroke-width влияет на обводку, но не меняет существующую заливку при stroke="none". Мы также экспортировали два одинаковых контрольных залитых контура, отличавшихся только шириной обводки. Их отрендеренные пиксели совпали. Эти контроли были созданными фигурами, а не результатом трассировки продукта.

Обычная контурная трассировка следует краям чернильного следа. Осевая трассировка пытается восстановить путь по его середине. Руководство Inkscape по трассировке описывает оба режима. Проверяйте реальный объект, не предполагая одинаковую структуру всех трассированных SVG.

Для залитого контура исправьте исходный рисунок, если он доступен. Иначе редактируйте геометрию или перерисуйте затронутую осевую линию. Добавление обводки вокруг внешнего контура не восстанавливает исходную траекторию пера. Наше руководство «Обводку в контур» и «Объект в контур» объясняет это структурное различие, а руководство по однолинейному SVG рассматривает осевые линии для плоттера.

Если единственный источник — раскраска PNG или JPG, процесс векторизации раскрасок PerfectVector может дать редактируемые фигуры SVG для проверки. Проверьте предпросмотр, затем разблокируйте результат для редактирования и экспорта SVG. Векторизация не выбирает идеальную толщину линий страницы и не гарантирует осевую обводку, регулируемую одним параметром ширины. Для подготовки источника и трассировки следуйте руководству по линейным рисункам в SVG.

Сохраняйте существующий векторный мастер в редакторе. Подходящая растровая страница может уже отвечать требованиям типографии; объяснение векторизации изображений помогает решить, нужна ли редактируемая геометрия.

Разделяйте минимум типографии и выбор дизайна

Следуйте требованиям сервиса, принимающего файл. Например, правила KDP для мягкой обложки указывают минимальную толщину линий графических элементов 0,75 пункта. Это требование подачи KDP, а не рекомендуемый стиль раскрасок или правило для всех типографий.

Перепроверьте размер передачи относительно этого требования. Линия, отвечавшая минимуму до уменьшения рисунка, может стать тоньше него после. Согласуйте единицы: определение абсолютных длин CSS задаёт один пункт как 1/72 дюйма. Не считайте округлённый миллиметровый эквивалент точным преобразованием.

Для бумажной пробы печатайте в нужном масштабе, отключите нежелательное уменьшение до страницы и измерьте известный размер линейкой. По возможности используйте предполагаемые бумагу и инструменты раскрашивания. Ищите разорванные линии, закрытые просветы и тесные детали. Цифровой тест выше не устанавливает растекание чернил, поведение бумаги или удобство раскрашивания.

Частые вопросы

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

Почему линии кажутся тоньше после уменьшения рисунка? Обычное масштабирование геометрии может уменьшать ширину обводки вместе с изображением. Проверьте экспортированный файл в конечном размере. Параметр редактора или немасштабируемая обводка могут сохранять ширину, но оставшиеся просветы всё равно нужно проверять.

Почему настройка stroke-width не меняет мои трассированные линии? Чёрные следы могут быть залитыми контурными фигурами без обводки. Параметр ширины обводки не меняет их залитую геометрию. Редактируйте источник или контуры либо осознанно восстанавливайте осевые линии, где это уместно.

Источники

  1. W3C — Системы координат SVG 2 — Объясняет преобразование viewBox в область просмотра для двух физических размеров.
  2. W3C — Рисование SVG 2 — Различает заливку и обводку и определяет ширину обводки.
  3. Inkscape — Трассировка изображения — Отличает контурную трассировку от осевой.
  4. Amazon KDP — Правила подачи книг в мягкой обложке — Задаёт минимальную толщину линий для конкретного сервиса.
  5. W3C — Значения и единицы CSS — Определяет связь пунктов, дюймов и других абсолютных единиц длины.

Если источник для редактирования — PNG или JPG, попробуйте свою раскраску в PerfectVector. После разблокировки и экспорта SVG проверьте геометрию линий и самые маленькие белые просветы в предполагаемом размере страницы до подготовки бумажной пробы.

Ещё из блога

PerfectVector

Превратите логотип или рисунок в
чистый редактируемый SVG

Без банковской карты