PNG a SVG para Canva y Figma

Por qué una imagen PNG se ve borrosa en Canva y Figma

Un PNG es una cuadrícula de píxeles. Amplíalo para un banner en Canva o un marco grande en Figma y los bordes se vuelven suaves y dentados. Convertir PNG a SVG para Canva y Figma reemplaza los píxeles por formas vectoriales, por lo que el gráfico se mantiene nítido a cualquier tamaño.

También ayuda si creaste un logotipo en el plan gratuito de Canva. Subir un SVG a Canva no está limitado a la versión Pro, pero descargar tu diseño como SVG es una función de los planes de pago. Descárgalo como PNG en su lugar y realiza el paso de conversión de PNG a SVG de Canva aquí.

Reglas de Canva para cargar un SVG

El centro de ayuda de Canva enumera algunos requisitos para las cargas de SVG. Aquí se muestra cómo se asigna cada uno a SVGR.

Lo que verá al importar el SVG en Figma

Figma importa un SVG como capas vectoriales, por lo que puedes seleccionar, recolorear y redimensionar formas directamente. Ese es el objetivo de una conversión de PNG a SVG en Figma: obtienes formas editables en lugar de una imagen plana.

SVGR apila formas en lugar de cortar agujeros. El contrahueco de una O, o el hueco interior de un anillo, es una forma del color de fondo que se sitúa encima de una forma sólida, por lo que en Figma verás capas superpuestas. Eso se ve bien sobre un fondo del mismo color, pero se muestra sobre cualquier otro color.

Para crear un verdadero agujero, selecciona la forma superior junto con la inferior y aplica "Restar" en las operaciones booleanas de Figma.

Texto: formas trazadas o texto en vivo

Con el reconocimiento de texto desactivado, las letras se trazan como formas. Se ve exactamente igual que el original y funciona en ambas aplicaciones, pero no puedes volver a escribirlo.

Con esto activado, el texto detectado se convierte en texto SVG en vivo, y SVGR también ejecuta un refinamiento de color, lo que puede añadir rellenos con degradado. Canva solicita que el texto se expanda, por lo que debe mantenerse desactivado allí. Figma importa el texto SVG como texto en vivo, con limitaciones: se ignora la opacidad del texto, los tamaños de fuente basados en em se leen como píxeles y se ignora el espaciado entre letras en los fragmentos de texto individuales.

Para los logotipos, desactive Reconocer texto. Si necesita títulos editables, vuelva a escribirlos en Figma con la fuente adecuada.

Límites del conocimiento

• La conversión de PNG a SVG para Canva y Figma funciona para gráficos planos, no para fotos. Una foto vectorizada se convierte en un archivo grande y complejo; para Canva, sube la foto directamente como JPG o PNG.
• Los PNG de bordes suaves pueden volver con colores casi duplicados, como varias tonalidades casi negras. Vuelve a colorearlos con un solo color en Figma u otro editor si deseas una paleta limpia.
• Cómo Canva te permite recolorear un SVG cargado depende del archivo, y no lo hemos probado en todos los diseños. Carga un archivo de prueba antes de crear una plantilla en torno a él.
• Las formas apiladas también importan en Canva. Con un fondo transparente, el interior de una O conserva su color de fondo original y aparece como un punto sobre cualquier otro color. Recorta esos agujeros en Figma, o con Ruta > Diferencia en Inkscape, antes de subirlos.
• El fondo transparente elimina la forma pintada con el color que se encuentra en las esquinas de la imagen, que es lo que la gente entiende por "fondo". Si tu obra se extiende hasta las cuatro esquinas, o las esquinas tienen colores distintos, no se elimina nada y el fondo permanece; proporciona a la obra un margen plano y uniforme y vuelve a convertir. Las áreas completamente rodeadas por la obra nunca se eliminan, y un PNG que ya tiene un canal de transparencia se deja tal cual.
• Las curvas se trazan como muchos segmentos rectos cortos. Trazadas a partir de una imagen pequeña, pueden parecer ligeramente angulares al ampliarse, por lo que se debe comenzar desde la copia más grande disponible.