Visor SVG

Entrada SVG
0 caracteres
Vista previa local, no pegues contenido de script de fuentes no confiables

Visor SVG online. Pega código SVG para previsualizar gráficos vectoriales renderizados al instante, con soporte para copiar y descargar archivos .svg. Todo el procesamiento es local y seguro.

Relacionado

Convertir Imagen

Compresor de Imágenes

Redimensionar Imágenes

Recortar Imagen

Editor de imagen

Generador ICO

¿Qué es SVG?

SVG (Gráficos Vectoriales Redimensionables) es un formato de imagen basado en XML para describir formas geométricas. A diferencia de JPG y PNG, que son mapas de bits (matrices de píxeles), SVG usa etiquetas como <rect>, <circle> y <path> para describir trazados matemáticos de formas, lo que significa que se mantienen nítidos a cualquier tamaño sin pixelarse.

**¿Cuándo usar SVG?** Logos, iconos de UI, diagramas de flujo, marcadores de mapas, gráficos, decoraciones animadas e ilustraciones reutilizables: cualquier escenario que exija claridad, personalización de color, escalabilidad o control CSS es ideal para SVG.

**SVG frente a Canvas:** Canvas es una API de dibujo imperativa donde la salida se convierte en píxeles; SVG son nodos DOM declarativos donde puedes modificar atributos, estilos CSS y adjuntar eventos en cualquier momento. Usa SVG para iconos, elementos UI y gráficos interactivos; usa Canvas para juegos, partículas y pixel art.

**Componentes comunes:** Elemento raíz &lt;svg&gt;, grupos &lt;g&gt;, trazados &lt;path&gt; (el más usado con el atributo d), degradados (&lt;linearGradient&gt;/&lt;radialGradient&gt;), filtros (&lt;filter&gt;) y animaciones (SMIL/CSS/JS).

**¿Cómo previsualizarlo?** Pega tu código fuente SVG en el editor de esta página y verás el renderizado en vivo a la derecha. El diseño de panel dividido ajustable te ayuda a verificar en segundos que tu código SVG es correcto y se muestra como esperas.

Casos de uso

  • Desarrolladores frontend previsualizando rápidamente el renderizado de código de iconos SVG
  • Verificar la visualización de SVG después de copiar de Figma, Sketch u otras herramientas de diseño
  • Previsualizar cambios en vivo mientras se depuran trazados, colores o atributos viewBox de SVG
  • Revisar y validar código SVG antes de integrarlo en el código del proyecto

Cómo Usar

  1. Pega el código fuente SVG en el editor izquierdo, o haz clic en "Cargar ejemplo" para ver una demostración
  2. El panel derecho renderiza el gráfico vectorial al instante: edita el código para ver actualizaciones en vivo
  3. Cuando estés satisfecho, haz clic en copiar para copiar el código, o descarga como .svg con un nombre personalizado

Características

  • Vista previa en vivo: Pega o edita código SVG para renderizar gráficos vectoriales al instante, lo que ves es lo que obtienes
  • Diseño dividido: Paneles lado a lado ajustables arrastrando en escritorio, cambio por pestañas en móvil
  • Exportación con un clic: Copia el código SVG al portapapeles o descarga con nombre personalizado como .svg estándar
  • Procesamiento local: Todo el análisis y renderizado ocurre en el navegador: tu código nunca sale de tu dispositivo
  • Fondo transparente: El fondo de tablero de ajedrez muestra claramente las áreas transparentes y los detalles de los bordes
  • Contador de caracteres: Contador de caracteres en tiempo real con ejemplo integrado para empezar rápidamente

Preguntas Frecuentes

¿Cómo previsualizo código SVG en línea?

Pega tu código fuente SVG en el panel editor izquierdo y el panel derecho renderizará el gráfico vectorial al instante. Puedes editar el código directamente en el editor con actualizaciones en vivo, lo que facilita depurar iconos frontend y verificar efectos.

¿Cómo descargo y guardo el SVG previsualizado?

Haz clic en el botón de descarga en la esquina superior derecha del panel de vista previa. Puedes personalizar el nombre del archivo antes de guardarlo como un archivo .svg estándar. También puedes hacer clic en el botón de copiar para copiar el código SVG directamente al portapapeles.

¿Mi código SVG se sube a un servidor? ¿Es seguro?

No. Todo el análisis y renderizado de SVG ocurre localmente en tu navegador. Tu código SVG nunca se sube a ningún servidor: se procesa completamente en tu dispositivo y se descarta cuando te vas, eliminando cualquier riesgo de filtrado de iconos no publicados.

¿Admite código SVG copiado de software de diseño?

Sí. El código SVG copiado de Figma, Sketch, Adobe Illustrator u otras herramientas de diseño se puede pegar directamente para previsualizar. Recomendamos verificar el resultado renderizado primero para confirmar que es correcto antes de integrarlo en tu proyecto.

¿Por qué no se muestra mi SVG? ¿Causas comunes?

Problemas comunes: ① Falta la declaración del espacio de nombres xmlns="http://www.w3.org/2000/svg"; ② Etiquetas no cerradas en el código; ③ Caracteres especiales sin escape adecuado; ④ Errores de sintaxis en el propio SVG. Por favor revisa estos puntos.

¿Puedo personalizar el nombre del archivo SVG descargado?

Sí. Después de hacer clic en el botón de descarga, aparecerá un campo de entrada para el nombre del archivo. Puedes personalizar el nombre (por defecto image.svg), luego presiona Enter o haz clic en Confirmar para descargar. La herramienta añade automáticamente la extensión .svg si falta.

Glosario

viewBox
El sistema de coordenadas interno de SVG con el formato "x y width height". El común "0 0 24 24" significa 24 unidades de ancho y alto. El tamaño de visualización real de un SVG se controla mediante los atributos width/height o CSS externo.
Espacio de nombres XML (namespace)
SVG debe declarar xmlns="http://www.w3.org/2000/svg" para que los navegadores lo reconozcan correctamente como documento SVG. Falta el espacio de nombres es la razón más común por la que SVG no se muestra en HTML.MDN - Espacio de nombres SVG
Atributo d de path
El conjunto de comandos de trazado, que consiste en letras como M/L/C/Q/H/V/Z más coordenadas. M=Mover a, L=Línea a, C=Bézier cúbica, Q=Bézier cuadrática, Z=Cerrar trazado. Los iconos complejos a menudo se expresan con un solo elemento path y su atributo d.
currentColor
Una palabra clave de CSS que se refiere a la propiedad color del elemento actual. Establecer fill o stroke en currentColor en SVG permite cambiar los colores de los iconos mediante cambios de color CSS externo, un patrón común en sistemas de diseño.

Referencia rápida de elementos SVG comunes

ElementoTipoPropósito
<svg>RaízContenedor de todo el contenido SVG, obligatorio
<rect>Forma básicaRectángulos, rectángulos redondeados
<circle> / <ellipse>Forma básicaCírculos / elipses
<line> / <polyline>Forma básicaLíneas / polilíneas
<polygon> / <path>TrazadoPolígonos / curvas arbitrarias (atributo d)
<text> / <tspan>TextoTexto incrustado en SVG
<g>GrupoAgrupar elementos para transformaciones unificadas
<defs> / <symbol>DefiniciónFormas y degradados reutilizables
<linearGradient> / <radialGradient>DegradadoRellenos de degradado lineal / radial
<use>ReferenciaReferenciar elementos de defs
<filter>FiltroEfectos avanzados como desenfoque, sombra

Comparación de SVG frente a formatos de mapa de bits

DimensiónSVG (Vectorial)PNG (Mapa de bits)JPG (Mapa de bits)
ComposiciónXML describe trazados geométricosMatriz de píxelesMatriz de píxeles (compresión DCT)
EscaladoSe mantiene nítido a cualquier tamañoSe pixel al ampliarSe pixel con artefactos visibles
Tamaño de archivoVaría según complejidad, logos normalmente < 10KBMedio (sin pérdida)Menor (con pérdida)
Transparencia✅✅❌
Animación✅ SMIL / CSS / JS❌ (requiere APNG)❌
Control de color CSS✅ currentColor / variables fill❌❌
Ideal paraIconos, logos, vectores UIRecursos transparentes, capturasFotos, degradados grandes

Authoritative References