Comments 13
UFO just landed and posted this here
Проблема с количеством dpi которые нужно поддерживать. Я не знаю сколько было разных dpi на симбиане, но подозреваю что одно, поэтому и проблем не было, так как рисовалось все 1 к 1.
Даже если и добавят поддержку svg, все равно нужно будет создавать svg отдельно для каждого dpi или как минимум для кратных.
Скажем есть у вас картинка c линией, на xhdpi она будет 2px, и она так же будет нормально показана на mdpi, линия будет 1px. Но вот уже на hdpi будут проблемы, так как нужно будет отрисовать 1.5px. Обычно в этом случае рисуется отдельный свг уже с правильной линией равной 1 или 2px, в зависимости что выглядит лучше.
Другая проблема, если много деталей на картинке, то она может хорошо выглядеть на xxhdpi, но отвратительно на mdpi. То есть снова нужна отдельная картинка.
Даже в этой статье подход не правильный (только, если конечно качество приложения не важно), картинка будет мыльная на большинстве dpi, так как все картинки штампуются из одного svg.
Я обычно создаю отдедельный svg для каждого разрешения и подгоняю их в ручную, что бы не было мыла. Если сильно лень, то тогда только для кратных dpi, то есть достаточно сделать две «правильных» картинки для xxhdpi и xhdpi и уже из них нарезать. Из xxhdpi нарезаются hdpi и ldpi, а из xhdpi: mdpi
Для конвертации svg в png пробовал:
1. imagemagic — качество картинки странное,
2. inkscape — качество картинки приемлемо, но вот хотелось бы только больше опций по управлению svg, например, поменять цвет определенного объекта, будь то слой или что то другое.
3. В итоге остановился на библиотеке batik (http://xmlgraphics.apache.org/batik/) качество достаточно приемлемое. Так как эта библиотека парсит весь svg, то вы по сути можете делать что угодно, менять цвета, изменять размеры линий и тд, затем растеризовать конечный svg в png. Но этот способ требует больше времени чем все остальные.
p.s. Но да, при наличие поддержки svg уже не нужно было бы конвертировать в png.
Даже если и добавят поддержку svg, все равно нужно будет создавать svg отдельно для каждого dpi или как минимум для кратных.
Скажем есть у вас картинка c линией, на xhdpi она будет 2px, и она так же будет нормально показана на mdpi, линия будет 1px. Но вот уже на hdpi будут проблемы, так как нужно будет отрисовать 1.5px. Обычно в этом случае рисуется отдельный свг уже с правильной линией равной 1 или 2px, в зависимости что выглядит лучше.
Другая проблема, если много деталей на картинке, то она может хорошо выглядеть на xxhdpi, но отвратительно на mdpi. То есть снова нужна отдельная картинка.
Даже в этой статье подход не правильный (только, если конечно качество приложения не важно), картинка будет мыльная на большинстве dpi, так как все картинки штампуются из одного svg.
Я обычно создаю отдедельный svg для каждого разрешения и подгоняю их в ручную, что бы не было мыла. Если сильно лень, то тогда только для кратных dpi, то есть достаточно сделать две «правильных» картинки для xxhdpi и xhdpi и уже из них нарезать. Из xxhdpi нарезаются hdpi и ldpi, а из xhdpi: mdpi
Для конвертации svg в png пробовал:
1. imagemagic — качество картинки странное,
2. inkscape — качество картинки приемлемо, но вот хотелось бы только больше опций по управлению svg, например, поменять цвет определенного объекта, будь то слой или что то другое.
3. В итоге остановился на библиотеке batik (http://xmlgraphics.apache.org/batik/) качество достаточно приемлемое. Так как эта библиотека парсит весь svg, то вы по сути можете делать что угодно, менять цвета, изменять размеры линий и тд, затем растеризовать конечный svg в png. Но этот способ требует больше времени чем все остальные.
p.s. Но да, при наличие поддержки svg уже не нужно было бы конвертировать в png.
Советую посмотреть на romannurik.github.io/AndroidAssetStudio/, очень удобно. Плюс можно регулировать падинги и переопределять цвет.
Я делаю так: в фотошопе с помощью функции generator: blogs.adobe.com/photoshopdotcom/2013/09/introducing-adobe-generator-for-photoshop-cc.html
Генерирую большие картинки, обычно как 1000% image.png. Потом уже Asset studio делаю нужные мне размеры.
Я делаю так: в фотошопе с помощью функции generator: blogs.adobe.com/photoshopdotcom/2013/09/introducing-adobe-generator-for-photoshop-cc.html
Генерирую большие картинки, обычно как 1000% image.png. Потом уже Asset studio делаю нужные мне размеры.
Я тоже подобное делал, только встраивался в процесс билда: github.com/kriomant/buketan
Я сделал Makefile и добавил в него несколько правил для вызова Inkscape.
Может, кому пригодится
application_icons: res/drawable-xhdpi/ic_launcher.png res/drawable-hdpi/ic_launcher.png res/drawable-mdpi/ic_launcher.png res/drawable-ldpi/ic_launcher.png
icons: application_icons libs_icons
res/drawable-xhdpi/%.png: images/%.svg
mkdir -p res/drawable-xhdpi
inkscape -e $@ -C -w 96 -h 96 $<
res/drawable-hdpi/%.png: images/%.svg
mkdir -p res/drawable-hdpi
inkscape -e $@ -C -w 72 -h 72 $<
res/drawable-mdpi/%.png: images/%.svg
mkdir -p res/drawable-mdpi
inkscape -e $@ -C -w 48 -h 48 $<
res/drawable-ldpi/%.png: images/%.svg
mkdir -p res/drawable-ldpi
inkscape -e $@ -C -w 36 -h 36 $<
icons_clean:
rm -fv res/drawable-*dpi/ic_launcher.png
distclean: clean icons_clean libs_distclean
SPORT_ANALYSIS_DIR = ../libs/sport_analysis
libs_icons:
make -C ${SPORT_ANALYSIS_DIR} icons
А ImageMagick чем не подошёл?
И дело в шляпе. density по вкусу (в DPI).
P.S. + Makefile как уже писали выше, чтобы переконвертировались только изменившиеся картинки.
mogrify -density 300 -format png *.swgИ дело в шляпе. density по вкусу (в DPI).
P.S. + Makefile как уже писали выше, чтобы переконвертировались только изменившиеся картинки.
UFO just landed and posted this here
Поэтому и был выбран браузер в качестве средства отрисовки, все современные браузеры полностью поддерживают SVG. Я вот думаю заменить браузер обычный на PantomJS, чтобы не мелькала открывающаяся страница.
UFO just landed and posted this here
Не замечал чтобы актуальный IM что-то плохо рендерил, но чтобы не пользоваться браузером всё равно полно вариантов, самый легковесный — это CairoSVG (на Питоне). Я просто слабо представляю как такое решение будет интегрироваться со сборочным сервером, например, где графики обычно нет.
Используем rsvg-convert, входящий в состав librsvg библиотеки. librsvg была сделана для отрисовки svg в Gnome.
Утилита доступна как для linux, так и Mac OS X.
Пример:
Единственный недостаток: может генерировать немного отличающиеся png при повторных запусках.
Поэтому лучше отслеживать изменения в svg-файлах, чтобы в репозиторий не сабмитились ненужные png, практически ничем не отличающиеся.
Утилита доступна как для linux, так и Mac OS X.
Пример:
rsvg-convert --width 100 --keep-aspect-ratio --format png photo.svg > photo.png
Единственный недостаток: может генерировать немного отличающиеся png при повторных запусках.
Поэтому лучше отслеживать изменения в svg-файлах, чтобы в репозиторий не сабмитились ненужные png, практически ничем не отличающиеся.
Sign up to leave a comment.
Генерация картинок для Android приложения из SVG