Acerca de esta herramienta
Distingue las coordenadas internas del tamaño visible. Introduce un viewBox para consultar su origen y dimensiones o rellena sus cuatro valores para generar el atributo sin necesitar un archivo SVG.
Cómo usarla
- Introduce un viewBox o lee sus coordenadas desde un archivo o código SVG.
- Revisa X mínimo, Y mínimo, anchura y altura internas.
- Ajusta el área y, si quieres comparar proporciones, introduce las dimensiones visibles.
- Copia el atributo viewBox generado y comprueba que el dibujo siga siendo visible por completo.
Funciones
- Admite orígenes positivos y negativos. La anchura y la altura internas deben ser mayores que cero.
- Muestra la proporción; por ejemplo, 0 0 800 600 corresponde a 4:3.
- Compara el área interna y las dimensiones visibles para identificar escalas uniformes o proporciones distintas.
El sistema de coordenadas
- El orden de viewBox es min-x, min-y, width, height: los dos primeros valores fijan el origen y los otros dos, las dimensiones del área.
- Por ejemplo, -100 -50 200 100 empieza en (-100, -50), tiene 200 de ancho y 100 de alto y una proporción de 2:1.
- Con un área visible de 400 × 300 y viewBox 0 0 800 600, cada unidad interna equivale a 0,5 píxeles CSS en ambos ejes. Si las proporciones difieren, preserveAspectRatio determina los márgenes o el recorte.
Seguridad de los SVG
La vista previa utiliza una copia estática filtrada. No ejecuta scripts, eventos de clic ni animaciones, ni carga imágenes, fuentes o estilos externos. Se eliminan referencias externas, páginas incrustadas y contenido no compatible, por lo que puede diferir del original. No se admiten documentos con DOCTYPE ni entidades personalizadas.
Los archivos y el código SVG UTF-8 admiten hasta 2 MiB, 20000 nodos, incluidos elementos y texto, y 96 niveles de anidamiento. Simplifica los archivos que superen estos límites.
Privacidad
El SVG se procesa únicamente en tu navegador y no se sube al servidor.
La herramienta no guarda automáticamente la entrada ni los resultados. Descarga lo que necesites antes de borrar o salir y conserva el archivo original.
Preguntas frecuentes
¿Qué significan los cuatro valores de viewBox?
Son X mínimo, Y mínimo, anchura interna y altura interna. El origen puede ser negativo; ambas dimensiones deben ser positivas.
¿Qué significa viewBox="0 0 100 100"?
Define un área de 100 × 100 desde (0, 0), con proporción 1:1. El tamaño exterior determina los píxeles visibles.
¿Cómo se relacionan viewBox, width y height?
viewBox fija el área interna; width y height fijan el área visible. El navegador adapta una a la otra.
¿Qué es preserveAspectRatio?
Determina la alineación y la escala cuando las proporciones difieren. meet muestra todo, quizá con márgenes; slice llena el área, quizá recortando; none escala cada eje por separado.