Cómo agregar gráficos vectoriales de varias densidades

Android Studio incluye una herramienta llamada Vector Asset Studio que te ayuda a agregar íconos de Material y a importar archivos de gráficos vectoriales redimensionables (SVG) y de Adobe Photoshop Document (PSD) a tu proyecto como recursos de elementos de diseño vectoriales. El uso de elementos de diseño vectoriales en lugar de mapas de bits reduce el tamaño de tu APK porque se puede cambiar el tamaño del mismo archivo para diferentes densidades de pantalla sin perder la calidad de la imagen. Para versiones anteriores de Android que no admiten elementos de diseño vectoriales, Vector Asset Studio puede, durante el tiempo de compilación, convertir tus elementos de diseño vectoriales en diferentes tamaños de mapa de bits para cada densidad de pantalla.

Acerca de Vector Asset Studio

Vector Asset Studio agrega un gráfico vectorial al proyecto como un archivo XML que describe la imagen. Mantener un archivo XML puede ser más sencillo que actualizar varios gráficos de trama en distintas resoluciones.

Para usar elementos de diseño vectoriales con Jetpack Compose, debes establecer el nivel de API mínimo en Android 5.0 (nivel de API 21) y versiones posteriores.

Android 4.4 (nivel de API 20) y las versiones anteriores no admiten elementos de diseño vectoriales. Si tu nivel mínimo de API se fija en uno de estos valores, tienes dos opciones al usar Vector Asset Studio: generar archivos de Portable Network Graphic (PNG) (predeterminada) o usar la técnica de compatibilidad con versiones anteriores en AndroidX.

Para ofrecer compatibilidad con versiones anteriores, Vector Asset Studio genera imágenes de trama del elemento de diseño vectorial. Los elementos de diseño de trama y vectoriales se empaquetan juntos en el APK. Puedes hacer referencia a los elementos de diseño vectoriales como Drawable en código Kotlin o @drawable en código XML; cuando se ejecuta tu app, se muestra automáticamente la imagen de trama o vectorial correspondiente según el nivel de API.

Si deseas usar solo los elementos de diseño vectoriales, puedes utilizar AndroidX 1.0.0 o versiones posteriores. Esta técnica requiere un cambio en tu archivo build.gradle antes de ejecutar Vector Asset Studio, como se describe en AndroidX. La clase VectorDrawableCompat en AndroidX te permite admitir VectorDrawable en Android 2.1 (nivel de API 7) y versiones posteriores.

Tipos de gráficos vectoriales compatibles

La especificación de Material Design de Google proporciona íconos de Material que puedes usar en tus apps para Android. Vector Asset Studio te ayuda a elegir, importar y determinar el tamaño de los íconos de Material, así como también a definir la opacidad y la configuración de la orientación de derecha a izquierda (RTL).

Asimismo, Vector Asset Studio te permite importar tus propios archivos SVG y PSD. SVG es un estándar abierto basado en XML del World Wide Web Consortium (W3C). El formato de archivo PSD admite las funciones de Adobe Photoshop. Vector Asset Studio admite los estándares esenciales, pero no todas las funciones de SVG y PSD. Cuando especificas un archivo SVG o PSD, Vector Asset Studio ofrece comentarios inmediatos sobre si el código de gráficos es compatible o no. Convierte el archivo en un archivo en formato XML que contiene el código VectorDrawable. Si recibes errores, debes verificar que tu elemento de diseño vectorial tenga la apariencia que esperas. Para obtener más información sobre las funciones de PSD permitidas, consulta Compatibilidad y restricciones de archivos PSD.

Para Android 5.0 (nivel de API 21) y versiones posteriores, puedes usar la clase AnimatedVectorDrawable para animar las propiedades de la clase VectorDrawable. Con AndroidX, puedes usar la clase AnimatedVectorDrawableCompat para animar la clase VectorDrawable en Android 3.0 (nivel de API 11) y versiones posteriores. Para obtener más información, consulta Imágenes vectoriales animadas en Compose.

Consideraciones para archivos SVG y PSD

Un elemento de diseño vectorial es apropiado para íconos simples. Los íconos de Material proporcionan buenos ejemplos de los tipos de imágenes que funcionan bien como elementos de diseño vectoriales en una app. Por el contrario, muchos íconos de inicio de apps tienen grandes cantidades de detalles, de modo que funcionan mejor como imágenes de trama.

La carga inicial de un elemento de diseño vectorial puede requerir más ciclos de CPU que la imagen de trama correspondiente. Luego, el uso de memoria y el rendimiento son similares entre ambos. Te recomendamos limitar una imagen vectorial a un máximo de 200 × 200 dp; de lo contrario, el diseño puede llevar mucho tiempo.

Aunque los elementos de diseño vectoriales admiten uno o más colores, en muchos casos, conviene dar color negro a los íconos (android:fillColor="#FF000000"). Con este enfoque, puedes agregar un tono al elemento de diseño vectorial que colocaste en un diseño, y el color del ícono cambiará al del tono. Si el color del ícono no es negro, puede combinarse con el color del tono.

Soluciones de retrocompatibilidad con elementos de diseño vectoriales

En la siguiente tabla, se resumen las dos técnicas que puedes usar para brindar retrocompatibilidad:

El uso de elementos de diseño vectoriales puede generar un APK más pequeño, pero la carga inicial de los elementos de diseño vectoriales puede llevar más tiempo.

Generación de imágenes PNG

Android 5.0 (nivel de API 21) y las versiones posteriores proporcionan compatibilidad con elementos de diseño vectoriales. Si tu app tiene un nivel mínimo de API inferior, Vector Asset Studio agrega el archivo de elemento de diseño vectorial a tu proyecto. Además, durante el tiempo de compilación, Gradle crea imágenes de trama PNG con varias resoluciones. Gradle genera las densidades de PNG especificadas por la propiedad generatedDensities del lenguaje específico de dominio (DSL) en un archivo build.gradle.

Para Android 5.0 (nivel de API 21) y versiones posteriores, Vector Asset Studio admite todos los elementos VectorDrawable. Para ofrecer retrocompatibilidad con Android 4.4 (nivel de API 20) y versiones anteriores, Vector Asset Studio admite los siguientes elementos XML:

Puedes cambiar el código XML que genera Vector Asset Studio, aunque no recomendamos hacerlo. El cambio de valores en el código no debería causar problemas mientras estos sean válidos y estáticos. Si deseas agregar elementos XML, debes asegurarte de que sean compatibles según tu nivel mínimo de API.

AndroidX

Esta técnica exige AndroidX 1.0 o versiones posteriores y el complemento de Android para Gradle 3.2 o versiones posteriores, y usa solo elementos de diseño vectoriales. La clase VectorDrawableCompat en AndroidX te permite admitir VectorDrawable en Android 2.1 (nivel de API 7) y versiones posteriores.

Antes de usar Vector Asset Studio, debes agregar una declaración a tu archivo build.gradle:

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("androidx.appcompat:appcompat:1.7.1")
}

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'androidx.appcompat:appcompat:1.7.1'
}

Cómo ejecutar Vector Asset Studio

Para iniciar Vector Asset Studio:

1. En Android Studio, abre un proyecto de app de Android.

2. En la ventana Project, selecciona la vista de Android.

3. Haz clic con el botón derecho en la carpeta res y selecciona New > Vector Asset.

   Algunas otras vistas de proyecto y carpetas también cuentan con este elemento de menú.

   Aparecerá Vector Asset Studio.

   

   Figura 1: Vector Asset Studio

4. Si en su lugar aparece el diálogo Need Newer Android Plugin for Gradle, corrige tu versión de Gradle de la siguiente manera:

   1. Selecciona File > Project Structure.

   2. En el diálogo Project Structure, selecciona Project.

   3. En el campo Android Plugin Version, cambia la versión del complemento de Android para Gradle a 1.5.0 o una versión posterior y haz clic en OK.

      Gradle sincronizará el proyecto.

   4. En la vista de Android de la ventana Project, haz clic con el botón derecho en la carpeta res y selecciona New > Vector Asset.

      Aparecerá Vector Asset Studio.

5. Continúa con la importación de un gráfico vectorial.

Cómo importar un gráfico vectorial

Vector Asset Studio te ayuda a importar un archivo de gráficos vectoriales al proyecto de tu app. Realiza uno de los siguientes procedimientos:

• Cómo agregar un ícono de Material
• Importa un archivo SVG o PSD

Cómo agregar un ícono de Material

Después de abrir Vector Asset Studio, puedes agregar un ícono de Material de la siguiente manera:

1. En Vector Asset Studio, selecciona Clip art.

2. En el campo Clip art, haz clic en el botón.

3. Aparecerá el diálogo Select Icon. Para filtrar qué íconos estarán visibles, selecciona una categoría de ícono del menú o escribe en el campo de búsqueda como se muestra en la figura 2.

   

   Figura 2. Filtrado de íconos de Material en Vector Asset Studio

   Selecciona un ícono de Material y haz clic en OK. El ícono aparecerá en la vista previa del elemento de diseño vectorial.

4. De forma opcional, puedes cambiar la configuración de nombre, tamaño, opacidad y orientación de derecha a izquierda (RTL) del recurso:

   • Name: Escribe un nombre nuevo si no deseas usar el predeterminado. Vector Asset Studio crea automáticamente un nombre único (agrega un número al final del nombre) si ya existe ese nombre de recurso en el proyecto. El nombre solo puede contener caracteres en minúscula, guiones bajos y números.

   • Override: Selecciona esta opción si deseas ajustar el tamaño de la imagen. Cuando escribas un tamaño nuevo, el cambio aparecerá en el área de vista previa.

     El valor predeterminado es 24 × 24 dp, que se define en la especificación de Material Design. Anula la selección de la casilla de verificación para volver al valor predeterminado.

   • Opacity: Usa el control deslizante para ajustar la opacidad de la imagen. El cambio aparecerá en el área de vista previa.

   • Enable auto mirroring for RTL layout: Selecciona esta opción si deseas mostrar una imagen con otra orientación cuando el diseño sea de derecha a izquierda, en lugar de izquierda a derecha. Por ejemplo, algunos idiomas se leen de derecha a izquierda; si tienes un ícono de flecha, tal vez desees mostrar una imagen con otra orientación en ese caso. Ten en cuenta que, si trabajas con un proyecto anterior, es posible que también debas agregar android:supportsRtl="true" al manifiesto de tu app. La orientación automática es compatible con Android 5.0 (nivel de API 21) y versiones posteriores, y con AndroidX.

5. Haz clic en Siguiente.

6. Como opción, puedes cambiar el módulo y el directorio de recursos:

   • Res Directory: Selecciona el conjunto de orígenes de recursos donde desees agregar el elemento de diseño vectorial; puede ser src/main/res, src/debug/res, src/release/res o un conjunto de orígenes definido por el usuario. El conjunto de orígenes principal se aplica a todas las variantes de compilación, incluso a la depuración y al lanzamiento. Los conjuntos de orígenes de depuración y lanzamiento anulan el conjunto de orígenes principal y se aplican a una versión de una compilación. El conjunto de orígenes de depuración solo se emplea para depuración. Para definir un conjunto de orígenes nuevo, selecciona File > Project Structure > App > Build Types. Por ejemplo, puedes definir un conjunto de orígenes beta y crear una versión de un ícono que incluya el texto "BETA" en la esquina inferior derecha. Para obtener más información, consulta Cómo configurar variantes de compilación.

   En el área Output Directories, se muestran el elemento de diseño vectorial y el directorio en el que aparecerá.

7. Haz clic en Finish.

   Vector Asset Studio agrega un archivo en formato XML que define el elemento de diseño vectorial al proyecto en la carpeta app/src/main/res/drawable/. Desde la vista Android de la ventana Project, podrás ver el archivo en formato XML vectorial generado en la carpeta drawable.

8. Compila el proyecto.

   Si el nivel mínimo de API corresponde a Android 4.4 (nivel de API 20) y versiones anteriores, y no habilitaste la técnica de AndroidX, Vector Asset Studio generará archivos PNG. En la vista Project Files de la ventana Project, puedes ver los archivos PNG y XML generados en la carpeta app/build/generated/res/pngs/debug/.

   No debes editar estos archivos de trama generados. En lugar de esto, debes trabajar con el archivo XML vectorial. El sistema de compilación regenera los archivos de trama automáticamente cuando es necesario, por lo que no es necesario que los mantengas.

Cómo importar un archivo SVG o PSD

Después de abrir Vector Asset Studio, puedes importar un archivo SVG o PSD de la siguiente manera:

1. En Vector Asset Studio, selecciona Local file.

   El archivo debe estar en una unidad local. Si se ubica en la red, por ejemplo, debes descargarlo primero en una unidad local.

2. Especifica un Image file haciendo clic en ….

   La imagen aparece en Vector Drawable Preview.

   Si el archivo SVG o PSD contiene funciones que no son compatibles, aparecerá un error en la parte inferior de Vector Asset Studio, como se ve en la figura 3.

   

   Figura 3. Vector Asset Studio muestra algunos errores.

   Si ves errores, debes asegurarte de que se represente de manera apropiada el elemento de diseño vectorial importado. Desplázate por la lista para ver los errores.

   Para obtener una lista de elementos compatibles, consulta Soluciones de retrocompatibilidad con elementos de diseño vectoriales. Para obtener más información sobre los archivos PSD permitidos, consulta Compatibilidad y restricciones para archivos PSD.

3. De forma opcional, puedes cambiar la configuración de nombre, tamaño, opacidad y orientación de derecha a izquierda (RTL) del recurso:

   • Name: Escribe un nombre nuevo si no deseas usar el predeterminado. Vector Asset Studio crea automáticamente un nombre único (agrega un número al final del nombre) si ya existe ese nombre de recurso en el proyecto. El nombre solo puede contener caracteres en minúscula, guiones bajos y números.

   • Override: Selecciona esta opción si deseas ajustar el tamaño de la imagen. Después de seleccionarla, el tamaño pasará a ser el de la imagen. Cada vez que se modifique el tamaño, el cambio aparecerá en el área de vista previa. El valor predeterminado es 24 × 24 dp, que se define en la especificación de Material Design.

   • Opacity: Usa el control deslizante para ajustar la opacidad de la imagen. El cambio aparecerá en el área de vista previa.

   • Enable auto mirroring for RTL layout: Selecciona esta opción si deseas mostrar una imagen con otra orientación cuando el diseño sea de derecha a izquierda, en lugar de izquierda a derecha. Por ejemplo, algunos idiomas se leen de derecha a izquierda; si tienes un ícono de flecha, tal vez desees mostrar una imagen con otra orientación en ese caso. Ten en cuenta que, si trabajas con un proyecto anterior, es posible que debas agregar android:supportsRtl="true" al manifiesto de tu app. La orientación automática es compatible con Android 5.0 (nivel de API 21) y versiones posteriores, y con AndroidX.

4. Haz clic en Siguiente.

5. Como opción, puedes cambiar el directorio de recursos:

   • Res Directory: Selecciona el conjunto de orígenes de recursos donde desees agregar el elemento de diseño vectorial; puede ser src/main/res, src/debug/res, src/release/res o un conjunto de orígenes definido por el usuario. El conjunto de orígenes principal se aplica a todas las variantes de compilación, incluso a la depuración y al lanzamiento. Los conjuntos de orígenes de depuración y lanzamiento anulan el conjunto de orígenes principal y se aplican a una versión de una compilación. El conjunto de orígenes de depuración solo se emplea para depuración. Para definir un conjunto de orígenes nuevo, selecciona File > Project Structure > app > Build Types. Por ejemplo, puedes definir un conjunto de orígenes beta y crear una versión de un ícono que incluya el texto "BETA" en la esquina inferior derecha. Para obtener más información, consulta Cómo configurar variantes de compilación.

   En el área Output Directories, se muestran el elemento de diseño vectorial y el directorio en el que aparecerá.

6. Haz clic en Finish.

   Vector Asset Studio agrega un archivo en formato XML que define el elemento de diseño vectorial al proyecto en la carpeta app/src/main/res/drawable/. Desde la vista Android de la ventana Project, podrás ver el archivo en formato XML vectorial generado en la carpeta drawable.

7. Compila el proyecto.

   Si el nivel mínimo de API corresponde a Android 4.4 (nivel de API 20) y versiones anteriores, y no habilitaste la técnica de AndroidX, Vector Asset Studio generará archivos PNG. En la vista Project Files de la ventana Project, puedes ver los archivos PNG y XML generados en la carpeta app/build/generated/res/pngs/debug/.

   No debes editar estos archivos de trama generados. En lugar de esto, debes trabajar con el archivo XML vectorial. El sistema de compilación regenera los archivos de trama automáticamente cuando es necesario, por lo que no es necesario que los mantengas.

Cómo hacer referencia a un activo vectorial en Jetpack Compose

Después de usar Vector Asset Studio para agregar un recurso a tu carpeta res/drawable, puedes hacer referencia a él en tu código.

En Jetpack Compose, la forma más común de mostrar tu vector es usar el elemento componible Icon o Image.

El elemento componible Icon es la forma estándar de mostrar recursos pequeños y monocromáticos. Proporciona compatibilidad integrada con los principios de Material Design, como la aplicación de tintes dinámicos basados en temas de Material 3 y la accesibilidad automática a través de descripciones de contenido.

Usa la API de painterResource para proporcionar recursos vectoriales XML al elemento componible:

Icon(
    painter = painterResource(id = R.drawable.ic_speedometer),
    tint = MaterialTheme.colorScheme.primary, // Applies dynamic theme color
    contentDescription = "Current Speed", // Essential for accessibility
)

Para vectores complejos y multicolores, usa el elemento Image componible:

Image(
     painter = painterResource(id = R.drawable.ic_complex_vector),
     contentDescription = null // Decorative element
)

Para otros casos complejos, como personalizar una imagen o optimizar el rendimiento, consulta Cómo trabajar con imágenes. Para animar vectores, consulta Imágenes vectoriales animadas en Compose.

Cómo modificar el código XML generado por Vector Asset Studio

Puedes modificar el código XML del elemento de diseño vectorial, pero no los PNG ni el código XML correspondiente generado durante el tiempo de compilación. Sin embargo, no lo recomendamos.

Cuando se usa la técnica de generación de PNG, Vector Asset Studio verifica que coincidan el elemento de diseño vectorial y los PNG, y que el manifiesto contenga el código correspondiente. Si agregas un código que no es compatible con Android 4.4 (nivel de API 20) y versiones anteriores, tus imágenes vectoriales y PNG pueden diferir. También debes asegurarte de que el manifiesto contenga el código para admitir tus cambios.

Para modificar el archivo en formato XML vectorial cuando no uses la técnica de AndroidX, haz lo siguiente:

1. En la ventana Project, haz doble clic en el archivo en formato XML vectorial generado en la carpeta drawable.

   El archivo XML aparecerá en el editor y en la ventana Preview.

   

   Figura 4. Se muestra un archivo en formato XML vectorial en el editor de código y en la ventana de vista previa.

2. Edita el código XML según lo que admita el nivel mínimo de API:

   • Android 5.0 (nivel de API 21) y versiones posteriores: Vector Asset Studio admite todos los elementos Drawable y VectorDrawable. Puedes agregar elementos XML y cambiar valores. En el caso de Jetpack Compose, puedes cargar el elemento de diseño vectorial en ImageVector para personalizarlo aún más.

   • Android 4.4 (nivel de API 20) y versiones anteriores: Vector Asset Studio admite todos los elementos Drawable y un subconjunto de los elementos VectorDrawable. Consulta Soluciones de retrocompatibilidad con elementos de diseño vectoriales para ver una lista. Puedes cambiar valores en el código generado y agregar elementos XML que sean compatibles.

3. Compila el proyecto y comprueba que el elemento de diseño vectorial y las imágenes de trama correspondientes tengan el mismo aspecto.

   Recuerda que los PNG generados se podrían mostrar de manera diferente en la ventana Preview respecto de la app debido a los diferentes motores de renderización y a los cambios realizados en el elemento de diseño vectorial antes de una compilación. Si agregas código al archivo en formato XML vectorial creado por Vector Asset Studio, las funciones que no sean compatibles con Android 4.4 (nivel de API 20) o versiones anteriores no aparecerán en los archivos PNG generados. Como resultado, cuando agregas un código, siempre debes comprobar que los PNG generados coincidan con el elemento de diseño vectorial. Para ello, puedes hacer doble clic en el PNG en la vista Project Files de la ventana Project. En el margen izquierdo del editor de código, también se muestra la imagen PNG cuando tu código hace referencia al elemento de diseño, como se puede ver en la figura 5.

   

   Figura 5. Se muestra una imagen PNG en el margen izquierdo del editor de código.

Cómo borrar un elemento de diseño vectorial de un proyecto

Para quitar un elemento de diseño vectorial de un proyecto, haz lo siguiente:

1. En la ventana Project, borra el archivo en formato XML vectorial generado seleccionando el archivo y presionando la tecla Delete (o selecciona Edit > Delete).

   Aparecerá el diálogo Safe Delete.

2. Si lo deseas, puedes seleccionar opciones para determinar el área de tu proyecto en la que se usa el archivo y hacer clic en OK.

   Android Studio borrará el archivo del proyecto y de la unidad. Sin embargo, si decides buscar las áreas del proyecto en las que se use el archivo y se detecten algunos usos, puedes verlas y decidir si deseas borrarlo.

3. Selecciona Build > Clean Project.

   Se borrará del proyecto y la unidad cualquier archivo en formatos XML y PNG generado automáticamente que corresponda al elemento de diseño vectorial borrado.

Cómo publicar una app que contenga elementos de diseño vectoriales

Si usaste la técnica de AndroidX, o si tu nivel de API mínimo corresponde a Android 5.0 (nivel de API 21) o una versión posterior, tu APK contendrá los elementos de diseño vectoriales que agregaste con Vector Asset Studio. Estos APK serán más pequeños que cuando se convierten las imágenes vectoriales en PNG.

Si el nivel mínimo de tu API incluye Android 4.4 (nivel de API 20) o una versión anterior, y tienes los elementos de diseño vectoriales y las imágenes de trama correspondientes en tu proyecto, podrás proporcionar tus archivos APK de dos formas:

• Crea un APK que incluya los elementos de diseño vectoriales y las representaciones de trama correspondientes. Esta solución es la más fácil de implementar.
• Crea APK por separado para diferentes niveles de API. Si no incluyes las imágenes de trama correspondientes en el APK para Android 5.0 (nivel de API 21) y versiones posteriores, el tamaño del APK puede ser mucho menor. Para obtener más información, consulta Compatibilidad con varios APK.

Compatibilidad y restricciones de archivos PSD

Vector Asset Studio no admite todas las funciones de archivos PSD. En la siguiente lista, se resumen las características de PSD compatibles y no compatibles, así como algunos detalles de conversión.

Documento

Qué se admite

• Un modo de color de PSD de mapa de bits, escala de grises, indexado, RGB, lab o CMYK
• Una profundidad de color de 8, 16 o 32 bits

Detalles de conversión:

• Las dimensiones del documento PSD se convierten en las dimensiones del elemento de diseño vectorial y de la ventana de visualización.

No compatibles:

• Un modo de color de PSD bitonal o multicanal

Formas

Qué se admite

• Máscaras de recorte, si la base de recorte es otra forma
• Operaciones de forma, como la fusión o adición, la intersección, la resta y la exclusión

No compatibles:

• La regla de relleno par e impar que usan las formas de Photoshop. En Android 6.0 (nivel de API 23) y versiones anteriores, los elementos de diseño vectoriales solo admiten la regla de relleno diferente de cero. En las formas que se intersecan, esta limitación puede conducir a diferencias de renderización entre el PSD y el elemento de diseño vectorial resultante. Para corregir este problema, agrega android:fillType="evenOdd" en la forma del elemento de diseño vectorial. Por ejemplo:

  <vector xmlns:android="https://schemas.android.com/apk/res/android"
    android:viewportHeight="168"
    android:height="24dp"
    android:viewportWidth="209"
    android:width="24dp">
  
    <path
        android:fillAlpha="1.0"
        android:fillColor="#000000"
        android:fillType="evenOdd"
        android:pathData="M24,58 L24,167 L114,167 L114,66 M64,1 L64,96 L208,96 L208,8 M1,97 L146,139 L172,47"/>
  </vector>

Trazos y rellenos

Qué se admite

• Trazos, incluidos el color, la opacidad, el ancho, la unión, la restricción, los guiones y la alineación
• Rellenos y trazos de colores sólidos
• Colores de relleno y trazo especificados como RGB, Lab o CMYK

Detalles de conversión:

• Si un trazo es discontinuo, se recorta con una base de recorte o usa una alineación diferente de la central, Vector Asset Studio lo convierte en una forma de relleno en el elemento de diseño vectorial.

No compatibles:

• Rellenos y trazos de color que no sean los sólidos, como los gradientes

Opacidad

Qué se admite

• Capas de formas con valor de opacidad 0

Detalles de conversión:

• Vector Asset Studio multiplica la opacidad de relleno con la opacidad de capa para computar el alfa de relleno.
• La herramienta multiplica la opacidad de la base de recorte (si existe) con el alfa de relleno para computar el alfa de relleno final.
• La herramienta multiplica la opacidad de trazo con la opacidad de capa para computar el alfa de trazo.
• La herramienta multiplica la opacidad de la base de recorte (si existe) con el alfa de trazo para computar el alfa de trazo final.

Capas

Qué se admite

• Cualquier capa de forma visible

Detalles de conversión:

• Vector Asset Studio preserva los nombres de las capas en el archivo del elemento de diseño vectorial.

No compatibles:

• Efectos de capas
• Capas de ajustes y texto
• Modos de combinación (ignorados)

Compatibilidad y restricciones para archivos SVG

Vector Asset Studio no admite todas las funciones de archivos SVG. En la siguiente sección, se resumen las funciones compatibles y no compatibles cuando la herramienta convierte un archivo SVG a un VectorDrawable, y se brindan detalles sobre la conversión.

Funciones admitidas

VectorDrawable admite todas las funciones de Tiny SVG 1.2, excepto text.

Formas

VectorDrawable admite rutas de acceso SVG.

La herramienta convierte formas básicas como círculos, cuadrados y polígonos en trazados.

Transformaciones

La herramienta admite matrices de transformación y las aplica directamente a las rutas de acceso secundarias.

Grupos

La herramienta admite elementos de grupo para traslación, escalamiento y rotación. Los grupos no admiten una propiedad de opacidad.

La herramienta también aplica cualquier estilo de opacidad o grupo a las rutas de acceso secundarias.

Rellenos y trazos

Las rutas se pueden rellenar y trazar con colores sólidos o gradientes (lineales, radiales o angulares). Solo se admiten trazos centrados. No se admiten los modos de fusión No se admiten los trazos discontinuos.

Máscaras

La herramienta admite una máscara de recorte por grupo.

Funciones no compatibles con el importador SVG

Las funciones que no estén incluidas en la lista de la sección anterior Funciones admitidas no son compatibles. Entre las funciones no admitidas más destacadas, se incluyen las siguientes:

• Efectos de filtro: No se admiten efectos como sombras paralelas, desenfoques ni matrices de colores.
• Texto: Se recomienda la conversión de texto a formas mediante otras herramientas
• Rellenos de patrón

Recursos adicionales

Para obtener más información sobre los gráficos vectoriales, consulta los siguientes recursos adicionales:

Documentación

• Imágenes vectoriales animadas en Compose
• Cómo trabajar con imágenes

Mira contenido

• Cómo agregar gráficos vectoriales de varias densidades (vistas)