SVG recortado o con demasiado espacio vacío: cómo revisar el viewBox
Corrige bordes SVG cortados y márgenes excesivos. Entiende coordenadas viewBox, trazos y máscaras antes de deformar o volver a vectorizar un dibujo correcto.
Respuesta rápida
Un SVG recortado o muy pequeño suele tener un problema de lienzo. Revisa viewBox, transformaciones, máscaras y grosor de trazo. Ajusta la página al dibujo en un editor vectorial, conservando el margen necesario. Abre el archivo exportado; no elimines trazados correctos solo para encajar una vista previa.
Qué controla el viewBox
Sus cuatro valores indican x mínimo, y mínimo, anchura y altura dentro del sistema de coordenadas del dibujo. No tienen por qué coincidir con las dimensiones CSS visibles. Cambiar solo la anchura exterior puede aumentar la pantalla de visualización sin corregir los límites internos.
| Síntoma | Posible causa | Revisar |
|---|---|---|
| Falta una punta o letra | Dibujo fuera del área | viewBox y posición |
| Logo pequeño con borde amplio | Página demasiado grande | Ajuste al dibujo |
| Trazo grueso cortado | Grosor fuera de los límites | Margen para trazos y efectos |
| Editor correcto, exportación rota | Máscara o recorte | Estructura exportada |
Reparar sin deformar
- Duplica el original y ábrelo en un editor vectorial.
- Selecciona el dibujo visible. Busca objetos sueltos alejados que amplíen artificialmente la selección.
- Ajusta la página al contenido previsto, incluyendo espacio para trazos y márgenes intencionados.
- Comprueba máscaras y rutas de recorte. Un viewBox mayor no elimina automáticamente esas restricciones.
- Exporta el SVG y ábrelo en un navegador con anchuras pequeñas y grandes.
No copies coordenadas universales
Si los límites reales van de x=20 a 220 y de y=30 a 130, 20 30 200 100 describe ese rectángulo. Añade margen si un trazo o efecto sobresale. No pegues esas cifras en otro archivo sin medirlo: cada dibujo tiene coordenadas propias y puede incluir transformaciones.
Usa el comprobador SVG para revisar la estructura. Tras resolver el problema visual, el optimizador SVG reduce marcado innecesario, pero no repara automáticamente la mesa de trabajo. Conserva el viewBox y compara el resultado final.
Comprobaciones finales
- Ninguna forma importante toca un recorte accidental.
- Los márgenes transparentes son deliberados.
- Extremos de trazos y curvas permanecen visibles.
- La proporción es correcta en pantallas estrechas.
- Se revisó el archivo exportado, no solo el editor.
Preguntas frecuentes
¿Añadir width y height elimina los márgenes?
No necesariamente. Controlan el tamaño mostrado, pero los límites internos pueden seguir incluyendo espacio vacío.
¿Debo vectorizar otra vez el logo?
No si los trazados están bien. Corrige primero los límites del documento. Volver a trazar puede modificar geometría válida y mantener los mismos márgenes no deseados.