Calculadora y Ajustador de ViewBox SVG｜Recorta y Optimiza tus Iconos

Esta herramienta online calcula automáticamente el viewBox óptimo para cualquier código SVG, eliminando espacios en blanco innecesarios y ajustando el marco al contenido visible. Ideal para diseñadores y desarrolladores que buscan optimizar sus iconos e ilustraciones SVG.

💡 Resumen de la Herramienta

• Cálculo Preciso del Bounding Box: Analiza todos los elementos gráficos (<path>, <rect>, <circle>, etc.) dentro de tu SVG para determinar sus límites exactos.
• Ajuste Automático del viewBox: Genera un nuevo atributo viewBox que se ajusta perfectamente al contenido, eliminando cualquier margen o padding sobrante.
• Código SVG Optimizado: Proporciona un código de salida limpio, eliminando los atributos width y height fijos para mejorar la escalabilidad y la capacidad de respuesta del SVG.
• Previsualización en Tiempo Real: Muestra una vista previa instantánea del SVG recortado, permitiéndote verificar el resultado al instante.
• Procesamiento Local: Tu código SVG no se envía a ningún servidor. Todo el cálculo se realiza de forma segura y privada en tu propio navegador.

🧐 Preguntas Frecuentes

Q. ¿Qué es el atributo viewBox en un SVG?

A. El viewBox ("caja de visualización") es uno de los atributos más importantes de un SVG. Define el sistema de coordenadas y la relación de aspecto del gráfico. Se compone de cuatro números: min-x, min-y, width y height. Esta herramienta calcula estos cuatro valores para que encajen perfectamente con el dibujo.

Q. ¿Por qué la herramienta elimina los atributos width y height?

A. Al definir un viewBox y omitir width y height fijos, el SVG se vuelve intrínsecamente responsivo. Se escalará automáticamente para llenar el contenedor en el que se coloque (por ejemplo, un <div>), manteniendo su relación de aspecto. Esta es una práctica recomendada para un uso flexible de los SVG en la web moderna.

📚 Conocimiento Extra: El "Bounding Box"

El corazón de esta herramienta es el cálculo del "bounding box" (caja delimitadora). En gráficos por computadora, un bounding box es el rectángulo más pequeño que contiene todos los puntos de un conjunto de formas. El navegador proporciona una función nativa llamada getBBox() que puede calcular este rectángulo para cualquier elemento SVG, teniendo en cuenta incluso el grosor de los trazos (stroke). Al obtener las coordenadas x e y y las dimensiones width y height de esta caja, podemos definir un viewBox perfecto que no desperdicia ni un solo píxel de espacio.