Serge Vakulenko (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
vak) wrote2025-10-04 04:07 pm
vak) wrote2025-10-04 04:07 pm
Entry tags:
Создаём векторные рисунки из растровых
Как был сделан козак в формате SVG? Расскажу по пунктам. Этим методом можно векторизовать любое (почти) растровое изображение. Из инструментов понадобятся magick, potrace и Python с пакетом svgutils.
1. Берем растровую картинку, которую будем векторизовать. В моём случае это kozak.png. Желательно чтобы картинка была в мультяшном стиле, то есть нарисована небольшим количеством цветов. Такой стиль ещё называют комиксным, или манга.
2. Определяем количество различных цветов в картинке. У козака четыре цвета: чёрный, белый, красный (шаровары) и бежевый (лицо, руки).
3. Упрощаем картинку, уменьшая количество цветов до 4 и убирая шум отдельных пикселей. Смотрим, какие цвета получились.
1. Берем растровую картинку, которую будем векторизовать. В моём случае это kozak.png. Желательно чтобы картинка была в мультяшном стиле, то есть нарисована небольшим количеством цветов. Такой стиль ещё называют комиксным, или манга.
2. Определяем количество различных цветов в картинке. У козака четыре цвета: чёрный, белый, красный (шаровары) и бежевый (лицо, руки).
3. Упрощаем картинку, уменьшая количество цветов до 4 и убирая шум отдельных пикселей. Смотрим, какие цвета получились.
4. Зная точные значения цветов, разделяем цветную картинку на три чёрно-белые: каждый цвет отдельно. Фоновым делаем белый цвет.$ magick kozak.png -despeckle -colors 4 simple.png
$ magick simple.png -format %c histogram:info: | sort -n -r
1178809: (254,254,254) #FEFEFE srgb(254,254,254)
179431: (6,5,5) #060505 srgb(6,5,5)
117463: (214,91,69) #D65B45 srgb(214,91,69)
97161: (224,192,156) #E0C09C srgb(224,192,156)
5. Векторизуем каждый из слоёв в отдельный SVG file, восстанавливая цвета близко к исходным.white="#FEFEFE"
black="#060505"
red="#D65B45"
beige="#E0C09C"
magick simple.png -fill black -opaque $black \
-fill white -opaque $white \
-fill white -opaque $beige \
-fill white -opaque $red black-layer.pbm
magick simple.png -fill black -opaque $red \
-fill white -opaque $white \
-fill white -opaque $black \
-fill white -opaque $beige red-layer.pbm
magick simple.png -fill black -opaque $beige \
-fill white -opaque $white \
-fill white -opaque $black \
-fill white -opaque $red beige-layer.pbm
6. Объединяем слои в одну картинку. Задействуем Питон и пакет svgutils.potrace black-layer.pbm -s --turdsize 15 -o black-layer.svg
potrace beige-layer.pbm -s --turdsize 15 --color "#EFAC78" -o beige-layer.svg
potrace red-layer.pbm -s --turdsize 15 --color "#C21919" -o red-layer.svg
Результат можно видеть здесь: kozak.svg. Все скрипты собраны в кучу на Гитхабе: sergev/vak-opensource/tree/master/utilities/vectorize.from svgutils.compose import *
from svgutils.transform import fromfile
width, height = fromfile('black-layer.svg').get_size()
Figure(width, height, # Canvas size
SVG('beige-layer.svg'), # Bottom layer
SVG('red-layer.svg'), # Middle layer
SVG('black-layer.svg'), # Top layer
).save("kozak.svg")
