¿Cómo importar y editar tus archivos SVG en Figma, Canva o WordPress?

Ya tienes el SVG. ¿Y ahora qué?

La mayoría de los conversores se detienen en el botón Descargar. Pero el archivo no sirve de nada si se queda en la carpeta de Descargas. Un diseñador lo abre en Figma para aplicar la guía de estilo. Un community manager lo sube a Canva para crear una publicación. Un desarrollador web lo añade a WordPress para el logotipo del encabezado. Es este siguiente paso el que demuestra que PixelToPath se integra en un flujo de trabajo real, no en una demostración.

Un SVG de PixelToPath no es una imagen estática. Es un conjunto de trazados: cada forma tiene un relleno y, en ocasiones, un contorno. Cambiar el azul del logo a burdeos, aislar un pictograma, ampliarlo para una historia de 1080x1920: todo esto se hace en la herramienta que ya utilizas, sin necesidad de pasar por Illustrator.

Por qué a Figma, Canva y WordPress les encanta este formato

Una vez importados, PNG y JPG son mapas de bits. Recolorear un logotipo en PNG en Figma significa colocar una capa encima, no cambiar el color del trazado. Canva no ofrecerá paletas de colores. WordPress mostrará un archivo pesado que se verá borroso en pantallas Retina. El SVG soluciona los tres problemas a la vez.

En la práctica, un SVG generado por PixelToPath te ofrece:

• Trazados editables: un color por forma, que puedes modificar en Figma (Relleno) o Canva (paletas de colores)
• Un archivo ligero, muy por debajo del límite de 3 MB de Canva, y que carga más rápido en un sitio de WordPress que un PNG @2x
• La misma nitidez en un favicon, un banner de LinkedIn o un roll-up: un único archivo
• Un archivo final que puedes enviar a tu cliente: lo abrirá en la herramienta que tenga, no en Creative Cloud

Figma: importar el SVG y cambiar los colores

Figma importa un SVG como un grupo de vectores, no como una foto. Esta es la principal ventaja: cada forma sigue siendo una capa que puedes recolorear, mover u ocultar.

1. Descarga el .svg desde PixelToPath y abre tu archivo de Figma.
2. Arrastra el archivo desde el explorador directamente al lienzo. Alternativa: Archivo → Importar, o pulsa Ctrl+Shift+K (Cmd+Shift+K en Mac) para colocar el SVG.
3. La capa aparece como un grupo. Haz doble clic para entrar, o haz clic derecho → Desagrupar (Shift+Ctrl+G / Shift+Cmd+G) si quieres manipular las formas de una en una.
4. Selecciona un trazado. En el panel de la derecha, sección Relleno (Fill), haz clic en el color: hex, muestras, cuentagotas. Toda la forma cambia, los bordes siguen nítidos.
5. Para un logotipo monocromático, selecciona todas las formas del grupo y aplica un solo color. Luego exporta como SVG, PNG o PDF desde la sección Export si el archivo final ya no necesita ser vectorial.

Si Figma muestra una imagen plana en lugar de capas vectoriales, es porque el archivo incluía un mapa de bits (un PNG encapsulado). Este no es el caso de las exportaciones de PixelToPath en el preajuste Blanco y Negro o Póster. Vuelve a convertir el original con uno de estos dos modos, no con el modo Foto.

Canva: soltar el SVG y recolorear

Canva acepta archivos SVG tanto en la versión Gratis como en la Pro. La recoloración funciona cuando el archivo es sencillo: colores planos, pocos nodos, sin degradados. Esto es exactamente lo que produce PixelToPath con los preajustes Póster o Blanco y Negro.

1. En Canva, abre un diseño. Panel izquierdo → Subidos → Subir archivos. Elige tu .svg (menos de 3 MB; una exportación de PixelToPath está muy por debajo).
2. Una vez que el archivo esté en tus subidas, arrástralo a la página. Cambia el tamaño con los tiradores: el vector permanece nítido, incluso en formato story o A4.
3. Haz clic en el SVG. En la barra de herramientas, aparecerán paletas de colores, una por cada tono del archivo. Haz clic en un color y elige el nuevo: Canva lo aplicará a todas las formas de ese tono.
4. Si no aparece ninguna paleta de colores, el SVG es demasiado complejo (degradados, demasiados colores, trazados tipo Foto). Vuelve a PixelToPath, cámbialo a Póster o Blanco y Negro, vuelve a exportar e importar.

Canva recomienda un perfil SVG 1.1, formas del mismo color agrupadas y sin texturas. Los preajustes de logotipos de PixelToPath ya cumplen estas restricciones. No es necesario pasar por Illustrator para «preparar» el archivo.

WordPress: permitir la subida de SVG sin abrir una vulnerabilidad

WordPress bloquea los SVG por defecto, y no es un capricho. Un SVG es XML: puede contener JavaScript, entidades externas y un payload XSS. Un visitante, o una cuenta de Editor comprometida, que suba un SVG malicioso podría ejecutar código en el panel de administración. Por eso se bloquea. Debes permitir el formato y limpiar el archivo.

No te limites a añadir image/svg+xml en functions.php. Sin limpiar el archivo, estás abriendo una brecha de seguridad. El método seguro: usar un plugin actualizado que elimine scripts, eventos onload y entidades XML. Safe SVG (de 10up) tiene más de un millón de instalaciones.

1. En el panel de WordPress: Plugins → Añadir nuevo. Busca Safe SVG (autor: 10up). Instálalo y actívalo.
2. Ve a Ajustes → Medios. Limita la subida de SVG a los administradores (o a roles de confianza). No abras el formato a todos los perfiles de Autor si el sitio tiene varios colaboradores.
3. Medios → Añadir nuevo. Sube el .svg de PixelToPath. El plugin lo limpia al importarlo y muestra una vista previa en la biblioteca multimedia, algo que WordPress no hace de forma nativa.
4. En una entrada o página, inserta un bloque de Imagen y elige el SVG. Para un logo de encabezado, utiliza Personalizar / Identidad del sitio, o un bloque de Imagen en la plantilla del tema (editor del sitio).
5. Alternativa para desarrolladores: no uses la biblioteca de medios. Coloca el archivo en el tema (assets/logo.svg) y haz referencia a él en la plantilla, o incrústalo inline para aplicarle estilos con CSS. Sin subidas no hay superficie de ataque en la biblioteca multimedia.

Safe SVG también puede restringir quién tiene derecho a subir archivos. Mantén el plugin actualizado: la limpieza del archivo es el verdadero control, no solo la casilla de «permitir SVG».

¿Qué SVG de PixelToPath usar en estas herramientas?

El editor procesa lo que le das. Un mal preajuste se nota al momento de importar: demasiadas formas, colores inaccesibles, archivo rechazado.

• Logo, pictograma, letras: Blanco y Negro o Póster. Son colores planos, Figma y Canva los recolorean con un clic.
• Evita el modo Foto si planeas modificar los colores. Este modo crea multitud de pequeñas formas; Canva muchas veces no mostrará ninguna paleta de colores útil.
• Recorta el original antes de convertir: menos fondo, menos nodos, un SVG más limpio en la capa de Figma.
• Una variante para cada uso: un SVG monocromático para Figma (guía de estilo), un SVG en color para Canva (post), el mismo archivo limpio para WordPress (header).

Dónde cambia el día a día este flujo de trabajo

En cuanto el SVG está en tu herramienta, dejas de reconvertirlo para cada variante:

• Guía de estilo en Figma: el PNG del cliente se convierte en un componente que recoloreas (primario, invertido, monocromático) sin tener que redibujar
• Publicaciones en Canva: un solo SVG, seis colores de campaña, stories y carruseles nítidos
• Logotipo en WordPress: un archivo en el encabezado, nítido en móvil y Retina, más ligero que el clásico PNG
• Entrega freelance: envías el SVG junto con las instrucciones para Figma/Canva. El cliente ya no se quedará atascado
• Iconos de interfaz: impórtalos en lote a Figma, alinéalos en una cuadrícula de 24 px y exporta el conjunto

Guarda el PNG para las fotos. Para todo lo que deba cambiar de color o mantenerse nítido, el combo PixelToPath + Figma / Canva / WordPress es suficiente.