Importar SVG en Apple Motion: revisa el diseño antes de animar
Importa un SVG estático en Apple Motion, comprueba su transparencia y las funciones no compatibles y decide si la ilustración necesita objetos separados antes de animar.
En esta página
- Adapta el flujo a tu versión de Motion y a la tarea
- Empieza con un original que puedas revisar
- Importa en la composición y revisa el contenido multimedia
- Prueba el control de las piezas antes de añadir fotogramas clave
- Diagnostica contenido no compatible con una copia más sencilla
- Prepara un emblema solo ráster para Motion
- Preguntas frecuentes
- Fuentes
Apple Motion admite la importación de SVG. La guía de funciones de Motion 6.3 de Apple incluye compatibilidad con SVG, por lo que los consejos antiguos que envían todos los SVG a otro formato no son un punto de partida fiable para esa versión. Empieza con un archivo estático, impórtalo como contenido multimedia y revisa el resultado antes de crear la animación.
Debes responder tres preguntas distintas: ¿aparece la ilustración?, ¿se ve bien su transparencia? y ¿puedes controlar las piezas que deben moverse independientemente? Que un gráfico aparezca en el lienzo solo responde a la primera. No demuestra que cada trazado SVG se haya convertido en una forma nativa de Motion.
Este flujo utiliza un emblema sencillo de anillo y disco para hacer visibles esas comprobaciones. Es un procedimiento documentado que puedes probar en tu versión instalada, no un informe de una prueba de importación nativa en Motion.
Adapta el flujo a tu versión de Motion y a la tarea
Comprueba la versión instalada antes de seguir un mensaje antiguo de un foro o importar una colección grande. Las indicaciones actuales sobre SVG de Apple describen los usos compatibles y limitaciones concretas. Si tu instalación difiere de la versión documentada, consulta la guía correspondiente antes de diagnosticar la ilustración.
Decide qué debe ocurrir después de importar:
| Resultado previsto | Qué debe proporcionar la entrega | Comprobación de aceptación |
|---|---|---|
| Mover o escalar todo el emblema | Un gráfico estático mostrado correctamente | Todo el diseño responde en conjunto |
| Mover el disco pequeño de forma independiente | Objetos controlables por separado | Mover el disco no modifica el anillo |
| Remodelar el anillo con el tiempo | Una forma nativa adecuada u otra construcción editable | Están disponibles los controles geométricos necesarios |
| Conservar una animación SVG existente | Una vía de entrega de animación planificada por separado | Los fotogramas y tiempos previstos se conservan en esa vía |
La última fila es especialmente importante. La documentación SVG de Motion indica que los SVG animados solo muestran su primer fotograma. Importar un archivo animado no equivale a importar su animación.
Si eliges entre aplicaciones de animación, la guía de trazado de logotipos en After Effects y el flujo de trazado en Adobe Animate explican sus propios objetos de destino. Sus comandos y tipos de objeto no son intercambiables con la importación multimedia de Motion.
Empieza con un original que puedas revisar
Guarda este ejemplo original como orbit-mark.svg:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
<circle cx="68" cy="66" r="34" fill="none" stroke="#157D78" stroke-width="14"/>
<circle cx="126" cy="24" r="12" fill="#EF8067"/>
</svg>El anillo verde azulado tiene el centro vacío. Un disco coral más pequeño está arriba a su derecha, separado por un hueco. El archivo no tiene rectángulo de fondo, texto, referencia a una imagen externa, script ni animación. Estas decisiones lo convierten en una base útil para revisar después un emblema más elaborado.
Ábrelo primero en el editor de origen. Comprueba la abertura del anillo, el hueco y el límite del lienzo. Conserva el maestro editable, porque corregir la ilustración y corregir un ajuste de importación son tareas distintas.
Para tu propio archivo, simplifica la copia de entrega solo donde una función concreta cause problemas. Un diseño con letras necesita una estrategia explícita de fuentes; utiliza la lista de comprobación de cambios de fuentes SVG antes de exportar. Conserva el texto editable en el maestro aunque una copia de entrega necesite letras convertidas a contornos. No traces un vector ya utilizable solo porque cambie la aplicación de destino.

Importa en la composición y revisa el contenido multimedia
Selecciona el grupo donde quieres que aparezca el emblema. En el flujo actual de importación de Motion, elige File > Import > Media o pulsa Command-I, selecciona el SVG e impórtalo. También puedes arrastrarlo desde Finder al lienzo o a un grupo de la lista Layers.
Después de importar, busca el gráfico en el lienzo y su capa en el grupo previsto. No juzgues el archivo únicamente porque su nombre aparezca en la lista Media. Apple también documenta la importación en esa lista sin añadir el contenido a la composición; en ese caso, todavía no aparecerá en el lienzo ni en la lista Layers.
Coloca el emblema sobre un fondo de contraste para revisarlo. Observa el centro abierto y el espacio entre las dos piezas. Un fondo oscuro del visor puede hacer que el contenido ausente y el transparente parezcan engañosamente similares.
Para revisar la sustitución de fondo de Motion, pulsa Media en el panel Project y selecciona el objeto SVG. Abre Media Inspector. La página sobre SVG de Apple documenta Use Background Color y los controles de color asociados. Mantén desactivada esa sustitución si buscas conservar las zonas transparentes del original; actívala solo cuando quieras un color de reemplazo.
Un rectángulo opaco ya dibujado dentro del SVG es otro problema. Desactivar una opción de fondo multimedia no elimina un trazado que pertenece a la ilustración. La guía de fondos SVG transparentes cubre ese diagnóstico del archivo de origen.
Prueba el control de las piezas antes de añadir fotogramas clave
Selecciona el emblema importado y realiza un cambio pequeño y reversible de posición. Si el anillo y el disco se mueven juntos, es útil para un gráfico único. Restaura la posición y decide si la animación prevista necesita más control.
Para un disco que deba moverse independientemente, intenta seleccionar y mover solo esa pieza. Acepta la entrega únicamente cuando el anillo permanezca en su sitio y puedas controlar por separado el objeto previsto. Un nombre de grupo SVG, un hueco visible o una miniatura de capa no bastan por sí solos.
Si el objeto disponible no muestra los controles necesarios, elige una construcción que sí lo haga. Para este ejemplo sencillo, dibujar un anillo y un disco como formas nativas separadas es una opción razonable. La guía de formas sencillas de Apple explica la herramienta Circle y sus controles de color y contorno. Construye el anillo con contorno y relleno vacío y el disco con relleno sólido, y comprueba por separado la selección de cada objeto.
Para diseños más elaborados, otra opción es preparar archivos de origen separados para las piezas que requieran movimiento independiente. Conserva un lienzo común y registra su alineación prevista en el editor de origen. Verifica la colocación después de importar; un conjunto de archivos no constituye automáticamente una composición preparada para animar.
Es una decisión sobre los objetos necesarios, no una promesa de que importar SVG descomponga la ilustración en formas nativas. Si necesitas deformación a nivel de puntos, confirma que la construcción elegida proporciona los controles geométricos necesarios antes de empezar la animación.
Diagnostica contenido no compatible con una copia más sencilla
Las limitaciones SVG de Apple identifican varias razones por las que el archivo puede diferir del editor de origen. Utiliza el síntoma para elegir la siguiente comprobación.
| Síntoma | Restricción documentada o comprobación probable | Paso siguiente |
|---|---|---|
| Un SVG animado permanece quieto | Motion muestra su primer fotograma | Trata la importación como estática y planifica el movimiento por separado |
| Un SVG con aparición gradual parece vacío | Su primer fotograma puede ser transparente | Exporta un estado estático visible para entregar la ilustración |
| Un archivo con fuentes personalizadas no se importa | Los SVG con fuentes personalizadas no son compatibles | Prepara una copia adecuada para entregar y conserva el maestro editable |
| Una imagen esperada se convierte en un marcador de posición | Las referencias a imágenes externas no son compatibles | Sustituye la dependencia por un recurso de entrega autónomo adecuado y pruébalo |
| Falta contenido vinculado o generado por scripts | Los objetos JavaScript y los vínculos incrustados no aparecen | Elimina la dependencia del comportamiento interactivo |
| Las formas parcialmente transparentes se ven distintas | La opacidad variable de las formas puede renderizarse de otra manera | Compara una copia simplificada y la composición prevista |
No interpretes la limitación de referencias externas como prueba de que funciona cualquier función SVG autónoma. Un archivo base más pequeño ayuda a aislar la dependencia, pero la ilustración final sigue necesitando su propia revisión.
Cuando la apariencia estática sea correcta, revisa el emblema en los tamaños mínimo y máximo utilizados en la composición. Observa la abertura interior del anillo y el hueco junto al disco. Después revisa una sección breve exportada a la resolución de entrega prevista. La geometría vectorial de origen no elimina la necesidad de comprobar la composición, los efectos y el fotograma final del vídeo.
Prepara un emblema solo ráster para Motion
Si falta el emblema editable y solo queda un PNG o JPG sencillo, el flujo de imagen a vector de PerfectVector puede preparar un SVG estático candidato. Recorta hasta el emblema, revisa en la vista previa si se ha rellenado la abertura del anillo, fusionado el disco o añadido formas de fondo no deseadas, y compara el candidato con el original. Descarga la ilustración aceptada y repite las comprobaciones de importación y objetos independientes.
La vectorización no recupera fotogramas clave, tiempos, capas nativas de Motion ni una estructura de control de animación. Utiliza el maestro vectorial existente cuando esté disponible. Conserva como ráster las fotografías y las imágenes con muchos efectos cuando eso mantenga mejor su apariencia; dibuja un anillo y un disco sencillos directamente en Motion cuando el requisito real sea controlar objetos nativos.
Antes de entregar el proyecto a otra persona, anota el nombre del archivo original, la versión de Motion, la elección de fondo y los elementos que deben permanecer separados. Incluye el maestro editable y una referencia de la disposición prevista. Los flujos de ilustración del blog cubren las decisiones de preparación anteriores a esa entrega.
Preguntas frecuentes
¿Apple Motion puede importar archivos SVG directamente? Sí. La documentación de Motion 6.3 de Apple incluye compatibilidad con SVG. Utiliza el flujo de importación de tu versión instalada y revisa después la ilustración y los controles necesarios.
¿Importar un SVG conserva su animación? No. Motion solo muestra el primer fotograma de un SVG animado. Si es transparente, la ilustración importada puede parecer vacía.
¿Por qué mi SVG tiene un fondo coloreado en Motion? Comprueba Use Background Color en Media Inspector y busca una forma de fondo opaca en el original. Un ajuste de fondo multimedia y un rectángulo dibujado dentro del SVG son causas distintas.
¿Cada trazado SVG se convierte en una forma editable de Motion? No lo supongas por una importación correcta. Comprueba si están disponibles las piezas y los controles geométricos necesarios. Prepara objetos separados o utiliza una construcción nativa adecuada cuando la animación requiera control independiente.
Fuentes
- Apple — Novedades de Motion — Compatibilidad documentada de Motion 6.3 con SVG.
- Apple — Trabajar con archivos SVG en Motion — Controles de transparencia y limitaciones de funciones SVG.
- Apple — Importar contenido multimedia en Motion — Importación multimedia, colocación en grupos e importación solo a la lista Media.
- Apple — Dibujar formas sencillas en Motion — Alternativa nativa para geometría sencilla controlada por separado.
Comprueba la apariencia y la estructura de objetos de un emblema antes de preparar toda la secuencia. Si solo queda una ilustración ráster, prepara un SVG estático candidato, revisa las piezas separadas y valida el archivo aceptado en Motion antes de animar.
Más del blog

SVG en Matplotlib: conserva el gráfico y el logotipo como trazados
Exporta tu gráfico de Matplotlib como SVG, compón trazados de logotipo separados con svgutils y comprueba píxeles incrustados, colocación y cambios de fuente en el archivo entregado.

Umbral alfa en SVG: convierte la transparencia en un corte abrupto
Usa feFuncA para aplicar un umbral abrupto al alfa SVG. Compara discrete y table con píxeles PNG conocidos, conserva los huecos y comprueba por qué permanece el blanco opaco.