Editor y visor de código SVG online con vista previa

Un editor de código SVG, visor y previsualizador, todo en uno

SVG (Scalable Vector Graphics) es el formato XML detrás de los iconos, logotipos e ilustraciones de la mayoría de los sitios web. Phoenix Code abre los archivos .svg como código legible y editable y renderiza la imagen al lado, actualizándose en vivo mientras escribes.

También funciona como un visor de SVG. Abre cualquier archivo .svg para ver su aspecto real e inspeccionar el código al mismo tiempo, en lugar de arrastrar los archivos a una pestaña del navegador uno por uno.

Y como Phoenix Code es un editor de código real, obtienes más que un simple cuadro de texto de pegar y previsualizar: resaltado de sintaxis, proyectos multiarchivo, integración con Git y la asistencia de la IA Claude Code están integrados, para que puedas editar los SVG dentro de un proyecto real de sitio web o aplicación.

Todo lo que necesitas para editar archivos SVG

Edita iconos a mano, ajusta logotipos y limpia vectores exportados sin abrir una pesada aplicación de diseño.

Previsualización de SVG en vivo

Ve cómo la imagen renderizada se actualiza mientras escribes. Cambia un relleno, ajusta una ruta o redimensiona el viewBox y observa el resultado al instante.

Autocompletado de etiquetas y atributos SVG

Sugerencias de código para elementos y atributos SVG mientras escribes, desde path y viewBox hasta degradados, filtros y máscaras.

Muestras y selector de color

Los colores de relleno y trazo muestran muestras de color en línea junto al código. Haz clic en una para abrir un selector de color y ajustar los colores sin salir del editor.

Formatear código SVG desordenado

Los SVG exportados a menudo llegan como una sola línea larga. Un clic reformatea el marcado en código limpio, sangrado y legible, y las etiquetas emparejadas se renombran juntas cuando las editas.

Asistente de código con IA Claude

Pídele a la IA que ajuste una ruta, cambie el color de un conjunto de iconos o explique qué hace un filtro. Usa tu inicio de sesión/clave existente; tus archivos permanecen locales.

Proyectos reales, no un cuadro de texto

Abre una carpeta de iconos completa, edita varios archivos SVG lado a lado y haz commit de los cambios con el Git integrado. Funciona sin conexión en la aplicación de escritorio gratuita.

Abrir y visualizar archivos SVG en línea

¿Necesitas abrir un archivo SVG que alguien te ha enviado? Ábrelo en phcode.dev y verás la imagen renderizada y su código fuente lado a lado, sin instalación ni cuenta. Funciona como un visor para abrir archivos SVG en línea.

Pasar el cursor sobre una referencia SVG en tu HTML o CSS muestra una miniatura de la imagen con sus dimensiones, lo que hace que encontrar el icono correcto en un proyecto grande sea mucho más rápido.

Edita SVG en línea, de forma privada

No se sube nada a ningún servidor. Tanto si usas el editor del navegador como la aplicación de escritorio, tus archivos SVG permanecen en tu equipo. Sin cuenta, sin registro, sin marcas de agua.

Un apunte honesto: Phoenix Code es un editor de código, no una herramienta de dibujo. Si quieres arrastrar formas en un lienzo, un editor visual como Inkscape se ajusta mejor. Si quieres un control preciso sobre el marcado que se incluye en tu producto, editar el código directamente es precisamente el objetivo.

Cómo abrir y editar un archivo SVG

De un archivo .svg en bruto a una edición finalizada en menos de un minuto.

Abre Phoenix Code

Inicia el editor al instante en phcode.dev o instala la aplicación de escritorio gratuita para Windows, macOS o Linux.

Abre tu archivo .svg

Abre la carpeta que contiene tu SVG o arrastra el archivo al editor. Se abrirá como código editable con la vista previa de la imagen al lado.

Edita con vista previa en vivo

Cambia rutas, colores, tamaños o texto y observa cómo la imagen renderizada se actualiza mientras escribes.

Guarda y úsalo

Guarda el archivo e insértalo directamente en tu sitio web, aplicación o README. El código que has editado es exactamente lo que se usará.

Más que un editor de SVG

Phoenix Code hace el mismo truco de vista previa en vivo para Markdown. Si escribes documentos o READMEs, prueba el editor de Markdown online gratuito, o echa un vistazo a nuestras herramientas gratuitas para desarrolladores con conversores, formateadores y generadores.

Preguntas frecuentes

Sí. Editar archivos SVG con vista previa en vivo es completamente gratis en Phoenix Code, tanto en el navegador en phcode.dev como en la aplicación de escritorio. El editor es de código abierto.

Abre phcode.dev en tu navegador, luego abre la carpeta con tu archivo .svg y haz clic en él. Verás la imagen renderizada y el código fuente editable uno al lado del otro, sin necesidad de instalación ni de una cuenta.

Sí. La imagen renderizada se actualiza mientras escribes, así que puedes ajustar una ruta o un color y ver el resultado inmediatamente en el panel de vista previa.

No. Phoenix Code edita el código fuente del SVG en lugar de ofrecer un lienzo de dibujo. Eso lo hace ideal para limpiar iconos, ajustar colores y rutas, y mantener un control preciso del marcado. Para la ilustración a mano alzada, una herramienta visual como Inkscape funciona mejor.

Empieza a editar SVG ahora

Un editor y visor de código SVG gratuito y de código abierto con vista previa en tiempo real, en tu navegador o en tu escritorio.

Descargar Phoenix Code Abrir editor de SVG