Visor de SVG
Abre un archivo .svg o pega código SVG y míralo renderizado al instante. Edita el código con vista previa en vivo, amplía los detalles, compruébalo sobre fondos claros, oscuros o de cuadros y descárgalo como SVG o PNG.
Última actualización:
Cómo usar Visor de SVG
- Abre o pega tu SVG: haz clic en Abrir archivo SVG, suelta un archivo en la vista previa o pega el código en el editor.
- Observa cómo se actualiza la vista previa mientras escribes. Los errores de sintaxis se muestran bajo el editor con el número de línea.
- Amplía y desplázate con los botones o el control deslizante de zoom; desplaza el área de vista previa para moverte por una imagen ampliada.
- Cambia el fondo a cuadros para ver las zonas transparentes, o a oscuro para comprobar ilustraciones claras.
- Descarga el archivo editado como .svg, o exporta un PNG a 1x, 2x o 4x de su tamaño natural.
Cómo funciona el tamaño de un SVG: width, height y viewBox
Un SVG es un archivo de texto que describe formas en XML. Dos cosas distintas controlan lo grande que se ve. El atributo viewBox define la cuadrícula de dibujo interna con cuatro números, min-x min-y width height: una forma en x="60" dentro de un viewBox="0 0 120 120" queda exactamente en el centro. Los atributos width y height fijan el tamaño mostrado en la página. Cuando están ambos, la cuadrícula se estira para encajar, conservando por defecto su relación de aspecto (preserveAspectRatio="xMidYMid meet").
Este visor calcula el tamaño natural igual que los navegadores: usa width y height cuando existen (convirtiendo unidades como pt, mm o in a píxeles CSS), recurre al tamaño del viewBox cuando faltan y usa el valor predeterminado del navegador, 300 × 150, cuando no hay ninguno. Un ancho en porcentaje no puede resolverse sin un contenedor, así que se trata como si faltara.
Conversiones de unidades usadas para las dimensiones del SVG
| Unidad | Significado | En píxeles CSS |
|---|---|---|
px o sin unidad | Píxel CSS (unidad de usuario) | 1 |
pt | Punto, 1/72 de pulgada | 1.333 |
pc | Pica, 12 puntos | 16 |
in | Pulgada | 96 |
cm | Centímetro | 37.795 |
mm | Milímetro | 3.7795 |
em | Tamaño de fuente (aquí se asume 16px) | 16 |
Soluciones rápidas para SVG que se ven mal
- No se ve nada: asegúrate de que la etiqueta raíz tenga
xmlns="http://www.w3.org/2000/svg"cuando el archivo se usa como imagen. Este visor lo añade para la vista previa, pero otros programas quizá no. - La ilustración aparece cortada: algunas formas quedan fuera del viewBox. Amplía el viewBox o mueve las formas. Las herramientas de diseño a veces exportan un viewBox que empieza en coordenadas negativas, lo cual es correcto.
- El icono no se escala con CSS: conserva el
viewBoxy quita los valores fijos dewidth/height; luego dale tamaño con CSS. - Las fuentes se ven distintas en otros sitios: el texto usa las fuentes que tenga instaladas el visor. Convierte el texto en contornos en tu editor para un renderizado exacto.
- Archivo grande: los metadatos del editor, los números con muchos decimales y las capas ocultas añaden peso. Pasa el archivo por un optimizador de SVG antes de publicarlo.
- XML no válido: un
&suelto en un texto o un atributo debe escribirse como&, y todas las etiquetas deben cerrarse (<path … />).
Preguntas frecuentes
¿Cómo abro un archivo SVG online?
Haz clic en Abrir archivo SVG y elige el .svg de tu dispositivo, o arrástralo al área de vista previa. Tu navegador lee el archivo localmente y nunca lo sube.
¿Por qué mi SVG aparece en blanco?
Las causas habituales son que falte el atributo xmlns="http://www.w3.org/2000/svg", formas dibujadas fuera del viewBox, ilustraciones blancas sobre fondo blanco o fill configurado como none. Prueba el fondo oscuro o de cuadros y revisa los números del viewBox que aparecen en el panel de información.
¿El visor ejecuta JavaScript dentro del SVG?
No. La vista previa se renderiza como imagen, y los navegadores nunca ejecutan scripts ni cargan recursos externos dentro de los SVG mostrados como imágenes. Eso hace que sea seguro inspeccionar archivos de origen desconocido.
¿Cuál es la diferencia entre width/height y viewBox?
El viewBox define el sistema de coordenadas interno (min-x, min-y, ancho, alto) en el que se dibujan las formas. Los atributos width y height fijan el tamaño mostrado. Si faltan width y height, se usa el tamaño del viewBox como tamaño natural.
¿Puedo convertir el SVG a PNG aquí?
Sí. Elige una escala (1x, 2x o 4x) y haz clic en Descargar PNG. El SVG se dibuja en un lienzo a ese tamaño, con fondo transparente a menos que elijas un color de fondo sólido.
¿Por qué no aparecen las fuentes o imágenes externas en la vista previa?
Los SVG mostrados como imágenes no pueden cargar archivos externos como fuentes web o imágenes enlazadas. Incrusta las imágenes como data URI y convierte el texto en trazados para obtener un archivo que se vea igual en todas partes.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.