Loading…

Over Online SVG Beautifier & Minifier

Werk je met rommelige of te grote SVG-bestanden? Plak je code of upload een `.svg` bestand, kies **Formatteren** om op te maken of **Verkleinen** om de grootte te reduceren, en krijg direct schone, geoptimaliseerde SVG-markup. Perfect voor ontwerpers, front-end ontwikkelaars en iedereen die snelle, veilige vectoroptimalisatie nodig heeft. 🚀

Belangrijkste Kenmerken van Onze SVG Formatter

  • **Beautify modus** met slim inspringen, regelafbreking en attribuutuitlijning
  • **Minify modus** die witruimte, opmerkingen en overbodige metadata verwijdert
  • Prettier-stijl opmaak en SVGO-stijl optimalisatie onder de motorkap
  • Configureerbare inspringstijl (spaties of tabs) en inspringgrootte
  • Optionele regelbreedte om lange paden en attributen netjes te houden
  • Consistente eind-van-regelstijl (LF / CRLF) voor schone verschillen tussen besturingssystemen
  • Sleep-en-neerzet `.svg`-bestanden tot 5 MB of plak inline SVG-opmaak
  • 100% client-side verwerking — je artwork verlaat nooit de browser
  • Eén-klik kopiëren of downloaden van geformatteerde (`.formatted.svg`) of geminimaliseerde (`.min.svg`) uitvoer
  • Responsieve gebruikersinterface die goed werkt op laptops, desktops en tablets

🔧 Hoe SVG te Formatteren of Minimaliseren: Snelle Gids for svg-formatter

1

1. Plak of Upload SVG

📥 Sleep-en-neerzet je `.svg`-bestand of plak ruwe SVG-opmaak in de editor. De tool detecteert automatisch standaard `image/svg+xml`-inhoud.

2

2. Kies Formatteren of Minimaliseren

✨ Selecteer **Formatteren** voor door mensen leesbare opmaak (ideaal voor reviews en versiebeheer) of **Minimaliseren** voor de kleinst mogelijke bestandsgrootte.

3

3. Stel Formatteringopties Af

⚙️ Pas **Inspringstijl** (spaties of tabs), **Inspringgrootte** en optioneel **Regelomloop / Regellengte** aan. Deze komen direct overeen met de onderliggende formatteringsinstellingen.

4

4. Voorbeeld & Exporteer

👀 Inspecteer de geoptimaliseerde SVG-code, test het snel in je project, kopieer het naar je klembord of download het resultaat als een nieuw `.svg`-bestand.

Technische Details

Verfraaiingsengine (Formaatmodus)

Formaatmodus gebruikt een Prettier-stijl engine afgestemd op SVG XML-opmaak. Het richt zich op leesbaarheid en stabiele, voorspelbare verschillen.

AspectGedragOpmerkingen
InspringstijlSpaties of TabsConfigureerbaar via **Inspringstijl** (mapt naar `indentStyle`).
Inspringgrootte1–8 spatiesBepaalt de nestingsbreedte bij gebruik van spaties (mapt naar `indentSize`).
Regelomloop / Regellengte0–120 kolommen`0` schakelt omloop uit; anders worden lange regels omgebroken rond de gekozen kolom (mapt naar `wrapLineLength`).
Eind-van-regelLF (`\n`) of CRLF (`\r\n`)Houdt regeleinden consistent tussen besturingssystemen (mapt naar `endOfLine`).
UitvoertaalXML-stijl SVGBehoudt SVG-compatibele XML-structuur voor veilige inbedding.

Minimalisatiepijplijn (Minimaliseermodus)

Minimaliseermodus gebruikt een SVGO-geïnspireerde pijplijn gericht op groottereductie terwijl visuele uitvoer behouden blijft.

StapBeschrijvingImpact
Opmerkingen verwijderenVerwijdert `<!-- ... -->` opmerkingknooppunten die de weergave niet beïnvloeden.Kleinere bestanden, schonere verschillen.
Overbodige witruimte verwijderenVerkleint onnodige spaties, tabs en regeleinden.Grote winst voor uitgebreide door editors geëxporteerde SVG's.
Metadata bijsnijdenVerwijdert optioneel niet-weergave metadata knooppunten wanneer veilig.Goed voor openbare productiebestanden.
Attributen normaliserenVereenvoudigt en herordent attributen op een stabiele manier.Compactere uitvoer, betere cacheerbaarheid.

Codering & Compatibiliteit

Uitvoer is UTF-8 SVG compatibel met moderne browsers en tools, afgestemd op de SVG 2-specificatie.

Prestaties & Limieten (Typische Desktopbrowser)

BestandstypeInvoergrootteOpmaaktijdMinimaliseertijdTypische groottereductie
Pictogram5 KB⚡ < 15 ms⚡ < 20 ms≈ 25–40%
Illustratie100 KB⚡ < 60 ms⚡ < 90 ms≈ 40–55%
Hoofdafbeelding500 KB⏱️ < 300 ms⏱️ < 450 ms≈ 50–60%
Prestaties in de praktijk zijn afhankelijk van je CPU, browser en SVG-complexiteit.

CLI-alternatieven voor Gevorderde Gebruikers

Voorkeur voor terminalwerkstromen of CI-integratie? Combineer Prettier en SVGO voor vergelijkbaar gedrag als deze tool:

Linux / 🍎 macOS

SVG opmaken met Prettier

npx prettier --parser xml --print-width 80 --tab-width 2 --write input.svg

Past consistente inspringing en regelafbreking toe op je SVG-opmaak.

SVG minimaliseren met SVGO

npx svgo input.svg -o input.min.svg

Verwijdert opmerkingen, metadata en overbodige spaties voor kleinere bestanden.

Windows (PowerShell of CMD)

SVG netjes afdrukken met xmlstarlet (via WSL of native)

xmlstarlet fo --indent-spaces 2 input.svg > pretty.svg

Formatteert SVG/XML met een inspringing van 2 spaties.

SVG minimaliseren met SVGO (zonder globale installatie)

npx svgo input.svg -o min.svg

Voert SVGO direct uit via `npx` voor eenmalige optimalisaties.

Voeg Prettier + SVGO toe aan je build- of pre-commit hooks zodat ontwerpers ruwe SVG's kunnen exporteren en je pijplijn ze geoptimaliseerd houdt.

Praktische Toepassingen

Webprestaties & Frontend Bundles

  • Verklein SVG-ladingen in designsystemen, iconensets en sprite sheets.
  • Minimaliseerde SVG inline in HTML/CSS plaatsen om extra HTTP-verzoeken te besparen.
  • Verbeter Core Web Vitals door hoofdillustraties op landingspagina's te verkleinen.
<img src="/assets/hero.min.svg" alt="Geoptimaliseerde hoofdafbeelding" />
.icon-check { background-image: url('data:image/svg+xml;utf8,<svg ...>'); }

Design Overdracht & Versiebeheer

  • SVG opmaken voor export vóór codebeoordeling om verschillen leesbaar te maken.
  • Houd een nette `.formatted.svg` voor samenwerking en een `.min.svg` voor productie.
  • Handhaaf consistente inspringing en attribuutvolgorde in een designsysteem.

Mobiel, E-mails & Hybride Apps

  • Minimaliseer inline SVG's in HTML-e-mails voor lichtere campagnes.
  • Verklein app-bundelgrootte in React Native / Capacitor / Ionic bij het leveren van veel iconen.
  • Bespaar bandbreedte voor gebruikers met trage of gemeten verbindingen.

❓ Frequently Asked Questions

❓Wat is SVG-opmaak?

Opmaak (of verfraaiing) herstructureert je SVG-markering met consistente inspringing, regelafbrekingen en attribuutvolgorde. Het verandert niet hoe de afbeelding wordt weergegeven, alleen hoe de code eruitziet en zich gedraagt bij verschillen.

📏Zal minimalisatie het uiterlijk van mijn SVG veranderen?

Normaal gesproken niet. Minimalisatie verwijdert opmerkingen, overbodige witruimte en niet-weergave metadata. Het is ontworpen om het visuele resultaat te behouden terwijl de grootte wordt verkleind. Als je afhankelijk bent van speciale metadata voor bewerkingstools, bewaar dan een back-up van het originele bestand.

🔒Wordt mijn SVG naar een server geüpload?

Nooit. Alle opmaak en minimalisatie gebeurt volledig in je browser met JavaScript/WebAssembly. Je SVG-bestanden worden niet naar een server gestuurd of extern opgeslagen.

🚀Hoeveel grootte kan minimalisatie besparen?

Besparingen in de praktijk liggen doorgaans tussen **30% en 70%**, afhankelijk van hoe de SVG is geëxporteerd en hoeveel metadata of witruimte deze bevat.

⚠️Kan het verwijderen van `<metadata>` of opmerkingen mijn workflow verstoren?

Voor openbare webafbeeldingen is het verwijderen van metadata en opmerkingen meestal veilig. Als je ontwerptools echter bewerkingsgegevens of licentie-informatie in die secties opslaan, bewaar dan een originele, niet-geminimaliseerde kopie in versiebeheer voor toekomstige bewerkingen.

Pro Tips

Best Practice

Bewaar een niet-geminimaliseerde `icon.formatted.svg` in je repo voor schone verschillen, en genereer `icon.min.svg` als onderdeel van je bouwstap.

Best Practice

Voeg altijd betekenisvolle `<title>` en `<desc>` elementen toe voordat je minimaliseert om je SVG's toegankelijk te houden voor schermlezers.

Best Practice

Combineer SVG-minimalisatie met HTTP-compressie (Gzip/Brotli) om nog meer bytes te besparen bij zware illustraties en grafieken.

Best Practice

Voor iconensets, overweeg een sprite-strategie: minimaliseer eenmaal en verwijs dan naar iconen via `<use>` in plaats van overal SVG-code te dupliceren.

Additional Resources

W3C SVG 2 Specificatie
Documentation
MDN Web Docs: SVG
Documentation
SVGO (GitHub)
Documentation
Prettier XML / SVG Opmaak
Documentation

Other Tools