Categoría: Desarrollo
Editor de viewBox SVG
Lee y reescribe el viewBox de un SVG a mano
Pega marcado SVG, carga su viewBox actual (o su ancho y alto si no tiene ninguno), y ajusta el min-x, min-y, ancho y alto para recortar, añadir margen o reanclar el dibujo, y copia el SVG reescrito.
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <rect width="120" height="120" rx="16" fill="#0f766e" /> <circle cx="60" cy="60" r="34" fill="#f4d35e" /> </svg>
No se sube nada. El marcado se analiza y reescribe únicamente en esta página.
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
El atributo viewBox es lo que mapea el sistema de coordenadas interno de un SVG sobre el espacio en el que se renderiza, así que cambiarlo es la forma de recortar parte de un icono, añadirle margen alrededor o desplazar su origen sin tocar un solo trazado. Editar cuatro números a mano en un editor de texto es delicado y fácil de hacer mal; esta herramienta analiza el SVG que pegas, rellena los cuatro campos del viewBox con lo que encuentra, y reescribe el marcado en vivo a medida que los cambias, con una vista previa para que veas el recorte antes de copiarlo.
Cómo se usa
- Pega marcado SVG que incluya una etiqueta <svg>.
- Pulsa "Cargar viewBox actual" para rellenar los cuatro campos, o escribe tu propio min-x, min-y, ancho y alto.
- Revisa la vista previa y copia el marcado SVG reescrito.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Esto sube mi SVG a algún sitio?
- No. El marcado se analiza y reescribe mediante comparación de texto simple en la pestaña de tu navegador; nada se envía a un servidor.
- ¿Qué pasa con los atributos width y height?
- Se dejan exactamente igual. Cambiar el viewBox reescala lo que se dibuja dentro del viewport existente, de la misma forma en que lo aplica un navegador, en lugar de redimensionar el propio elemento.
- ¿Por qué la vista previa a veces se ve vacía?
- Un ancho o alto de cero, o un viewBox que no se superpone con el dibujo, lo recorta hasta la nada. Amplía el recuadro o revisa los valores de min-x/min-y.