SVG zuschneiden

Über das Zuschneiden eines SVG

Ein SVG ist kein Bild mit einem Rand. Es ist eine Zeichnung plus eine viewBox — vier Zahlen, die sagen, welchen Teil des Koordinatenraums die Datei zeigt.

Der Rand kommt aus diesen vier Zahlen. Ein Symbol, das mit 512 × 512 exportiert wurde und dessen Form in der Mitte sitzt, hat auf jeder Seite leeren Raum, und kein Skalieren wird ihn los: Verkleinern Sie die Datei, verkleinern Sie den Rand gleich mit. Das Logo schwebt weiterhin in der Mitte seines eigenen Kastens und weigert sich weiterhin, mit dem Text daneben auf einer Linie zu stehen.

Dieses Werkzeug ändert die viewBox und sonst nichts. Es findet heraus, wo die Zeichnung wirklich anfängt und aufhört, zieht den Kasten eng darum und gibt Ihnen ein SVG zurück — dieselben Pfade, dieselben Verläufe, dieselben Gruppen, in einem Kasten, der ihnen passt.

Es schaut auf das Bild, nicht auf den Code

Der naheliegende Weg, die Kanten eines SVG zu finden, ist, den Browser nach dem Begrenzungsrahmen aller Formen zu fragen. Dieser Weg ist in zwei ganz gewöhnlichen Fällen falsch, und genau wegen dieser beiden sucht man nach so einem Werkzeug:

• Ein weißes Hintergrundrechteck. Es ist eine Form, also zählt es, also ist der Begrenzungsrahmen die ganze Fläche und es wird nichts abgeschnitten.
• Weichzeichner und Schlagschatten. Ein Filter malt weit außerhalb der Form, die ihn erzeugt hat, ein geometrischer Rahmen schneidet die weiche Kante also ab.

Deshalb zeichnet dieses Werkzeug das SVG zuerst und schaut sich dann das Ergebnis an — so wie Ihr Auge es auch tut. Ein weißes Rechteck liest sich als leer. Ein Schlagschatten liest sich als Inhalt und bleibt. Was Sie sehen, wird gemessen.

Transparent oder weiß

• Transparent oder weiß *(die übliche Wahl)* — alles, was Sie als „leer" bezeichnen würden, fällt weg: vollständig transparente Pixel genauso wie weiße. Das wollen Sie bei einem Symbol, das auf einer weißen Zeichenfläche exportiert wurde, oder bei einem Logo mit weißer Platte dahinter.
• Nur transparent — Weiß gilt als Teil der Zeichnung. Nehmen Sie das, wenn das Weiß wirklich zum Entwurf gehört: eine weiße Wortmarke, ein weißer Hintergrund, der bleiben muss, oder Grafik, die auf einer dunklen Seite sitzen soll.

Die Toleranz entscheidet, wie nah an leer noch als leer zählt. Exporte sind selten rein: ein Hintergrund kann #fefefe sein, eine Kante ganz leicht durchsichtig. Erhöhen Sie die Toleranz, wenn nichts abgeschnitten wurde; senken Sie sie, wenn ein blasser Teil der Zeichnung weg ist.

Der Rand

Rand stehen lassen gibt auf allen vier Seiten einen gewählten Abstand zurück, gemessen in den Einheiten des SVG — denselben Zahlen, die auch die viewBox benutzt.

Null ergibt den engstmöglichen Kasten, und genau das wollen Sie bei einem Symbol in einer Schaltfläche oder einem Logo in einem Raster, wo das Layout über die Abstände entscheiden soll. Ein kleiner Rand lohnt sich, wenn die Grafik eine Kontur hat, die ein enger Schnitt anschneiden würde, oder wenn die Datei irgendwohin geht, wo sie noch einmal beschnitten wird.

Breite und Höhe kommen mit

Hatte das SVG width- und height-Attribute, werden sie um denselben Faktor skaliert wie der Kasten, in der Einheit, in der sie geschrieben waren. Eine Zeichnung, die in einer 100-mm-Fläche 40 mm breit war, kommt 40 mm breit heraus.

Das ist wichtig: Die Grafik ändert beim Zuschneiden ihre Größe nicht. Nur der leere Raum darum herum verschwindet. Ein SVG ohne width oder height bleibt ohne beides und passt sich weiterhin dem an, worin es steckt.

Nichts wird hochgeladen

Die Datei wird in Ihrem Browser gelesen, gezeichnet und neu geschrieben. Sie erreicht nie einen Server, worauf es ankommt, wenn die Datei ein unveröffentlichtes Logo, eine Kundenmarke oder Grafik unter Geheimhaltung ist.

Es bedeutet außerdem: kein Warten auf einen Upload, keine Größenbegrenzung, und das Werkzeug funktioniert offline, sobald die Seite geladen ist.

Wofür Leute es benutzen

• Ein Symbol, das mit fester Zeichenfläche exportiert wurde und in einer Schaltfläche nicht ausgerichtet werden kann
• Ein Logo mit weißer Platte dahinter, das auf einen farbigen Kopfbereich soll
• Grafik aus Figma, Illustrator oder Inkscape, die mit der ganzen Zeichenfläche drumherum herauskam
• Ein SVG für ein Sprite-Sheet oder eine Icon-Schrift, wo jedes Zeichen einen engen Kasten braucht
• Eine Zeichnung für eine Schneidemaschine oder einen Laser, wo der Kasten der Datei das Material ist
• Einen Satz Symbole ausrichten, indem jedes auf seinen eigenen Inhalt zugeschnitten wird

Gut zu wissen

• Der Schnitt wird aus einer Darstellung gemessen, seine Genauigkeit liegt also bei etwa einem gezeichneten Pixel — der Kasten wird um eine Kleinigkeit erweitert, damit nichts angeschnitten wird
• Was außerhalb der ursprünglichen viewBox gezeichnet war, war schon vorher unsichtbar und bleibt draußen
• Echter Text wird mit den Schriften gemessen, die Ihr Browser hat; wandeln Sie Text vorher in Pfade um, wenn es genau sitzen muss
• Ein <image> oder ein Verweis auf eine andere Datei kann hier nicht gezeichnet werden und zählt nicht mit
• Kommentare, <defs>, Metadaten und IDs überleben alle — das ist ein Neuzuschnitt, keine Aufräumaktion
• Um stattdessen ein Bitmap zu beschneiden, gibt es Bild zuschneiden, das ebenfalls Ränder automatisch entfernt
• Um das Ergebnis danach in ein PNG zu verwandeln, gibt es SVG in PNG

So wird es benutzt

• Auf Klicken zum Hochladen klicken oder das SVG auf das Feld ziehen
• Der Schnitt wird sofort berechnet — der gestrichelte Rahmen links zeigt, was bleibt
• Transparent oder weiß stehen lassen, außer das Weiß gehört zum Entwurf
• Die Toleranz erhöhen, wenn nichts abgeschnitten wurde; senken, wenn etwas Blasses weg ist
• Einen Rand setzen, wenn auf allen vier Seiten Platz bleiben soll
• Auf SVG herunterladen drücken oder mit SVG-Code kopieren direkt in eine Seite einfügen

Verwandte Werkzeuge

• Bild zuschneiden — dieselbe Arbeit für PNG und JPG
• SVG in PNG — aus dem zugeschnittenen SVG ein Bitmap machen
• SVG in JPG — ein SVG als flaches Bild
• Bild in SVG — ein Logo oder Symbol in Vektorpfade nachzeichnen
• Favicon-Generator — aus dem Ergebnis ein Seitensymbol machen
• Bildgröße ändern — stattdessen ein Bitmap skalieren