¿Es gratuito este visor SVG?

Sí, esta herramienta es completamente gratuita para uso personal y comercial.

¿Cómo puedo editar SVG en línea gratis?

Pega tu código SVG directamente en el editor o sube el archivo. Cualquier cambio que hagas se refleja de inmediato en la vista previa sin necesidad de instalar software.

¿Puedo editar código SVG y ver los cambios en vivo?

Sí. Las ediciones en el editor de código se reflejan al instante en el panel de vista previa, para que puedas ajustar trazados, colores y dimensiones en tiempo real.

¿Cómo convertir SVG a PNG online?

Esta herramienta no exporta a PNG, y los conversores de imagen del sitio no admiten archivos SVG como entrada. Para rasterizar un SVG usa un renderizador de línea de comandos como rsvg-convert (rsvg-convert -w 512 -o icon.png icon.svg) o Inkscape (inkscape icon.svg --export-type=png).

¿Puedo cargar un SVG desde una URL?

No directamente: no hay campo para URL. Abre el enlace en tu navegador, guarda el archivo .svg (o copia el marcado desde el código fuente) y luego ábrelo aquí o pega el código en el editor.

Visor y Editor SVG en línea gratuito

Abre, edita, formatea y minifica SVG online gratis: inspecciona el código con vista previa en vivo y zoom, todo procesado en tu navegador. Visor y editor SVG.

Abre cualquier archivo SVG o pega marcado SVG para verlo al instante en el panel de vista previa en vivo mientras editas el código lado a lado. Este visor y editor SVG online renderiza gráficos vectoriales en tu navegador sin subir archivos, te permite hacer zoom e inspeccionar formas, y formatea o minifica el código fuente SVG, todo procesado localmente.

Arrastra y suelta el archivo SVG aquí

o haz clic para buscar

Código

sample.svg • 673

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
    </linearGradient>
  </defs>
  <circle cx="100" cy="100" r="90" fill="url(#grad1)" />
  <path d="M60 100 L90 130 L140 70" fill="none" stroke="white" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" />
  <text x="50%" y="180" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="24" font-weight="bold">SVG Viewer</text>
</svg>

Vista previa

100%

¿Por qué usar Visor SVG online?

Abre archivos SVG o pega su código, edita viendo el resultado renderizado y formatea o minifica el marcado vectorial sin instalar programas de diseño ni herramientas de escritorio.

Acerca de

SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML para gráficos bidimensionales, con soporte para interactividad y animación. Esta herramienta muestra el código SVG junto a una vista previa renderizada, así que puedes editar el código, comprobar el resultado y reducir el tamaño del archivo sin salir del navegador; resulta útil para depurar iconos o retocar ilustraciones vectoriales.

Características

Vista previa mientras editas

Cada cambio en el editor de código se renderiza al momento en el panel de vista previa. Puedes ampliar o reducir del 10 % al 500 % y desplazarte por la vista previa para revisar trazados, formas y estilos.

Se procesa en tu navegador

El SVG se lee, se renderiza y se formatea con JavaScript en tu navegador. Los archivos que abres y el código que pegas no se suben a ningún servidor.

Formatear, minificar y descargar

«Formatear» vuelve a sangrar el marcado con 4 espacios y «Minificar» elimina los comentarios y los espacios entre etiquetas. Puedes copiar el resultado o descargarlo como archivo .svg.

Cómo usar el Visor y Editor SVG

1
Carga tu SVG
Abre un archivo .svg, arrástralo al editor o pega el código SVG directamente en el editor.
2
Vista previa en tiempo real
El panel derecho renderiza tu SVG a medida que escribes. Amplía o reduce y desplázate por la vista previa para inspeccionar formas, trazados y estilos.
3
Formatea o minifica el código
Usa «Formatear» para sangrar el marcado con 4 espacios, o «Minificar» para quitar comentarios y espacios en blanco y reducir el tamaño del archivo.
4
Copia o descarga
Copia el código SVG optimizado al portapapeles o descarga el archivo .svg para usarlo en tu proyecto.

Referencias

W3C — SVG 2
La especificación oficial de W3C que define el formato SVG, sus elementos y atributos.
MDN — SVG
Referencia de MDN para elementos SVG, atributos y cómo se renderizan los gráficos vectoriales en el navegador.

Herramientas relacionadas

Imagen a Base64

Codifica un SVG o imagen raster en un data URI Base64 para incrustar en línea.

Conversor PNG

Convierte imágenes JPG, WebP, BMP, GIF o ICO a PNG.

Visor XML

Inspecciona y formatea la estructura XML que subyace a todo documento SVG.

Conversor de colores

Convierte valores de color HEX, RGB y HSL usados en rellenos y trazos SVG.

Preguntas frecuentes

¿Es gratuito este visor SVG?: Sí, esta herramienta es completamente gratuita para uso personal y comercial.
¿Guardan mis archivos SVG?: No. El SVG se procesa con JavaScript en tu navegador; los archivos que abres y el código que pegas no se suben a ningún servidor.
¿Cómo puedo editar SVG en línea gratis?: Pega tu código SVG directamente en el editor o sube el archivo. Cualquier cambio que hagas se refleja de inmediato en la vista previa sin necesidad de instalar software.
¿Puedo editar código SVG y ver los cambios en vivo?: Sí. Las ediciones en el editor de código se reflejan al instante en el panel de vista previa, para que puedas ajustar trazados, colores y dimensiones en tiempo real.
¿Cómo convertir SVG a PNG online?: Esta herramienta no exporta a PNG, y los conversores de imagen del sitio no admiten archivos SVG como entrada. Para rasterizar un SVG usa un renderizador de línea de comandos como rsvg-convert (rsvg-convert -w 512 -o icon.png icon.svg) o Inkscape (inkscape icon.svg --export-type=png).
¿Puedo cargar un SVG desde una URL?: No directamente: no hay campo para URL. Abre el enlace en tu navegador, guarda el archivo .svg (o copia el marcado desde el código fuente) y luego ábrelo aquí o pega el código en el editor.