Cómo un SVG de una página se convierte en vectores nativos de Figma

Un SVG de una página web se convierte en un vector nativo de Figma cuando Figma lee sus formas como geometría y no como una imagen. El centro de ayuda de Figma dice que un SVG importado "ya no se trata como una imagen" y se convierte en una capa vectorial editable. Hay dos elementos SVG que la documentación indica que no se incluyen: los marcadores y los patrones. Lo que sigue explica por qué y cómo comprobar el resultado.

Qué contiene una ruta SVG

La mayoría de los iconos y logotipos de una página son un puñado de elementos <path>. Lee una ruta y sabrás qué tiene que reconstruir Figma.

El atributo d

MDN describe el elemento <path> como la más potente de las formas básicas de SVG. Puede dibujar líneas, curvas, arcos y más. Su forma se define con un único parámetro, d, que contiene una serie de comandos y los parámetros que usan. Las coordenadas de d no llevan unidades y viven en el sistema de coordenadas del usuario, así que la misma ruta escala a cualquier tamaño de renderizado.

Los comandos

Cada comando es una sola letra. M mueve el cursor, L traza una línea recta y Z cierra la ruta. Las curvas son de tres tipos: C es una curva de Bézier cúbica con dos puntos de control, Q es una curva de Bézier cuadrática con un punto de control y A es un arco definido por los radios x e y, una rotación, un indicador de arco grande, un indicador de barrido y un punto final. Una letra mayúscula indica coordenadas absolutas. Una letra minúscula indica coordenadas relativas al último punto.

• M / m: mover a, toma un punto final.
• L / l: línea a, toma un punto final.
• C / c: Bézier cúbica, toma dos puntos de control y un punto final.
• Q / q: Bézier cuadrática, toma un punto de control y un punto final.
• A / a: arco, toma radios, rotación, dos indicadores y un punto final.
• Z / z: cerrar ruta, no toma parámetros.

Fuente de la lista: MDN, rutas SVG.

Formas básicas frente a rutas

<polyline>, <polygon>, <circle> y <ellipse> son atajos para casos comunes. MDN señala que una ruta puede hacer todo lo que hacen esas formas, y que los arcos tienen dificultades para dibujar círculos y elipses completos, por lo que un nodo <circle> real suele ser más fácil. A los diseñadores rara vez les importa. A un conversor sí: una sola ruta puede describir toda una ilustración, así que los datos de la ruta son lo que tiene que sobrevivir.

Un ejemplo práctico

Aquí hay una forma cerrada pequeña, una pestaña redondeada, escrita como una sola ruta:

<path d="M 10 10 H 90 V 60 C 90 80, 70 90, 50 90 C 30 90, 10 80, 10 60 Z" />

Léela de izquierda a derecha. M 10 10 coloca el cursor. H 90 traza una línea horizontal hasta x = 90, y V 60 traza una línea vertical hacia abajo hasta y = 60. Los dos comandos C dibujan cada uno una curva de Bézier cúbica con dos puntos de control, que termina en el centro inferior y después en el borde izquierdo. Z cierra la ruta hasta el inicio. Son seis comandos y ninguna unidad, porque las coordenadas están en el sistema de coordenadas del usuario. En Figma, esos mismos datos son lo que contiene una capa vectorial: puntos de anclaje unidos por segmentos rectos y curvas, y por eso después puedes arrastrar un punto.

Qué hace Figma con un SVG

Figma documenta dos vías de entrada, y se comportan igual en lo que importa.

1. Importar un archivo. El centro de ayuda de Figma indica que cuando se importa un archivo SVG, ya no se trata como una imagen. Se convierte en una capa vectorial editable.
2. Pegar desde el portapapeles. Según la guía de Figma para copiar recursos entre herramientas de diseño, copias el recurso como SVG, haces clic derecho en el lienzo del archivo de Figma Design y eliges Paste here. Cualquier persona con acceso de edición puede pegar.

Figma recomienda SVG para mover recursos entre herramientas porque es un formato sin pérdidas. La misma página recoge la única carencia documentada: los elementos SVG marker y pattern no se incluirán en la importación.

Esa es la lista completa en las páginas de Figma a 2026. No catalogan otros elementos no compatibles, así que trata cualquier cosa inusual, como filtros o máscaras, como algo que hay que inspeccionar y no dar por hecho. La cuestión vecina de los rellenos se trata en los degradados CSS en Figma.

Las vías de importación y de pegado también se diferencian en el origen del SVG. Una importación de archivo parte de un .svg guardado. Un pegado parte de lo que la herramienta de origen coloque en el portapapeles, así que el resultado depende de que esa herramienta escriba código SVG y no un mapa de bits. La página de ayuda de Figma sobre copiar vectores desde Adobe Illustrator describe este fallo en una aplicación de diseño: cuando falta el código SVG en el portapapeles, los vectores se pegan como imágenes estáticas. Si una forma pegada llega como imagen plana, lo primero que hay que sospechar es el contenido del portapapeles y no el SVG.

En una página completa, el SVG es solo una parte de la conversión. La página de producto de UnHTML afirma que el SVG se convierte en vectores nativos de Figma, y que las imágenes WebP y AVIF se transcodifican a PNG. No indica qué funciones de SVG son compatibles ni qué ocurre con las que no lo son, así que la documentación de Figma citada arriba es la mejor guía sobre los límites.

Por qué los vectores superan a un respaldo rasterizado

Una capa vectorial conserva sus puntos de anclaje. Puedes seleccionar un nodo, cambiar una curva, recolorear un relleno o redimensionar el icono sin suavizar los bordes. Un respaldo rasterizado te da un mapa de bits que solo puedes escalar dentro de los límites de sus píxeles.

La diferencia se nota cuando reutilizas un icono. Con geometría vectorial lo editas una vez. Con un mapa de bits lo redibujas. La misma brecha separa una importación nativa de una captura de pantalla más un trazado de imagen, donde la herramienta de trazado adivina la geometría que el SVG ya declara con exactitud.

El camino inverso: lo que Figma escribe de vuelta en SVG

Los viajes de ida y vuelta revelan cómo guarda Figma las formas. Según la documentación de exportación de Figma, la exportación SVG se comporta así:

• Los trazos se convierten en rellenos.
• SVG solo admite trazos centrados, así que Simplify stroke está activado por defecto en las redes vectoriales con trazos interiores o exteriores. Si lo desactivas, Figma aumenta el grosor del trazo y aplica una máscara, lo que añade líneas adicionales al código SVG.
• El texto se exporta como glifos por defecto. Desactiva Outline text para mantenerlo editable.
• SVG solo se exporta a 1x.

Así que un SVG que exportas y vuelves a importar puede tener una estructura distinta de la original, aunque se vea idéntico. Una línea con trazo en el origen puede volver como una forma rellena.

Comprobar el resultado tras la importación

Haz estas comprobaciones cuando un SVG llegue a Figma:

1. Selecciona la capa y confirma que es un vector y no un relleno de imagen.
2. Busca terminaciones de línea que falten (marcadores) y rellenos repetidos (patrones), las dos omisiones documentadas.
3. Compara el grosor del trazo con la página, ya que los trazos pueden llegar como formas rellenas.
4. Revisa el número de capas, porque una ruta compleja puede convertirse en una sola capa mientras que una ilustración agrupada se convierte en muchas.

Los bordes y contornos de los elementos circundantes siguen otras reglas, tratadas en qué sobrevive a una importación. Si importas una página completa con UnHTML, el informe de importación indica qué imágenes se omitieron, de modo que es más fácil separar los problemas de SVG de los de imágenes rasterizadas.

Conclusión

Un SVG es geometría escrita como texto, y Figma lee esa geometría y la convierte en capas vectoriales editables. Las carencias documentadas son los marcadores y los patrones. Todo lo demás merece una comprobación visual rápida, porque la documentación no promete un clon del original.