studio - svg android 2

¿Cuáles son las mejores prácticas para usar íconos SVG en Android?

Question

Estoy a punto de crear mi primera aplicación nativa para Android (por lo tanto, no basada en el navegador) y buscar algunas buenas prácticas con respecto a la creación / aprovisionamiento de iconos. Como debería soportar múltiples dispositivos / resoluciones, pensé que era mejor usar SVG para crearlos. Hay al menos esta lib: http://code.google.com/p/svg-android/ que promete ofrecer soporte para SVG en Android.

Hasta el momento, no he encontrado recursos que describan el uso de esta u otra biblioteca como medio para renderizar Iconos SVG en el dispositivo, por lo que soy un poco reacio a usarlo. Lo mejor que he visto hasta ahora es utilizar SVG como el formato fuente para preprocesar los iconos basados ​​en png en diferentes resoluciones.

Así que mis preguntas son: ¿Son los iconos SVG una buena opción para usar directamente en el dispositivo sin un paso previo a la representación PNG (no funciona en absoluto) y, si, por qué nadie parece utilizar este enfoque?

Answer 1

¡Buenas noticias para todos! ¡Desde la biblioteca de soporte de Android 23.2 podemos usar svg-s hasta el nivel 7 de la API !

Si quiere ser compatible al revés solo hasta que Lollipop (API 21) marque la respuesta de Mark Whitaker , pero si quiere ir más abajo, necesita agregar estas líneas a su build.gradle:

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

También tenga en cuenta que:

• en lugar de android:src necesita usar la app:srcCompat atributo app:srcCompat en ImageViews.
• no puede usar svg-s en StateListDrawables u otros objetos extraíbles de XML, en su lugar, créelos mediante programación.
• no puede usar el atributo android:background o la función View.setBackgroundResource() , use View.setBackground() lugar.
• no puedes usar svg-s en caso de Notificaciones.

Answer 2

Acabo de publicar un script para generar todos los iconos de la plataforma para aplicaciones PhoneGap que pueden ser de valor. Sin embargo, para agregar código para generar pantallas.

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

Answer 3

Biblioteca de soporte de Android 23.2 Soporta dibujos vectoriales y dibujos animados vectoriales

1. agregue vectorDrawables.useSupportLibrary = true a su archivo build.gradle.
2. Utilice la app:srcCompat="@drawable/ic_add" lugar de android:src="..." o setImageResource() para su ImageView

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

Answer 4

Como la respuesta de Nacho-Coloma me ayudó, tomé su excelente guión y lo hice un poco más fácil de usar a diario.

Primero:

1. Cree el directorio drawable-svg lado de su directorio res .
2. Coloque sus archivos svg y este script en drawable-svg .
3. Hacer el script ejecutable.
4. Ejecutarlo. En Ubuntu, simplemente puede hacer doble clic en Nautilus y hacer que se ejecute en una terminal.

Y más tarde cuando obtienes nuevos archivos svg:

5. Coloque nuevos archivos svg en drawable-svg y ejecute el script nuevamente.

De forma predeterminada, hará lo que desee: Escale cada archivo svg en archivos png y colóquelos en ../res/drawable-mdpi , ../res/drawable-hdpi , etc.

El script toma dos parámetros:

1. El patrón del archivo svg a escala, por defecto: *.svg
2. El directorio base para put, default ../res/ (es decir, su directorio res con la configuración mencionada anteriormente).

Puede experimentar escalando una sola svg en pngs en el directorio actual de esta manera:

$ ./svg2png test.svg .

O simplemente procesa todas las imágenes:

$ ./svg2png

Supongo que podrías colocar el drawable-svg dentro del directorio de res, pero no he visto lo que queda envuelto en el APK final. Además, mis archivos svg tienen - en sus nombres, lo que no le gusta a Android, y mi script se encarga de cambiar el nombre de los archivos png a algo válido en Android.

Estoy usando ImageMagick para la conversión que es un poco más estándar que Inkscape (aunque me gustó el enfoque). Ambos métodos están incluidos en el script para referencia.

Aquí está el guión:

#!/bin/bash

scalesvg ()
{
    svgfile="$1"
    pngdir="$2"
    pngscale="$3"
    qualifier="$4"

    svgwidthxheight=$(identify "$svgfile" | cut -d '' '' -f 3)
    svgwidth=${svgwidthxheight%x*}
    svgheight=${svgwidthxheight#*x}

    pngfile="$(basename $svgfile)" # Strip path.
    pngfile="${pngfile/.svg/.png}" # Replace extension.
    pngfile="${pngfile/[^A-Za-z0-9._]/_}" # Replace invalid characters.
    pngfile="$pngdir/$qualifier/$pngfile" # Prepend output path.

    if [ ! -d $(dirname "$pngfile") ]; then
        echo "WARNING: Output directory does not exist: $(dirname "$pngfile")"
        #echo "Exiting"
        #exit 1
        echo "Outputting here instead: $pngfile"
        pngfile="$qualifier-${svgfile/.svg/.png}"
    fi

    pngwidth=$(echo "scale=0; $svgwidth*$pngscale" | bc -l)
    pngheight=$(echo "scale=0; $svgheight*$pngscale" | bc -l)
    pngdensity=$(echo "scale=0; 72*$pngscale" | bc -l) # 72 is default, 

    echo "$svgfile ${svgwidth}×${svgheight}px -> $pngfile ${pngwidth}×${pngheight}px @ $pngdensity dpi"

    convert -background transparent -density $pngdensity "$svgfile" "$pngfile"
    #inkscape -w${pngwidth} --export-background-opacity=0 --export-png="$pngfile" "$svgfile" > /dev/null
    #convert "$svgfile" -background transparent -scale ${pngwidth}x${pngheight} "$pngfile"
}



svgfiles="$1"
svgfiles="${svgfiles:=*.svg}" # Default to input all *.svg in current dir.

pngdir="$2"
pngdir="${pngdir:=../res}" # Default to place output pngs to ../res, ie. ../res/drawable-hdpi etc.

for svgfile in $svgfiles; do
    echo "Scaling $svgfile ..."
    scalesvg "$svgfile" "$pngdir" 0.75 drawable-ldpi
    scalesvg "$svgfile" "$pngdir" 1    drawable-mdpi
    scalesvg "$svgfile" "$pngdir" 1.5  drawable-hdpi
    scalesvg "$svgfile" "$pngdir" 2    drawable-xhdpi
    scalesvg "$svgfile" "$pngdir" 3    drawable-xxhdpi
    scalesvg "$svgfile" "$pngdir" 4    drawable-xxxhdpi
done

echo -n "Done."
read # I''ve made it wait for Enter -- convenient when run from Nautilus.

Answer 5

Desde Lollipop (API 21) en adelante, Android define la clase VectorDrawable , para definir VectorDrawable basados ​​en gráficos vectoriales. Android Studio 1.4 agrega el "Vector Asset Studio" para que sea más fácil trabajar con ellos, incluida una función de importación SVG y un nuevo complemento Gradle que genera las versiones PNG de los iconos VectorDrawable en el momento de compilación para API 20 y anteriores. También hay una herramienta de terceros para convertir SVG a VectorDrawables . Tenga en cuenta que, aunque los vectores arrastrables se pueden definir en XML, el formato de archivo no es SVG y no todos los archivos SVG se pueden convertir con éxito. Gráficos simples como iconos deberían funcionar bien.

Si aún necesita generar PNG usted mismo, deberá generar sus iconos en varias resoluciones . Para facilitar la generación de esos PNG, diseño íconos como SVG y luego los exporto a varios tamaños usando Inkscape que es gratuito y multiplataforma. Tiene algunas características interesantes para diseñar íconos, incluida la vista previa de íconos (ver más abajo), y genera buenos PNG nítidos.

Answer 6

Los iconos de SVG no son una buena opción para usar directamente en un dispositivo si necesitan escalarse en muchos tamaños diferentes, lo cual es por lo general por lo que querría usar el formato vectorial en primer lugar. Un ícono grande nunca se reducirá con elegancia porque, bueno, las pantallas de la computadora están hechas de píxeles. Entonces, las líneas de la imagen vectorial pueden alinearse "entre píxeles", creando un borde borroso. Además, los iconos grandes necesitan más detalles que los iconos pequeños, que necesitan muy pocos detalles. Un ícono detallado no se ve bien en un tamaño muy pequeño, y un ícono simple no se ve bien cuando se escala en un tamaño muy grande. Hace poco leí un artículo excelente sobre este tema realizado por un diseñador de UI profesional: sobre esos iconos de vectores .

Answer 7

Nunca tuve mucha suerte ejecutando scripts de shell de Linux en Cygwin en Windows. Así que aquí hay un archivo por lotes que hace lo que hace el script bash de Nacho Coloma. Una pequeña diferencia es que este archivo de proceso por lotes requiere tanto un nombre de archivo de entrada como de salida, como en "svg2png -w24 input.svg output.png".

Configure una carpeta "svg" en el src / directorio principal de su proyecto y copie sus archivos SVG y este archivo por lotes a esa carpeta, según las instrucciones de Stephan. Ejecute el archivo por lotes desde la carpeta svg. Si tiene Windows de 32 bits, es probable que necesite cambiar la ruta de acceso a Inkscape para usar "Archivos de programa (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

Answer 8

Otra opción es convertir sus activos SVG en tipo de fuente TTF. Incluya la fuente en su aplicación y úselo de esa manera. Esto hace el truco para formas simples monocromáticas.

Hay varias herramientas de conversión gratuitas.

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

Answer 9

Para Android anterior a Lollipop, su mejor práctica para SVG en Android será usar una herramienta para convertir su SVG a PNG en el tamaño (s) que le interese. El soporte SVG existente para Android no es exhaustivo de lo que Es probable que se encuentre en un archivo SVG, e incluso si lo fuera, el soporte no está integrado en el sistema operativo, por lo que su uso directo para los iconos está definitivamente fuera.

Comenzando con Lollipop (API 21) vea ¿Cuáles son las mejores prácticas para usar iconos SVG en Android? . Gracias a @MarkWhitaker @AustynMahoney por señalar esto.

Answer 10

Recién comencé a usar Victor , una biblioteca de código abierto de Trello, para convertir archivos SVG a archivos PNG de las diversas resoluciones requeridas durante el tiempo de compilación.

PROS

• No tendrá que ejecutar un script o herramienta para crear varios archivos PNG cada vez que cambie o agregue un ícono. (Debe presionar Rebuild en Android Studio cuando haya agregado un nuevo archivo svg o haya cambiado el nombre a uno existente)
• No hay PNG en su fuente, por lo que hay menos desorden.

CONTRAS

• El único inconveniente que he visto hasta ahora es que Android Studio todavía no reconoce los recursos generados en XML, por lo que recibirá algunas advertencias rojas en sus archivos XML y no tendrá la función de autocompletar para sus herramientas basadas en SVG. No obstante, funciona bien, y este problema debería solucionarse en una futura versión de Android Studio.

Si usa SVG generado por http://materialdesignicons.com/ asegúrese de descargar todo el archivo, o copie desde la pestaña ''Archivo SVG'' cuando elija ''Ver SVG''

Answer 11

svg es impresionante. quien quiere usar svg:

haga clic derecho en "nuevo / Vector activo" seleccionable "icono de material" para los iconos predeterminados y "archivo SVG locale" para su archivo en el disco duro de su computadora y en el nombre de "nombre de recurso" para archivo svg luego haga clic en el botón "siguiente" y acaba"

y puedes usar eso en drawable. fillcolor debe ser un código difícil.

ejemplo simple

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>

Answer 12

Esto es lo que estamos usando para transformar un archivo SVG en múltiples resoluciones. Por ejemplo, para generar el icono de inicio: 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 $2 ] && echo -e "ERROR: filename and one dimension (-w or -h) is required, for example:/nsvg2png -w48 icon.svg/n" && exit 1;
FILENAME=$2
DEST_FILENAME=`echo $2 | sed s//.svg//.png/`
FLAG=`echo $1 | cut -c1-2`
ORIGINAL_VALUE=`echo $1 | 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*$1" | bc -l)
  CMD="inkscape $FLAG$VALUE --export-background-opacity=0 --export-png=src/main/res/$2/$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