SVG en SwiftUI: añade recursos y controla su color

Para un SVG estático incluido en tu aplicación SwiftUI, coloca la ilustración en un catálogo de recursos Xcode y carga la imagen por su nombre de recurso. Decide después si conserva los colores originales o se convierte en una silueta teñida. Apple añadió recursos de imagen SVG en Xcode 12; sus notas de versión indican conservación vectorial para destinos iOS 13, iPadOS 13 y macOS 10.15 o posteriores.

Ese flujo de catálogo difiere de descargar un SVG mientras se ejecuta la aplicación. También difiere de crear un SF Symbol personalizado. Elige la vía de entrega antes de cambiar la ilustración o añadir un paquete de renderizado.

Elige la vía para esta imagen concreta

Un SVG es el archivo de origen. Cómo lo recibe y utiliza la aplicación determina el siguiente paso.

Aquí utilizamos la primera vía. Una taza pequeña de dos colores hace visibles dos errores: perder el color coral del vapor y rellenar el asa abierta. No hace falta una ilustración compleja para diagnosticarlos.

La guía de preparación de kits de interfaz cubre la coherencia de un conjunto. Aquí la pregunta es cómo llega un SVG aceptado a un Image de SwiftUI.

Prepara un original pequeño con comprobaciones visibles

Guarda este ejemplo original como CupMark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <path d="M12 26H43V45Q43 54 34 54H21Q12 54 12 45Z"
    fill="#147D73"/>
  <path d="M43 30H48Q55 30 55 37Q55 44 48 44H43"
    fill="none" stroke="#147D73" stroke-width="5"/>
  <path d="M24 19Q18 14 25 8M35 19Q29 14 36 8"
    fill="none" stroke="#EB8067" stroke-width="4" stroke-linecap="round"/>
</svg>

La taza es verde azulada, los dos trazos de vapor son coral y el interior del asa está vacío. Mantén esas tres propiedades en la revisión. El SVG no contiene texto, imagen externa, filtro ni script, por lo que es un archivo inicial compacto para experimentar con el catálogo.

Para tu ilustración, revisa el original antes de importar. Un lienzo con demasiado espacio vacío hace pequeño un icono aunque su vista tenga las dimensiones correctas. Un rectángulo blanco de fondo se convierte en parte de la silueta de plantilla. Una fotografía incrustada sigue siendo contenido distinto de los trazados que la rodean; la comprobación de ráster incrustado ayuda a distinguirlos.

Conserva el maestro editable fuera de la copia de entrega de la aplicación. Si hay letras, resuelve en el maestro la estrategia de fuente o contornos; consulta el flujo de cambios de fuente SVG. Cambiar un estilo de texto SwiftUI no sustituye a revisar las letras dentro de una imagen.

Añádelo como un conjunto normal de imágenes

Abre el catálogo de recursos, normalmente Assets.xcassets. Añade un conjunto de imágenes nuevo llamado CupMark. Arrastra el SVG al espacio de imagen adecuado. La guía de catálogos de recursos de Apple describe cómo crear conjuntos, importar recursos y proporcionar variantes mediante el inspector Attributes.

Utiliza un conjunto de imágenes en este ejemplo. No elijas un flujo de imágenes de símbolos solo porque el original termine en .svg.

Después de importar, revisa la vista previa y los diagnósticos de compilación. Confirma que el catálogo pertenezca al destino de aplicación que lo usará. Si contiene variantes de plataforma o apariencia, asegúrate de que la imagen esté en la configuración pertinente en lugar de suponer que la vista previa representa todas.

CupMark es el nombre del recurso de imagen utilizado abajo. No es una URL ni una ruta al SVG original de tu carpeta de diseño. El inicializador de Image busca un recurso por nombre en un bundle; el predeterminado es el principal. Si la imagen pertenece a otro bundle, proporciónalo deliberadamente.

Conserva la distinción entre nombre de archivo y recurso en las notas de entrega. Un compañero puede renombrar el conjunto sin cambiar el archivo original y el código debe seguir el nombre que realmente carga.

Compara renderizado original y de plantilla

Utiliza esta vista después de añadir el conjunto CupMark:

import SwiftUI
 
struct CupComparison: View {
    var body: some View {
        HStack(spacing: 24) {
            Image("CupMark")
                .renderingMode(.original)
                .resizable()
                .scaledToFit()
                .frame(width: 48, height: 48)
                .accessibilityLabel("Cup with rising steam")
 
            Image("CupMark")
                .renderingMode(.template)
                .resizable()
                .scaledToFit()
                .frame(width: 48, height: 48)
                .foregroundStyle(Color.blue)
                .accessibilityLabel("Cup with rising steam")
        }
        .padding()
    }
}

La instancia izquierda pide explícitamente renderizado original. La derecha pide plantilla y proporciona azul como estilo de primer plano. La documentación de renderizado de plantilla de Apple lo define como píxeles no transparentes que toman el color de primer plano. Es un tratamiento de silueta, no una orden de recolorear un trazado SVG concreto.

Para la taza, la versión derecha debe tener vapor y taza azules. La distinción coral/verde azulado desaparece intencionadamente. El asa debe permanecer vacía. Si necesitas cambiar el vapor independientemente de la taza, elige una estructura que exponga esas partes por separado en lugar de esperar estilos por trazado de una imagen de plantilla.

Los modificadores también hacen explícito el tamaño. resizable() permite redimensionar y scaledToFit() conserva la proporción dentro del marco de 48 puntos. El marco de vista y el lienzo de la ilustración son límites separados: el espacio vacío del SVG sigue formando parte del original.

Es un ejemplo documentado para probar en tu proyecto, no un informe de renderizado nativo probado. Comprueba la aplicación compilada, incluido el tamaño más pequeño previsto. Una vista previa clara a 48 puntos no demuestra que los dos trazos de vapor sirvan a 16.

Diagnostica el resultado visible antes de cambiar el archivo

Una imagen ausente, un color cambiado y una silueta deficiente en pequeño necesitan soluciones diferentes.

Cambia un nivel cada vez. Si el original ya tiene la abertura correcta, reconstruir el trazado no corrige un nombre mal escrito. Si la búsqueda funciona pero la plantilla elimina diferencias de color, añadir colores al SVG no cambia el modo elegido.

Para un icono junto a texto visible, revisa su nombre accesible en el contexto completo del control. El ejemplo describe cada imagen de comparación. Una repetición decorativa junto a un control ya nombrado puede necesitar otro tratamiento; no copies mecánicamente esas etiquetas en todas las ubicaciones.

Trata SVG en ejecución y SF Symbols como decisiones separadas

Una imagen nombrada del catálogo no es una API para descargar y analizar XML SVG arbitrario. Si el archivo llega después de compilar, elige un renderizador que gestione explícitamente esa entrada. Por ejemplo, el README de SVGView describe un analizador y renderizador SVG escrito en SwiftUI. Evalúa las funciones reales de tus archivos; el objetivo de amplia compatibilidad no demuestra que todo el conjunto se renderice bien.

Incluye carga, fallos y archivos no compatibles en esa función de ejecución. No añadas un paquete solo porque una respuesta antigua diga que SwiftUI no puede usar SVG si necesitas una imagen estática ya cubierta por el catálogo.

Los SF Symbols personalizados tienen otro contrato de origen. Apple documenta un flujo de creación y validación basado en plantillas, incluidas variantes y alineación. Una taza SVG normal no adquiere esas propiedades al colocarla en un conjunto de imágenes. Utiliza ese flujo si necesitas comportamiento de símbolo y conserva la estructura requerida.

Conviene revisar los formatos de plataforma independientemente. Si la misma ilustración irá a Android, sigue la guía de entrega VectorDrawable; la aceptación de un importador no demuestra la de otro.

Cuando el icono solo existe como PNG

Si falta el original editable y el PNG es sencillo, el conversor de PNG a SVG de PerfectVector puede preparar un candidato. Recorta hasta el icono, busca aberturas perdidas, detalles fusionados y fondos no deseados en la vista previa y compáralo con el original. Descarga el SVG aceptado y pruébalo con las mismas comprobaciones de conjunto y modo de renderizado.

Utiliza el vector original si existe. Conserva fotos e imágenes con muchos efectos como ráster cuando mantenga mejor su apariencia. Vectorizar prepara geometría; no compila el catálogo, ni elige el bundle ni produce una plantilla SF Symbols con las variantes necesarias.

Antes de entregar, anota nombre de catálogo, comportamiento original/plantilla, tamaño visual mínimo y archivo para regenerarlo. Prueba fondos claros y oscuros y variantes de apariencia compatibles en la aplicación. Las guías de ilustración del blog cubren la preparación anterior a esta entrega.

Preguntas frecuentes

¿SwiftUI puede utilizar SVG de un catálogo de recursos? Sí. Xcode admite recursos SVG. Añade el archivo a un conjunto normal y carga el recurso por nombre con Image. Verifica el destino de implementación y la compilación real; no lo interpretes como compatibilidad con SVG arbitrarios en ejecución.

¿Por qué mi SVG se volvió de un color? Comprueba el modo de renderizado. La plantilla utiliza la imagen visible como silueta del color de primer plano. Usa original para conservar las diferencias de color originales.

¿Image puede cargar SVG desde una URL web? El inicializador con nombre busca recursos; no es un analizador SVG por URL. Los archivos recibidos en ejecución necesitan un flujo adecuado de carga y renderizado verificado con tus entradas reales.

¿Un conjunto SVG equivale a un SF Symbol personalizado? No. Los símbolos utilizan una plantilla con estructura, variantes, alineación y validación requeridas. Un conjunto normal SVG no aporta esas propiedades automáticamente.

Fuentes

1. Apple — Notas de versión de Xcode 12 — Compatibilidad con recursos SVG y destinos documentados de conservación vectorial.
2. Apple — Gestionar recursos con catálogos — Conjuntos, espacios de importación y variantes.
3. Apple — Image init(_:bundle:) — Búsqueda por nombre y bundle.
4. Apple — Image.TemplateRenderingMode — Modos original y de plantilla.
5. Apple — resizable(capInsets:resizingMode:) — Comportamiento explícito de redimensionado.
6. Apple — scaledToFit() — Ajuste conservando proporción.
7. Apple — Crear imágenes de símbolos personalizados — Plantillas, variantes y validación de símbolos.
8. Exyte — SVGView — Solución independiente de análisis y renderizado SVG para SwiftUI.

Comprueba un icono al tamaño y modo de color previstos antes de importar todo el conjunto. Si solo queda un PNG, prepara un SVG candidato, revisa aberturas y fondo y verifica el archivo aceptado en la aplicación compilada.