SVG bijsnijden

Over het bijsnijden van een SVG

Een SVG is geen plaatje met een rand. Het is een tekening plus een viewBox — vier getallen die zeggen welk deel van de coördinatenruimte het bestand laat zien.

De rand komt uit die vier getallen. Een pictogram dat op 512 × 512 is geëxporteerd met de vorm in het midden heeft aan alle kanten lege ruimte, en geen enkele schaalwijziging haalt die weg: maakt u het bestand kleiner, dan wordt de rand gewoon mee kleiner. Het logo zweeft nog steeds midden in zijn eigen doos en weigert nog steeds uit te lijnen met de tekst ernaast.

Deze tool verandert de viewBox en verder niets. Hij zoekt uit waar de tekening werkelijk begint en ophoudt, trekt de doos eromheen strak, en geeft u een SVG terug — dezelfde paden, dezelfde verlopen, dezelfde groepen, in een doos die eromheen past.

Hij kijkt naar het beeld, niet naar de code

De voor de hand liggende manier om de randen van een SVG te vinden, is de browser om het omhullende kader van alle vormen vragen. Die manier is fout in twee doodgewone gevallen, en precies die twee zijn de reden dat mensen zo'n tool gaan zoeken:

• Een witte achtergrondrechthoek. Dat is een vorm, dus telt hij mee, dus is het omhullende kader het hele doek en wordt er niets weggehaald.
• Vervaging en slagschaduw. Een filter tekent ver buiten de vorm die hem maakte, dus een meetkundig kader snijdt de zachte rand eraf.

Daarom tekent deze tool de SVG eerst en kijkt daarna naar het resultaat, net zoals uw oog dat doet. Een witte rechthoek leest als leeg. Een slagschaduw leest als inhoud en blijft. Wat u ziet, is wat er gemeten wordt.

Transparant of wit

• Transparant of wit *(de gebruikelijke keuze)* — alles wat u "leeg" zou noemen gaat eraf: volledig transparante pixels en witte net zo goed. Dit wilt u bij een pictogram dat op een wit werkblad is geëxporteerd, of een logo met een witte plaat erachter.
• Alleen transparant — wit wordt als deel van de tekening behandeld. Gebruik dit wanneer het wit echt het ontwerp is: een wit woordmerk, een witte achtergrond die moet blijven, of werk dat op een donkere pagina moet staan.

Tolerantie bepaalt hoe dicht bij leeg nog als leeg telt. Exports zijn zelden zuiver: een achtergrond kan #fefefe zijn, een rand kan heel licht doorschijnend zijn. Verhoog de tolerantie als er niets is weggehaald; verlaag hem als een bleek deel van de tekening is weggesneden.

De marge

Marge om te laten staan zet aan alle vier de kanten een gekozen hoeveelheid ruimte terug, gemeten in de eenheden van de SVG zelf — dezelfde getallen als die de viewBox gebruikt.

Nul geeft de strakst mogelijke doos, en dat wilt u bij een pictogram in een knop of een logo in een raster, waar de opmaak over de tussenruimte moet gaan. Een kleine marge is het waard wanneer de tekening een lijndikte heeft die een strakke snede zou aansnijden, of wanneer het bestand ergens heen gaat waar het nóg eens wordt bijgesneden.

Breedte en hoogte gaan mee

Had de SVG width- en height-attributen, dan worden die met dezelfde factor geschaald als de doos, in de eenheid waarin ze geschreven stonden. Een tekening die 40 mm breed was binnen een doek van 100 mm komt er 40 mm breed uit.

Dat is belangrijk: de tekening verandert niet van formaat wanneer u hem bijsnijdt. Alleen de lege ruimte eromheen verdwijnt. Een SVG zonder width of height blijft zonder, en schaalt dus nog steeds mee met datgene waarin hij wordt gezet.

Er wordt niets geüpload

Het bestand wordt in uw browser gelezen, getekend en herschreven. Het bereikt nooit een server, en daar gaat het om wanneer het bestand een nog niet uitgebracht logo is, het merk van een klant of werk onder geheimhouding.

Het betekent ook: geen wachttijd voor uploaden, geen groottelimiet, en de tool werkt offline zodra de pagina geladen is.

Waarvoor mensen het gebruiken

• Een pictogram dat met een vast werkblad is geëxporteerd en in een knop niet wil uitlijnen
• Een logo met een witte plaat erachter dat op een gekleurde kop moet staan
• Werk uit Figma, Illustrator of Inkscape dat er met het hele doek eromheen uit kwam
• Een SVG voor een sprite-sheet of een pictogramlettertype, waar elk teken een strakke doos nodig heeft
• Een tekening voor een snijmachine of laser, waar de doos van het bestand het materiaal is
• Een set pictogrammen laten kloppen door elk op zijn eigen inhoud bij te snijden

Goed om te weten

• De snede wordt gemeten aan een weergave, dus de nauwkeurigheid is ongeveer één getekende pixel — de doos wordt een haartje ruimer gemaakt zodat er zeker niets wordt afgeschaafd
• Wat buiten de oorspronkelijke viewBox getekend stond, was al onzichtbaar en blijft buiten beeld
• Echte tekst wordt gemeten met de lettertypen die uw browser heeft; zet tekst eerst om naar paden als het precies moet kloppen
• Een <image> of verwijzing naar een ander bestand kan hier niet getekend worden en telt dus niet mee
• Opmerkingen, <defs>, metadata en id's blijven allemaal bestaan — dit is opnieuw bijsnijden, geen opruimactie
• Om in plaats daarvan een bitmap bij te snijden gebruikt u Afbeelding bijsnijden, die ook randen automatisch weghaalt
• Om het resultaat daarna in een PNG te veranderen gebruikt u SVG naar PNG

Zo gebruikt u het

• Klik op Klik om te uploaden, of sleep uw SVG op het vak
• De snede wordt meteen berekend — de stippellijn links laat zien wat er blijft
• Laat Transparant of wit staan, tenzij het wit bij het ontwerp hoort
• Verhoog de tolerantie als er niets is weggehaald, verlaag hem als er iets bleeks is weggesneden
• Stel een marge in als u aan alle vier de kanten ruimte wilt overhouden
• Druk op SVG downloaden, of op SVG-code kopiëren om hem direct in een pagina te plakken

Verwante tools

• Afbeelding bijsnijden — hetzelfde werk voor PNG en JPG
• SVG naar PNG — de bijgesneden SVG omzetten naar een bitmap
• SVG naar JPG — een SVG als platte afbeelding
• Afbeelding naar SVG — een logo of pictogram overtrekken tot vectorpaden
• Favicon maken — van het resultaat een site-pictogram maken
• Afbeelding vergroten of verkleinen — in plaats daarvan een bitmap schalen