Использование inkscape для преобразования отсканированных цветных рисунков в svg — рекомендуется или нет?

Лучшим подходом к размеру файла, качеству изображения и гибкости, вероятно, будет SVG со встроенным изображением (или двумя). Если вы масштабируете и размещаете все (текст, изображение, векторные графические элементы) с помощью SVG, а затем добавляете к нему соответствующий параметр «viewBox», формат SVG будет обрабатывать масштабирование изображений до размера.

Если вы можете успешно (из графического изображения и размера файла) преобразовать границу рисования линии в путь SVG, используя технику @boblet, это может оказаться полезным, но я подозреваю, что вы обнаружите, что @Takkat оценивает размер файла по сравнению с качеством. справедливо для цветных изображений.

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

Ваш код svg будет выглядеть примерно так:

<svg id="ch1-title-image" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMin meet">
   <defs>
      <desc>
          Chapter 1
          <!-- add some extra info for screen readers, since they won't
               know that the <text> below is styled like an <h2> heading -->
      </desc>
      <clipPath id="inset-ch1">
          <path d="<!-- define border of coloured area here -->"/> 
      </clipPath>
   <defs>

   <image xlink:href="images/Ch1.jpeg" 
          x="350" y="100" width="300" height="200"
          clip-path = "url(#inset-ch1)" />
   <!-- position and size the coloured image within the SVG,
        and crop it to shape, the image file will be scaled to fit
        this rectangle -->

   <image xlink:href="images/ChapterBorder.png"
         x="0" y="0" width="1000" height="500" />
   <!-- an <image> element also works if the border is saved as an SVG, but
        you could also use a <use> element (which would allow you to set CSS styles
        on the main file and have it inherited by the embedded file) -->

   <text x="500" y="400" text-anchor="middle" font-size="60">
       The Lamp in the Window
   </text>
</svg>

Для других глав вы должны изменить URL-адрес в первом <image>, текстовое содержимое и idзначения. К сожалению, вам придется каждый раз повторять путь отсечения (если только вы не уверены, что это всегда будет один длинный файл HTML), потому что ссылки пути отсечения всегда должны относиться к фрагменту в одном и том же файле , хотя вы можете использовать <use>элемент внутри для ссылки на сам путь. Вероятно, сам по себе дополнительный запрос файла не стоит, но было бы оптимально, если бы вы определили границу как файл SVG, тогда у вас мог бы быть путь внутри него (даже если он невидим), который определяет границу для цветной области:

<svg id="ch1-title-image" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMin meet">
   <defs>
      <desc>
          Chapter 1
      </desc>
      <clipPath id="inset-ch1">
          <use xlink:href="images/ChapterBorder.svg#inset-border"/> 
      </clipPath>
   <defs>

   <image xlink:href="images/Ch1.jpeg" 
          x="350" y="100" width="300" height="200"
          clip-path = "url(#inset-ch1)" />

   <use xlink:href="images/ChapterBorder.svg"
         x="0" y="0" width="1000" height="500" />

   <text x="500" y="400" text-anchor="middle" font-size="60">
       The Lamp in the Window
   </text>
</svg>

«inset-border» должен быть идентификатором элемента <path>или <g>в «ChapterBorder.svg».

Измените размер SVG с помощью CSS, обязательно установив height:auto;. Текст и изображения будут идеально масштабироваться. См. этот StackOverflow Q&A, чтобы узнать больше о корректном изменении размера изображений SVG .

Преимущества использования файла SVG с трассировкой по сравнению со сжатым растровым изображением в формате JPEG во многом зависят от сложности содержимого.

Простые объекты

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

Слева исходник JPG 7,2 кБ. Справа 4,9 КБ с трассировкой SVG

Рисунки или фотографии

Теперь это будет по-другому для ручных рисунков. В приведенном ниже примере показано, что можно сделать с основными настройками в инструменте трассировки Inkscape:

^{Источник растрового изображения: Wikimedia Max & Moritz}

Мы видим, что трассируемое изображение тем лучше, чем больше объектов сканирования мы создаем. Но, увы, размер файла SVG с 64 несглаженными сканами вырос до огромных 11,1 МБ. Это не имеет смысла, учитывая, что растровый файл JPG имел размер всего 141,9 КБ.

Тем не менее, сглаженный SVG с 6-кратным сканированием будет иметь вдвое больший размер, чем растровый JPG.

Только если мы еще больше уменьшим сложность, мы можем получить меньший размер файла, чем у JPG. Но это может не совсем соответствовать нашим потребностям:

Оставлена ​​упрощенная трассировка размером 102 КБ с 5 сканами. Правильный сжатый растровый файл JPG размером 142 КБ.

Объединение трассированного вектора и встроенного растрового изображения

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

1. Удалите цветные части изображения и уменьшите линейные рисунки до черно-белого растрового изображения (здесь это делается с помощью свободного выбора Gimp, затем « Цвета»> «Порог» ).

   

2. Сохраните цветную часть изображения как отдельное растровое изображение:

   

3. Проследите черно-белую границу с помощью Inkscape ( Путь > Трассировка растрового изображения > 2 скана серого, без оптимизации )

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

4. Вставьте растровое изображение, которое мы сохранили в 2., в векторное изображение:

   

   Теперь мы видим, что при масштабировании SVG мы также будем масштабировать растровое изображение, что приведет к блочным артефактам только в растровой части:

   

Результирующие размеры файлов из приведенных выше шагов:

Source bitmap image PNG: 567.1 kB
Source bitmap image JPG:  89.2 kB (80% compression)
Vectorized Frame SVG:    176.6 kB
SVG with embedded PNG:   441.5 kB

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

Использование inkscape для преобразования отсканированных цветных рисунков в svg — рекомендуется или нет?

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

Основываясь на представленном вами изображении, я бы попытался сделать следующее:

Черно-белые штриховые рисунки должны быть достаточно простыми, чтобы их можно было проследить. Прошу сделать сканы цветных деталей в как можно большем разрешении.

Я бы проследил отдельно черно-белую и цветную части . Чтобы сделать их вместе, было бы слишком много элементов и компромиссов.

Обратите внимание, что эти примеры сделаны в Illustrator, а я не эксперт в Inkscape. Однако; Inkscape должен иметь примерно такие же возможности.

Вот часть изображения, которое вы предоставили:

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

Так что они примерно равны. Для ясности: слева не прослеживается, справа прослеживается:

Цвета везде разные и не такие как в оригинале. Затем я снова проследил бы то же изображение от оригинала, но на этот раз только с учетом цветных частей.

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

Я бы удалил текст с рисунка, добавил его в Inkscape на третьем слое как текст.

Точных шагов в Inkscape я вам, увы, сказать не могу; но у функции трассировки должны быть альтернативы для высокой точности. Вам, вероятно, придется возиться с этим, но это становится намного проще, когда вам нужно сосредоточиться только на одном элементе за раз (т.е. на цветном, а не на черно-белом).

Может ли Inkscape сделать это достаточно хорошо?

Да, хотя это зависит от вида искусства, конечно.

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

Инструмент автоматической трассировки в значительной степени просто устанавливает переменные и нажимает кнопку. Так что ничего сложного, но может потребоваться немного проб и ошибок.

Есть ли у вас какие-либо общие предложения по этому поводу или какие-либо URL-адреса, которые можно порекомендовать. (Моя главная цель — верность исходному изображению).

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

В этот момент вам нужно сравнить размер файла SVG с сопоставимым JPG.

Одним из основных преимуществ SVG на планшетах является то, что они основаны на векторах и не привязаны к конкретному разрешению экрана. Итак, не забудьте сравнить JPG с качеством на экране сетчатки с SVG, чтобы сравнение было честным.

ОБНОВИТЬ:

Я только что увидел, что вы разместили образцы изображений. Я бы сказал, что здесь есть два стиля. Один из них — штриховой рисунок (граница, декоративная рамка и т. д.), а затем — иллюстрации с непрерывной тональностью внутри.

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

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