Importar SVG en Penpot: lleva formas editables a tu diseño

Para importar un SVG en Penpot, abre un archivo de diseño y arrastra el .svg a su lienzo, o usa la herramienta de imagen de la barra para seleccionarlo. El comando Import files del panel principal es para archivos de proyectos Penpot. Si quieres colocar un icono, empieza dentro del diseño. Las indicaciones de inserción de capas y la documentación de importación de proyectos describen estas vías separadas.

Cuando aparezca la ilustración, comprueba si puedes cambiar una zona de color y editar un contorno. Un icono puede verse correcto y seguir siendo incómodo de modificar. Si el original ya es vectorial, repáralo o expórtalo de nuevo cuando haga falta. Traza un PNG o JPG solo si necesitas recuperar formas de píxeles.

Comprueba la importación antes de reutilizarla

Conserva el SVG original, importa un icono representativo y trabaja en un duplicado. Prueba la apariencia, un relleno, una curva y cualquier texto editable. Exporta un SVG separado y compáralo con el original antes de repetir el proceso en todo un kit.

Empieza en el lienzo e inspecciona después las capas

Abre el archivo de Penpot donde deba ir la ilustración. Inserta el SVG guardado en una zona vacía para examinarlo separado del resto del diseño. Si falla arrastrar, usa el selector de archivos de la herramienta de imagen para eliminar del diagnóstico el comportamiento de arrastrar y soltar.

Selecciona la ilustración importada y despliega su entrada en Capas. Un grupo es organización útil, no prueba de que el SVG se haya convertido en mapa de bits. Puedes seleccionar un hijo desde el panel o entrar en un grupo con doble clic; Penpot también permite selección profunda con Ctrl-clic o Command-clic. Estos controles se explican en la guía de selección de capas.

Distintos contenidos SVG pueden convertirse en objetos distintos. En el importador publicado de Penpot, las formas habituales como trazados, rectángulos y elipses tienen controladores de formas nativas; otros elementos pueden conservarse como SVG sin procesar. El importador también maneja por separado los elementos de imagen. Por eso el nombre del archivo no demuestra cómo se editará cada parte. Consulta el importador de formas SVG.

Evita desagrupar o aplanar todo al principio. Identifica primero la parte que quieres cambiar. Conserva el grupo si sus hijos ya ofrecen el control necesario.

Prueba un relleno y una curva

Usa un icono pequeño con partes claramente separadas. Una planta en maceta es un buen ejemplo: la maceta debería aceptar otro color sin cambiar las hojas y una hoja debería poder editarse sin deformar toda la planta.

En un duplicado del icono importado:

1. Selecciona la capa de la maceta y cambia su relleno a un color de contraste. Comprueba que solo cambie la zona prevista.
2. Selecciona el trazado de una hoja. Pulsa Enter para editar sus nodos, mueve un punto ligeramente y deshaz. Penpot lo documenta en sus instrucciones de edición de nodos.
3. Compara el duplicado con la importación intacta. Confirma que la silueta original, los huecos pequeños y el grosor del trazo sigan intactos al deshacer la prueba.

Si la maceta y hojas cambian juntas, inspecciona la selección y la estructura original. Quizá seleccionaste el grupo exterior o el original combina varias zonas en un trazado. Cambiar un color correctamente no demuestra que cada contorno sea un trazado nativo independiente.

Otra posibilidad es contenido SVG sin procesar. Penpot tiene un panel de opciones específico para él, incluidos controles de apariencia para elementos compatibles. Por eso los controles de relleno o trazo no garantizan edición normal de nodos. Si no puedes editar la parte como necesitas, simplifícala o redibújala en el editor original e importa otra copia. La diferencia se ve en la implementación de opciones SVG sin procesar de Penpot.

Diagnostica el síntoma antes de cambiar el archivo

Usa el SVG intacto como referencia. Ábrelo en un navegador y compara ese renderizado con la importación de Penpot. Si ya se ve mal en el navegador, vuelve a la exportación original antes de reparar la copia de Penpot.

Trazos ausentes e ilustración invisible

Comprueba los ajustes de relleno y trazo antes de borrar la capa seleccionada. Penpot ofrece color, opacidad, ancho, estilo y visibilidad del trazo, además de controles de remate para trazados abiertos. Una marca corta puede verse muy diferente con otro remate, así que compara la forma en lugar de asumir que falta. Los controles se describen en Color and Strokes.

Para un objeto invisible, inspecciona también capas ocultas y recortes. Si el navegador muestra correctamente el original y Penpot no, aísla el elemento que falla en una copia. Exporta la muestra más sencilla y compara de nuevo. Así tienes un archivo y síntoma concretos que investigar en lugar de cambiar varios ajustes a la vez.

No elimines todos los style, máscaras o definiciones porque lo sugiera una solución antigua. Pueden contener información de apariencia. Si el problema es la construcción del trazo original, sigue el diagnóstico de trazos SVG que desaparecen y conserva un maestro editable antes de expandir los trazos en contornos.

Texto que se ve bien, pero no se puede editar

Para una etiqueta de botón, prueba a cambiar una palabra. Para un logotipo, decide si basta conservar las formas de las letras. Son requisitos distintos.

Las letras importadas pueden ser ya contornos o permanecer como contenido SVG en lugar de una capa de texto nativa. No asumas que cada elemento de texto SVG importado se convierte en texto editable de Penpot. Si las palabras cambian regularmente, recréalas con la herramienta de texto, elige la fuente prevista y compara espaciado y saltos de línea. La guía de texto de Penpot explica crear capas de texto y editar su contenido.

Cuando las letras cambien de forma o de saltos de línea, usa la guía de problemas de fuentes SVG. Conserva una copia con texto editable aunque la entrega necesite letras convertidas en contornos.

Cuándo encaja PerfectVector en el proceso

PerfectVector sirve cuando tienes un icono o ilustración rasterizada y necesitas contornos editables en Penpot. Convierte el PNG o JPG en trazados SVG, inspecciona silueta y zonas de color, importa el resultado y realiza la prueba de un relleno y una curva. Debes seguir juzgando el trazado frente a la ilustración que quieres usar.

Una imagen rasterizada dentro de SVG no adquiere contornos editables de hojas o maceta por cambiar el contenedor. El importador de Penpot tiene un controlador de imagen separado; no la convierte en los objetos nativos de trazado manejados en otras partes del código del importador.

Usa la exportación vectorial original si la tienes. Para un símbolo simple de interfaz, dibujarlo con formas nativas de Penpot puede dar geometría más deliberada que trazar. Conserva fotografías e ilustraciones con mucha textura como imágenes cuando los píxeles formen parte del diseño. La explicación de vectorización de imágenes cubre qué recupera el trazado y qué cambia.

Exporta una muestra antes de construir el kit

Conserva el diseño de trabajo en Penpot y exporta un SVG de entrega separado. Selecciona el icono o tablero, añade un preajuste de exportación con el botón más de la sección Export del panel Design y elige SVG. Penpot lo documenta en Exporting layers.

Abre el archivo exportado en un navegador. Compara colores, trazos, texto, recorte y espacio vacío con la referencia. Si debe volver a un editor de diseño, importa esa exportación en otra zona y repite la prueba de edición. La apariencia correcta y la estructura útil para editar necesitan comprobaciones independientes.

Antes de añadir la muestra a un kit mayor, confirma:

• Las zonas que necesitan colores separados se seleccionan independientemente.
• Los contornos que esperas modificar ofrecen controles utilizables.
• Las etiquetas editables siguen siendo texto en el diseño de trabajo.
• El icono exportado tiene los límites y márgenes previstos.
• Sigue siendo legible a su tamaño real de interfaz.

Después aplica las mismas comprobaciones al conjunto. El flujo de iconos PNG a un kit SVG añade cuadrículas compartidas, tamaños ópticos y reglas de nombres cuando las importaciones individuales sean correctas.

Preguntas frecuentes

¿Por qué el diálogo Import files de Penpot rechaza mi SVG? Ese diálogo importa proyectos Penpot. Para colocar un gráfico SVG, abre un diseño y usa la herramienta de imagen o arrastra el SVG al lienzo.

¿Importar SVG hace editable cada parte? Las formas vectoriales habituales pueden convertirse en objetos nativos, pero otro contenido puede permanecer como SVG sin procesar o imágenes. Prueba el cambio concreto de relleno, curva o texto que necesites antes de reutilizar la ilustración.

¿Necesito desagrupar un SVG importado? Solo si cambiar la estructura de grupos ayuda a tu tarea. Prueba primero a seleccionar un hijo en Capas. Conservar un grupo útil no impide editar sus hijos seleccionables.

¿Debería vectorizar un SVG que se importa mal? Empieza reparando o exportando de nuevo el vector existente. Vectorizar sirve cuando la ilustración disponible es rasterizada y necesitas trazados; no es una reparación general de un SVG existente.

Fuentes

1. Penpot: capas — Insertar ilustraciones, seleccionar hijos y editar nodos.
2. Penpot: exportar e importar archivos Penpot — Importación de proyectos nativos, separada de insertar ilustraciones en el lienzo.
3. Penpot: importador de formas SVG — Manejo separado de formas nativas, imágenes y SVG sin procesar en una versión publicada.
4. Penpot: opciones SVG sin procesar — Los controles de apariencia no demuestran por sí solos edición nativa de trazados.
5. Penpot: color y trazos — Controles de relleno, trazo y remates usados para diagnosticar.
6. Penpot: texto y tipografía — Crear capas nativas de texto y editar contenido.
7. Penpot: exportar capas — Añadir un preajuste SVG para una capa o tablero.

---

Si tu original es un PNG o JPG y necesitas formas editables, prepara un SVG con PerfectVector. Impórtalo en Penpot, cambia un relleno y prueba una curva antes de incorporar la ilustración a tu kit de diseño.