Visor y editor de SVG online: código, vista previa y paths | We.Inc
Pega o abre un SVG y míralo junto a su código. Edita en vivo, revísalo sobre fondos claros, oscuros y de cuadros, inspecciona los comandos de los paths, límpialo y exporta a PNG o a un componente React.
Visor y editor de SVG
Pega código SVG o abre un archivo .svg y la imagen aparece junto a su código. Edita el código y la vista previa se redibuja mientras escribes. Cambia el fondo para revisar las zonas transparentes, haz zoom, lista todos los comandos de los paths, elimina lo que sobra del editor y descarga el resultado como SVG, PNG o componente React.
Qué puedes exportar
Formato
Para qué usarlo
SVG (limpio)
Webs, iconos, logos; el archivo más pequeño
PNG de 1x a 4x
Sitios que no aceptan SVG, como algunos clientes de correo y publicaciones en redes sociales
Componente React (JSX)
Usar el gráfico en línea en un proyecto de React o Next.js
Una vista de código y una vista previa en vivo, una al lado de la otra. No se sube nada: tu propio navegador lee y dibuja el archivo, y la vista previa se muestra como imagen, así que ningún script dentro del SVG puede ejecutarse.
Pega el marcado SVG en el cuadro de código, suelta un archivo encima o usa Abrir archivo. Hay un ejemplo cargado para que pruebes las herramientas enseguida.
Edita el código. La vista previa se actualiza mientras escribes y te avisa cuando el marcado está roto.
Cambia el fondo de la vista previa a blanco, oscuro o cuadros, y haz zoom del 25% al 800% para revisar los detalles finos.
Abre el inspector de paths para ver los comandos de cada path en palabras sencillas, como Mover a, Línea a y Curva cúbica, con sus números.
Pulsa Limpiar para quitar comentarios, metadatos y atributos del editor y redondear decimales largos; luego descárgalo como SVG o PNG, o cópialo como JSX.
Conserva el atributo viewBox y quita width y height fijos si quieres que el SVG se adapte a su contenedor con CSS.
Pon fill o stroke en currentColor en los iconos para que tomen el color de texto del elemento donde estén.
Dos decimales bastan para casi cualquier icono dibujado sobre una cuadrícula de 24 o 100 unidades. Más precisión casi solo añade bytes.
Nunca pegues un SVG de una fuente no fiable directamente en el HTML de tu página. El SVG en línea puede llevar scripts; cárgalo con una etiqueta img o límpialo antes.
Preguntas frecuentes
¿Cómo abro un archivo SVG?
Cualquier navegador moderno abre archivos SVG directamente, pero solo muestra la imagen. Para ver el código y la imagen juntos, abre el archivo en este visor con el botón Abrir archivo o arrástralo al cuadro de código.
¿Se sube mi SVG a algún sitio?
No. Tu navegador lee el archivo y lo dibuja localmente. Nada de lo que abres o escribes aquí se envía a un servidor.
¿Por qué mi SVG no muestra nada en la vista previa?
Las causas más habituales son que falte el atributo xmlns="http://www.w3.org/2000/svg" en el elemento svg, un viewBox que apunta lejos del dibujo o formas blancas sobre fondo blanco. Prueba el fondo de cuadros y revisa la línea de error bajo la vista previa.
¿Qué elimina el paso de limpieza?
Comentarios, la declaración XML, el doctype, los bloques de metadatos, los atributos propios de editores como Inkscape, Sketch y Serif, y los grupos vacíos. También redondea los decimales a la precisión que elijas. No fusiona paths ni cambia formas, así que el dibujo debería verse igual.
¿Cómo uso un SVG en React?
Copia la salida JSX. Convierte los atributos a los nombres de React, como stroke-width a strokeWidth y class a className, transforma las cadenas de style en objetos y pasa al elemento svg cualquier prop que le des al componente.
Cómo leer código SVG
Un archivo SVG es texto que describe formas. El elemento svg define un sistema de coordenadas con su viewBox: viewBox="0 0 24 24" significa que el dibujo usa una cuadrícula de 24 por 24 unidades, se muestre al tamaño que se muestre. Dentro, elementos como rect, circle y path dibujan sobre esa cuadrícula con rellenos y trazos.
La mayoría de los iconos se componen casi por completo de elementos path. El atributo d de un path es una lista de comandos de dibujo: M mueve el lápiz, L traza una línea recta, C traza una curva cúbica, A traza un arco y Z cierra la forma. Las mayúsculas usan coordenadas absolutas; las minúsculas son relativas al último punto. El inspector de esta página explica cada uno.
Por qué los SVG exportados pesan más de lo necesario
Las herramientas de diseño guardan información que les ayuda a reabrir el archivo: nombres de capas, ajustes del editor, posiciones de guías y coordenadas con seis o más decimales. Los navegadores lo ignoran todo. Quitarlo y redondear los números suele reducir bastante el tamaño del archivo, algo que importa cuando el mismo icono aparece en todas las páginas.
Esta página hace una limpieza prudente que nunca debería cambiar el aspecto de la imagen. Para cambios más profundos, como fusionar paths, la herramienta optimizadora de SVG llega más lejos.
Mover a
Línea a
Línea horizontal
Línea vertical
Curva cúbica
Cúbica suave
Curva cuadrática
Cuadrática suave
Arco
Cerrar path
un elemento <script>
un atributo de evento on…
un enlace javascript:
un <foreignObject> con HTML dentro
Blanco
Oscuro
Cuadros
El marcado no es XML válido.
El elemento raíz no es <svg>.
Pega un marcado que empiece por <svg y termine en </svg>.
Ese archivo supera los 5 MB. Abre un SVG más pequeño.
Se abrió {name}.
La vista previa no se ha cargado, así que todavía no hay nada que exportar.
Se guardó un PNG de {w} × {h}.
Código
Abrir archivo
Ejemplo
Código SVG
{bytes} bytes · {n} path
{bytes} bytes · {n} paths
Este SVG contiene {parts}. Aquí la vista previa es segura, pero no lo pegues en una página como HTML en línea sin quitar eso.
Vista previa
Zoom
Vista previa de tu SVG
Renderizado por tu navegador. Los scripts dentro del SVG no se ejecutan aquí.
Inspector de paths
Este SVG no tiene elementos path.
Path {n}
Comandos del path {n}
Comando
Números
(relativo)
Elige un path para resaltarlo en la vista previa y listar sus comandos.