Softonic

SVG-code minificeren

Stap 1 / 2
Volgende

SVG minificeren maakt van leesbare, ingesprongen markup één compacte regel die browsers hetzelfde weergeven. Plak je code, start de minificeerder en kopieer een versie die klaar is voor een stylesheet, een template of een componentbestand.

Zo minificeer je SVG-code

  1. 1

    Plak de markup

    Zet het volledige svg-element, met openings- en sluitingstag, in het vak voor SVG-broncode.

  2. 2

    Kies wat je verwijdert

    Laat Opmerkingen verwijderen, Metadata verwijderen, Witruimte verwijderen en Doctype verwijderen aanstaan voor de kleinste uitvoer.

  3. 3

    Kies de decimalen

    De standaardwaarde 2 past bij de meeste iconen. Zet hem op 3 als een curve na het minificeren vreemd oogt.

  4. 4

    Minificeer en kopieer

    Klik op Volgende, dan op Comprimeren, en gebruik de knop Kopiëren in het resultaatvak.

Wat de minificeerder met je code doet

De tool werkt op de tekst van de SVG in vaste volgorde: eerst verwijdert hij de XML-declaratie en het doctype, dan het commentaar, daarna de elementen voor metadata, title en desc, vervolgens rondt hij decimalen af en tot slot reduceert hij de witruimte. Elke reeks spaties, tabs en regeleinden wordt één spatie, en spaties tussen een sluitingstag en een openingstag vallen weg, wat één regel oplevert.

Voor en na

Invoer, 126 bytes:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <!-- punt -->
  <circle cx="8.000" cy="8.000" r="3.500"/>
</svg>

Uitvoer met de standaardinstellingen, 97 bytes (een besparing van 23 %):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3.5"/></svg>

Let op: 8.000 werd 8 en 3.500 werd 3.5. Nullen aan het eind verdwijnen na het afronden.

Wat onaangeroerd blijft

Dit is een tekstminificeerder, geen volledige optimalisatie. Hij houdt attribuutnamen, ID’s, klassen, groepen, transformaties en padcommando’s zoals ze zijn. Dat is bewust: ID’s waarnaar CSS, scripts of verlopen verwijzen blijven werken, en de structuur van het bestand blijft herkenbaar als je het later moet bewerken.

Let hierop

  • Het samenvoegen van witruimte geldt ook binnen tekstelementen, dus een label met meerdere spaties achter elkaar toont één spatie.
  • Afronden geldt voor elk decimaal getal, ook versienummers in attributen zoals 1.10, die 1.1 zouden worden.
  • Geminificeerde code is lastig te lezen. Bewaar het origineel in versiebeheer en gebruik de geminificeerde kopie alleen als uitvoer.

Een korte controle na het minificeren

Plak de geminificeerde regel in een leeg HTML-bestand en open het in een browser naast het origineel. Ze moeten identiek zijn. Als een verloop, masker of clipPath niet meer werkt, kijk dan of een ID of verwijzing met de hand is aangepast, want de tool hernoemt niets. Is een heel fijn detail verschoven, verhoog de getalprecisie dan naar 3 of meer en voer het opnieuw uit.

Waar je het resultaat kunt gebruiken

Een SVG in één regel plakt zonder problemen in een HTML-bestand, een JSX-component, een data-URI of een CSS-achtergrondregel, waar regeleinden anders geëscaped moeten worden.

Veelgestelde vragen

Minificeren haalt onnodige tekens uit de tekst. Comprimeren, zoals gzip op een server, pakt de tekst in voor verzending. Ze werken samen, en het geminificeerde bestand comprimeert tijdens het verzenden nog verder.

Standaard niet, want ID’s, klassen en de elementstructuur blijven behouden. Alleen commentaar, metadata-elementen, doctype en spaties worden verwijderd.

De tool formatteert de code niet. Open de geminificeerde tekst in een editor met een opmaakfunctie om de inspringing terug te krijgen. Verwijderd commentaar blijft wel weg.

Het verwijderen van witruimte haalt de regeleinden tussen de tags weg. Haal het vinkje bij witruimte weg als je de oorspronkelijke opmaak wilt houden.

Gerelateerde tools

LEGO-mozaïek maken

Maak van je foto een mozaïekplan van 16 × 16, 32 × 32, 48 × 48 of 64 × 64 vakjes. Bekijk benaderde kleuren, tel 1×1-plaatjes en download een genummerd bouwschema.

Muziekpapier met notenbalken maken

Maak afdrukbaar muziekpapier: lege notenbalken, vioolsleutel of bassleutel, dubbele notenbalk voor piano of gitaartabulatuur. Kies aantal, lijnafstand, A4 of Letter en marges en download PDF of SVG.

Gelinieerd papier generator

Maak gratis afdrukbaar gelinieerd papier. Kies college-, brede of smalle liniëring, stel de regelafstand in mm, het papierformaat en een kantlijn in, en druk af of download de SVG.

Ruitjespapier-generator

Maak online afdrukbaar ruitjespapier: kies een ruit- of stippenraster, stel de afstand in mm in, kies A4 of Letter en een eigen lijnkleur, en print of download een strak SVG-bestand.

Contactblad maken

Rangschik foto’s op afdrukbare A4- of Letter-contactbladen met bijschriften en voorvertoning en download JPEG-pagina’s of een pdf.

Afbeelding op meerdere pagina’s afdrukken

Verdeel één afbeelding over A4, Letter of grotere vellen. Stel postermaat, overlap en snijtekens in en download een afdrukklare PDF.

Tool beschikbaar in andere talen

Handleidingen en toepassingen