Visor SVG

Editor de código SVG y vista previa en línea

Código SVG
Caracteres: 0Bytes: 0
Vista previa SVG
La vista previa SVG aparecerá aquí

¿Qué es el Visor SVG?

El Visor SVG es una herramienta en línea para editar código SVG y ver vista previa en tiempo real. Permite escribir o pegar código SVG directamente y ver el resultado renderizado al instante. SVG (Gráficos Vectoriales Escalables) es un formato de imagen vectorial basado en XML, ampliamente utilizado en diseño web, creación de iconos y visualización de datos.

Esta herramienta admite vista previa en tiempo real, visualización de código fuente, descarga de archivos SVG y más.

Cómo usar

Uso básico

  1. Escribe o pega código SVG en el editor izquierdo
  2. El panel derecho muestra la renderización SVG en tiempo real
  3. Haz clic en "Fuente" para ver el código SVG formateado
  4. Haz clic en "Descargar" para guardar el SVG como archivo
  5. Haz clic en "Copiar SVG" para copiar el código al portapapeles

Características

Vista previa en vivoVe el SVG renderizado mientras escribes el código
Vista de códigoCambia para ver el código SVG formateado
Descargar archivoGuarda el código SVG como archivo .svg con un clic
Privacidad seguraTodo el procesamiento ocurre localmente en tu navegador

Ejemplos SVG

Círculo

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#2563eb" />
</svg>

Rectángulo

<svg width="120" height="80" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="60" rx="8" fill="#10b981" />
</svg>

Estrella

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#f59e0b" />
</svg>

Preguntas frecuentes

¿Qué es SVG?

SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML estandarizado por el W3C. A diferencia de los formatos rasterizados como PNG y JPG, SVG usa fórmulas matemáticas para describir gráficos, permitiendo escalado sin pérdida a cualquier tamaño.

¿Cuáles son las ventajas de SVG?

Los archivos SVG son pequeños, escalables infinitamente sin pérdida de calidad, soportan animación e interactividad, pueden manipularse con CSS y JavaScript, y son amigables con el SEO. Son ideales para iconos, logotipos, gráficos de datos y diseño responsivo.

¿Cómo usar SVG en una página web?

Puedes usar SVG mediante etiquetas img, CSS background-image, SVG inline (directamente en HTML), o etiquetas object/embed. El SVG inline es el enfoque más flexible.

¿Es seguro usar esta herramienta?

Completamente seguro. Todo el análisis y renderizado del código SVG ocurre localmente en tu navegador. No se sube ningún dato a ningún servidor.

Herramientas relacionadas

Selector de Color

Selector de color en línea gratuito con conversión de formatos HEX, RGB, HSL. Genera paletas de colores, obtiene colores web, mejora la eficiencia de diseño.

Generador de Gradientes

Generador de gradientes CSS en línea gratuito para crear fondos de gradiente lineal y radial. Ajuste visual de colores, copia código CSS con un clic.

Generador de Código QR

Generador de código QR en línea gratuito soportando texto, URL, tipos vCard. Personaliza estilo, color, tamaño, descarga imágenes de alta calidad instantáneamente.

Foto de Identificación

Creador de fotos de identificación en línea gratuito con eliminación de fondo por IA. Admite estándares europeos (foto ID UE, pasaporte UE, etc.), genera fotos de identificación estándar con un clic. Procesamiento local en navegador protege privacidad.

Imagen a Base64

Convertidor de imagen a Base64 en línea gratuito con carga arrastrar y soltar, vista previa en tiempo real y múltiples formatos. Incrusta imágenes en código, reduce solicitudes HTTP.