Recortar SVG

Sobre recortar un SVG

Un SVG no es una imagen con un borde. Es un dibujo más un viewBox: cuatro números que dicen qué parte del espacio de coordenadas está mostrando el archivo.

El margen sale de esos cuatro números. Un icono exportado a 512 × 512 con la forma en el centro tiene espacio vacío por los cuatro lados, y ningún cambio de tamaño lo quita: si encoges el archivo, encoges el margen junto con el dibujo. El logotipo sigue flotando en mitad de su propia caja y sigue negándose a alinearse con el texto de al lado.

Esta herramienta cambia el viewBox y nada más. Averigua dónde empieza y acaba el dibujo de verdad, ajusta la caja para que le quede justa y te devuelve un SVG: los mismos trazados, los mismos degradados, los mismos grupos, en una caja a su medida.

Mira el dibujo, no el código

La forma obvia de encontrar los bordes de un SVG es pedirle al navegador el rectángulo que engloba todas las formas. Esa forma falla en dos casos de lo más corrientes, y son justo los dos que traen a la gente a buscar una herramienta como esta:

• Un rectángulo blanco de fondo. Es una forma, así que cuenta, así que el rectángulo englobante es todo el lienzo y no se recorta nada.
• Desenfoques y sombras paralelas. Un filtro pinta bastante más allá de la forma que lo generó, de modo que un rectángulo geométrico corta el borde suave.

Por eso esta herramienta dibuja primero el SVG y luego mira el resultado, igual que hace tu ojo. Un rectángulo blanco se lee como vacío. Una sombra se lee como contenido y se conserva. Lo que ves es lo que se mide.

Transparente o blanco

• Transparente o blanco *(la opción de siempre)*: se va todo lo que llamarías «en blanco», tanto los píxeles totalmente transparentes como los blancos. Es lo que quieres para un icono exportado sobre una mesa de trabajo blanca, o un logotipo con una placa blanca detrás.
• Solo transparente: el blanco se trata como parte del dibujo. Úsalo cuando el blanco sea de verdad el diseño: un logotipo blanco, un fondo blanco que tiene que quedarse, o una imagen pensada para una página oscura.

La tolerancia decide cuánto de cerca del vacío sigue contando como vacío. Los archivos exportados rara vez son puros: un fondo puede ser #fefefe, un borde puede estar levemente transparente. Sube la tolerancia si no se recortó nada; bájala si se cortó una parte pálida del dibujo.

El margen

Margen que dejar devuelve una cantidad de espacio elegida por los cuatro lados, medida en las unidades del propio SVG: los mismos números que usa el viewBox.

Cero da la caja más ajustada posible, que es lo que quieres para un icono dentro de un botón o un logotipo en una cuadrícula, donde el espaciado lo debe decidir la maquetación. Vale la pena añadir un margen pequeño cuando el dibujo tiene un trazo que un recorte apretado cortaría, o cuando el archivo va a un sitio que lo volverá a recortar.

El ancho y el alto se ajustan también

Si el SVG tenía atributos width y height, se escalan por el mismo factor que la caja, en la unidad en la que estaban escritos. Un dibujo de 40 mm de ancho dentro de un lienzo de 100 mm sale con 40 mm de ancho.

Esto importa: el dibujo no cambia de tamaño al recortarlo. Solo desaparece el espacio vacío de alrededor. Un SVG sin width ni height se queda sin ellos, así que sigue adaptándose a aquello donde se ponga.

No se sube nada

El archivo se lee, se dibuja y se reescribe dentro de tu navegador. Nunca llega a un servidor, que es de lo que se trata cuando el archivo es un logotipo sin publicar, la marca de un cliente o una obra bajo acuerdo de confidencialidad.

También significa que no hay espera de subida ni límite de tamaño, y que la herramienta funciona sin conexión una vez cargada la página.

Para qué se usa

• Un icono exportado con una mesa de trabajo fija que no hay manera de alinear dentro de un botón
• Un logotipo con una placa blanca detrás que tiene que ir sobre una cabecera de color
• Material de Figma, Illustrator o Inkscape que salió con todo el lienzo alrededor
• Un SVG para una hoja de sprites o una fuente de iconos, donde cada glifo necesita una caja justa
• Un dibujo para una cortadora o un láser, donde la caja del archivo es el material
• Hacer que un conjunto de iconos case, recortando cada uno a su propio contenido

Conviene saber

• El recorte se mide sobre un dibujado, así que su precisión es de aproximadamente un píxel dibujado; la caja se amplía un pelo para asegurarse de no rebanar nada
• Lo que estuviera dibujado fuera del viewBox original ya era invisible, y se queda fuera
• El texto vivo se mide con las fuentes que tiene tu navegador; conviértelo a trazados antes si el ajuste tiene que ser exacto
• Un <image> o una referencia que apunte a otro archivo no se puede dibujar aquí, así que no cuenta
• Los comentarios, los <defs>, los metadatos y los id sobreviven todos: esto es un recorte, no una limpieza
• Para recortar un mapa de bits, usa Recortar imagen, que también quita márgenes automáticamente
• Para convertir después el resultado en PNG, usa SVG a PNG

Cómo se usa

• Haz clic en Haz clic para subir o arrastra tu SVG al recuadro
• El recorte se calcula al instante: el contorno de puntos de la izquierda muestra lo que se conserva
• Deja Transparente o blanco salvo que el blanco forme parte del diseño
• Sube la tolerancia si no se recortó nada, bájala si se cortó algo pálido
• Pon un margen si quieres dejar espacio por los cuatro lados
• Pulsa Descargar SVG, o Copiar el código SVG para pegarlo directamente en una página

Herramientas relacionadas

• Recortar imagen — el mismo trabajo para PNG y JPG
• SVG a PNG — convertir el SVG recortado en un mapa de bits
• SVG a JPG — un SVG como imagen plana
• Imagen a SVG — vectorizar un logotipo o un icono
• Generador de favicon — convertir el resultado en el icono de un sitio
• Redimensionar imagen — cambiar el tamaño de un mapa de bits