Каковы рекомендации по использованию значков SVG на Android?

начиная с Lollipop (API 21), Android определяет VectorDrawable класс, для определения чертежей на основе векторной графики. Android Studio 1.4 добавляет "Vector Asset Studio" чтобы упростить их работу, включая функцию импорта SVG и новый плагин Gradle, который генерирует PNG-версии значков VectorDrawable во время сборки для API 20 и более ранних версий. Там же сторонний инструмент для преобразования SVGs в VectorDrawables. Имейте в виду, что хотя векторные чертежи могут быть определены в XML, формат файла не является SVG, и не все файлы SVG могут быть успешно преобразованы. Простая графика, такая как значки, должна работать нормально.

Если вам все еще нужно создать png самостоятельно, вам нужно будет создать свои значки при различных разрешениях. Для простоты создания этих PNGs я разрабатываю значки как SVG, а затем экспортирую их в различные размеры с помощью Inkscape, который является свободным и кросс-платформенный. Это некоторые хорошие функции для проектирования значков, в том числе просмотр значков (см. ниже), и он генерирует хорошие четкие png.

это то, что мы используем для преобразования SVG-файла в несколько разрешений. Например, чтобы создать значок запуска: svg2png -w48 icon.svg

#!/bin/bash -e
# Transforms a SVG into a PNG for each platform
# Sizes extracted from
# http://developer.android.com/design/style/iconography.html

[ -z  ] && echo -e "ERROR: filename and one dimension (-w or -h) is required, for example:\nsvg2png -w48 icon.svg\n" && exit 1;
FILENAME=
DEST_FILENAME=`echo  | sed s/\.svg/\.png/`
FLAG=`echo  | cut -c1-2`
ORIGINAL_VALUE=`echo  | cut -c3-`

if [ "$FLAG" != "-w" ] && [ "$FLAG" != "-h" ]; then
    echo "Unknown parameter: $FLAG" 
    exit 1
fi

# PARAMETERS: {multiplier} {destination folder}
function export {
  VALUE=$(echo "scale=0; $ORIGINAL_VALUE*" | bc -l)
  CMD="inkscape $FLAG$VALUE --export-background-opacity=0 --export-png=src/main/res//$DEST_FILENAME src/main/svg/$FILENAME > /dev/null"
  echo $CMD
  eval $CMD
} 

export 1 drawable-mdpi
export 1.5 drawable-hdpi
export 2 drawable-xhdpi
export 3 drawable-xxhdpi
export 4 drawable-xxxhdpi

хорошие новости для всех! С поддержкой android библиотека 23.2 мы можем использовать svg-s до возвращения к уровень API 7!

если вы хотите быть совместимы в обратном направлении только до леденец (API 21) проверьте Марк Уитакер ответ, но если вы хотите пойти ниже, вам нужно добавить эти строки в свой построить.Gradle в:

// Gradle Plugin 2.0+ (if you using older version check the library announcement link)
android {  
    defaultConfig {  
        vectorDrawables.useSupportLibrary = true  
    }  
}  

также имейте в виду, что:

• вместо android:src вы должны использовать в ImageViews.
• вы не можете использовать svg-s в StateListDrawables или других XML-чертежах, вместо этого создайте их программно.
• вы не можете использовать android:background атрибут или

С Начо-Коломаответ помог мне, я взял его отличный сценарий и сделал его немного проще в использовании на ежедневной основе.

первый:

1. создать каталог drawable-svg рядом с

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

есть несколько бесплатных инструментов преобразования.

• http://fontastic.me
• https://onlinefontconverter.com
• http://www.freefontconverter.com

Библиотека Поддержки Android 23.2 Поддержка векторных чертежей и анимированных векторных чертежей

1. добавить vectorDrawables.useSupportLibrary = true в сборку.файл gradle.
2. использовать app:srcCompat="@drawable/ic_add" вместо android:src="..." или setImageResource() для вашего ImageView

http://android-developers.blogspot.sk/2016/02/android-support-library-232.html

значки SVG не являются хорошим вариантом для использования непосредственно на устройстве, если их нужно масштабировать до разных размеров, поэтому обычно вы хотите использовать векторный формат в первую очередь. Большой значок никогда не будет уменьшаться изящно, потому что, ну, компьютерные дисплеи сделаны из пикселей. Таким образом, линии векторного изображения могут выравниваться "между пикселями", создавая размытую границу. Кроме того, большие значки требуют больше деталей, чем маленькие значки, которые требуют очень мало деталей. Подробная иконка не выглядит хорошо в очень маленьком размере, и простой значок не выглядит хорошо при масштабировании в очень большой размер. Недавно я прочитал отличную статью об этом профессиональным дизайнером пользовательского интерфейса:об этих векторных значках.

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

• https://github.com/tohagan/phonegap-graphics

Я только начал использовать Виктор, библиотека с открытым исходным кодом Trello, для преобразования SVG-файлов в PNG-файлы с различными требуемыми разрешениями во время сборки.

плюсы

• вам не придется запускать скрипт или инструмент для создания различных файлов PNG каждый раз, когда вы изменяете или добавляете значок. (Вам нужно нажать перестроить в Android Studio, когда вы добавили новый файл svg или переименовали существующий)
• нет PNG в вашем источнике, так что меньше беспорядок.

минусы

• единственным недостатком, который я видел до сих пор, является то, что Android Studio еще не распознает сгенерированные ресурсы в XML, поэтому вы получите некоторые красные предупреждения в своих XML-файлах, и у вас нет автозаполнения для ваших SVG-чертежей. Он строит нормально, хотя, и эта проблема должна быть исправлена в будущей версии Android студия.

Если вы используете SVG, созданный http://materialdesignicons.com/ обязательно либо загрузите весь файл, либо скопируйте его с вкладки "SVG File" при выборе "View SVG"

Мне никогда не удавалось запускать скрипты оболочки Linux в Cygwin на Windows. Итак, вот пакетный файл, который делает то, что делает сценарий Bash Начо Коломы. Одно небольшое различие заключается в том, что этот пакетный файл требует как входного, так и выходного имени файла, как в "svg2png-w24 input.выход СВГ.формат PNG."

установите папку " svg " в каталоге src/main вашего проекта и скопируйте файлы SVG и этот пакетный файл в эту папку в соответствии с инструкциями Стефана. Запустите пакетный файл из svg папка. Если вы находитесь на 32-разрядной Windows, то вам, вероятно, потребуется изменить путь к Inkscape, чтобы использовать "Program Files (x86)".

@echo off
echo Convert an SVG file to a PNG resource file with multiple resolutions.

rem Check the arguments
set temp=%1
set switch=%temp:~0,2%
set pixels=%temp:~2%
if not "%switch%"=="-w" (
if not "%switch%"=="-h" (
echo Error:  Invalid image width or height switch.  Use -w or -h, with target image size in dp appended.
goto :error
))
echo %pixels%| findstr /r /c:"^[1-9][0-9]*$" >nul
if errorlevel 1 (
echo Error:  Invalid numeric image size.  Image size must be a positive integer.
goto :error
)
if "%3"=="" (
echo Error:  Not enough arguments.
goto :error
)
if not "%4"=="" (
echo Error:  Too many arguments.
goto :error
)

call :export %1 %2 %3 mdpi
call :export %1 %2 %3 hdpi
call :export %1 %2 %3 xhdpi
call :export %1 %2 %3 xxhdpi
call :export %1 %2 %3 xxxhdpi
exit /b

:export
rem parameters: <width/height> <input-file> <output-file> <density>

set temp=%1
set switch=%temp:~0,2%
set pixels=%temp:~2%

if %4==mdpi set /a size=%pixels%
if %4==hdpi set /a size=%pixels%*3/2
if %4==xhdpi set /a size=%pixels%*2
if %4==xxhdpi set /a size=%pixels%*3
if %4==xxxhdpi set /a size=%pixels%*4

echo %size% pixels ../res/drawable-%4/%3
"C:\Program Files\Inkscape\inkscape.exe" %switch%%size% --export-background-opacity=0 --export-png=../res/drawable-%4/%3 %2
exit /b

:error
echo Synopsis: svg2png -w^<width-pixels^>^|-h^<height-pixels^> ^<input-file^> ^<output-file^>
echo Example:  svg2png -w24 "wifi white.svg" wifi_connect_24dp.png
exit /b

svg является удивительным. кто хочет использовать SVG:

щелкните правой кнопкой мыши на drawable "new/Vector Asset "выберите" значок материала "для значков по умолчанию и" locale SVG file "для вашего файла на жестком диске компьютера и в" имя ресурса "введите имя для файла svg, затем нажмите кнопку" Далее "и"готово"

и вы можете использовать это в мешочки. fillcolor должен быть жестким кодом.

простой пример:

navigation_toggle.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M3,18h18v-2H3v2zm0,-5h18v-2H3v2zm0,-7v2h18V6H3z"/>
</vector>