Gratis SVG-optimalisatie en -converter: SVG verkleinen en opschonen (batch), SVG converteren naar PNG, JPG, React JSX of gegevens-URI, paden bewerken, viewBox bijsnijden, opnieuw kleuren, sprites bouwen, plus golf-, blob-, patroon-, mesh-gradiënt- en ruisgeneratoren. Geen upload.
Een gratis, privé SVG-werkruimte met 23 tools. Optimaliseer en verklein SVG's in SVGO-stijl (in batches, met controles voor/na), schoon Figma- en Illustrator-exports op en converteer SVG naar PNG-, JPG-, WebP-, React-componenten of gegevens-URI's. U kunt ook bestanden valideren, paden bewerken, de viewBox bijsnijden, opnieuw kleuren, sprites bouwen en golven, blobs, patronen, mesh-gradiënten, korreltexturen en scheidingslijnen genereren, allemaal in uw browser.
SVG Forge brengt de SVG-taken die u normaal gesproken over vijf websites verspreidt, op één pagina samen: een optimalisatieprogramma in SVGO-stijl met batch-ZIP-export, een verkleiner, opschoner en formatter; converters van SVG naar PNG, JPG, WebP, React-componenten en gegevens-URI's; een validator; een visuele padeditor, viewBox-cropper, kleurvervanger en sprite-bouwer; en tien generatoren voor golven, blobs, patronen, mesh-gradiënten, korreltexturen en sectieverdelers. Elk resultaat kan met één klik worden doorgegeven aan de volgende tool. U kunt een blob genereren, deze opnieuw kleuren, optimaliseren en exporteren als een React-component zonder te kopiëren en plakken tussen tabbladen.
Functies
23 SVG-tools: optimaliseren, converteren, bewerken en genereren
Optimalisatiefunctie in SVGO-stijl: 21 schakelaars, presets, batch-ZIP en visuele diff
SVG naar PNG, JPG en WebP in elk formaat, inclusief een pictogrammenset van 16–512 px
SVG om te reageren / reageren Native component (TSX of JSX)
Gegevens-URI-encoder en -decoder, CSS-achtergrond en CSS-maskeruitvoer
Validator: beveiliging, toegankelijkheid, grootte en gzip-rapport
Padeditor met ankerpunten, abs↔rel-conversie en fit-to-icon
ViewBox bijsnijden naar inhoud, kleurvervanger (tint, grijstinten, huidige kleur) en sprite-bouwer
Hoe SVG-optimalisatie, converter en generator te gebruiken
1
Kies een hulpmiddel
Kies uit Optimaliseren, Converteren, Bewerken of Genereer in de zijbalk (of de kiezer op mobiel). Elke tool heeft ook een eigen link, zoals #svg-naar-png.
2
Voeg uw SVG toe
Plak markeringen, upload of sleep een of meer .svg-bestanden, of lees vanaf het klembord. Generatoren starten vanuit een kant-en-klaar ontwerp dat u kunt randomiseren.
3
Aanpassen en controleren
Stem presets, schuifregelaars en schakelaars af. De preview wordt live bijgewerkt en de optimalisatie toont het origineel en het resultaat naast byte- en gzip-besparingen.
4
Exporteren of doorgeven
Kopieer als SVG, React, data-URI, Base64 of CSS, download .svg, exporteer PNG/JPG/WebP of stuur het resultaat rechtstreeks naar een andere tool met "Openen in...".
Veelvoorkomende gebruiksscenario's
Optimaliseer en verklein pictogrammen en illustraties voordat ze naar productie worden verzonden
Maak opgeblazen SVG-exports schoon uit Figma, Illustrator, Inkscape of Sketch
Comprimeer een hele pictogrammap in batch en download deze als ZIP
Converteer een SVG-logo naar PNG voor e-mail, sociale media of een favicon-set
Zet SVG-pictogrammen om in getypte React- of React Native-componenten
Inline kleine pictogrammen in CSS als de kleinst mogelijke gegevens-URI
Snijd de lege ruimte rond een SVG bij door de viewBox aan de inhoud aan te passen
Kleur een SVG opnieuw in naar een merkpalet of schakel over naar currentColor
Bundel pictogrammen in één herbruikbare <symbol> sprite
Creëer golf-, blob-, mesh-gradiënt- en korrelachtergronden voor landingspagina's
Gedetailleerde gids
Welke SVG-tool heb ik nodig?
Begin met de taak, niet met de gereedschapsnaam. Gebruik Optimaliseren om een bestand kleiner te maken. Om een SVG ergens te gebruiken waar een bitmap, code of CSS nodig is, gebruik je Convert. Gebruik Bewerken om een bestaande SVG te corrigeren of opnieuw op te maken. Gebruik Genereer om nieuwe illustraties van schuifregelaars te maken.
Achtergronden, heldensecties, verdelers en decoratieve vormen
Hoe de SVG-optimalisatie werkt en welke instellingen veilig zijn
De optimalisatie parseert uw bestand in een echt XML-document in de browser en past 21 optimalisaties toe, gemodelleerd naar SVGO. Ze kunnen allemaal worden in- of uitgeschakeld en drie presets (Balanced, Maximum, Clean only) dekken de meest voorkomende gevallen. Een visuele controle naast elkaar toont de originele en geoptimaliseerde weergave, zodat u kunt bevestigen dat er niets is gewijzigd voordat u downloadt. U kunt tientallen bestanden tegelijk plaatsen en ze terughalen als een enkele ZIP. Typische exports van Illustrator, Inkscape of Figma krimpen 30-70%, en er wordt een gzip-grootte weergegeven omdat dat is wat uw server daadwerkelijk verzendt.
Optimalisatie
Wat het doet
Visueel risico
Verwijder editorgegevens en metadata
Verwijdert Inkscape-, Sodipodi-, Illustrator-, Sketch- en Figma-naamruimten, <metadata> en opmerkingen
Geen
Ronde getallen / comprimeer paden
Rondt coördinaten af op de door u gekozen precisie en herschrijft padgegevens in de kortste absolute of relatieve vorm
Geen met 2 à 3 decimalen; controleer de kleine pictogrammen bij 0–1
Verwijder ongebruikte defs en ID's
Verwijdert verlopen, clippaden en ID's waar niets naar verwijst
Pakt lege <g> wrappers uit en verwijdert waarden zoals fill-opacity="1"
Geen
Stijlen → attributen, kleuren inkorten
style="fill:#ffffff" wordt fill="#fff"
Geen (automatisch overgeslagen als er een <style> blok bestaat)
Responsief (valbreedte/hoogte)
Behoudt alleen de viewBox, zodat CSS de grootte bepaalt
De indeling kan veranderen als u op het vaste formaat vertrouwt
Verwijder <titel>/<desc>
Stript toegankelijke namen
Visueel geen, maar het doet pijn voor gebruikers van schermlezers
Ruim SVG-code op die is geëxporteerd vanuit Figma, Illustrator of Inkscape
Ontwerptools vullen SVG-exports aan met generatoropmerkingen, XML-declaraties, editornaamruimten, laag-ID's zoals Layer_1 en SVGID_1_, lege groepen, achtergrondstijlen en getallen met zes decimalen. De SVG Cleaner verwijdert die rommel, maar zorgt ervoor dat uw markeringen ingesprongen en leesbaar blijven, wat handig is als u het bestand met de hand bewerkt of animeert. De Optimizer gaat verder op het gebied van productie en de Validator geeft precies weer wat er in zit (aantal elementen, kleuren, lettertypen, ingesloten bitmaps, scripts en externe links), zodat u kunt zien waarom een bestand zwaar of onveilig is voordat u het gebruikt.
SVG naar PNG, React-component of gegevens-URI: welk formaat te gebruiken
SVG is de beste keuze voor pictogrammen en illustraties op internet. Op sommige plaatsen is echter nog steeds een bitmap of code nodig. De converters behandelen elk geval zonder upload.
Exporteren
Gebruik het wanneer
Opmerkingen
PNG / WebP
E-mail, sociale berichten, appstores, favicons, overal waar SVG niet wordt geaccepteerd
Elk formaat tot 8192 px, transparante achtergrond, batch-ZIP en een iconenset van 16-512 px met één klik
JPG
Plaatsen die een kleine, ondoorzichtige afbeelding nodig hebben
Kies de achtergrondkleur die de transparantie vervangt
Reageer / Reageer native
Pictogrammen in een React-, Next.js- of Expo-codebase
camelCase-attributen, stijlobjecten, {...props}, optionele currentColor en een toegankelijke titelprop
Gegevens-URI (URL-gecodeerd)
Kleine pictogrammen ingevoegd in CSS of HTML zonder extra verzoek
Meestal ongeveer 30% kleiner dan Base64. Met de CSS-maskeruitvoer kunt u de achtergrondkleur opnieuw inkleuren
SVG-sprite
Veel pictogrammen worden op een site hergebruikt
Eén bestand met <symbol>s waarnaar wordt verwezen met <use href="#id">
De generatoren produceren schone, met de hand bewerkbare SVG in plaats van bitmap-exports. Gelaagde golven en veranderende blobs kunnen worden geanimeerd met SMIL, dat werkt binnen <img>- en CSS-achtergronden zonder JavaScript. De patroongenerator exporteert 16 naadloze motieven als een enkele tegel voor achtergrondherhaling of als een volledig canvas. De mesh-gradiënt- en ruisgeneratoren creëren de zachte gradiënt- en filmkorrel-looks die populair zijn op moderne landingspagina's, en de vormverdeler wordt geleverd met een kant-en-klaar HTML- en CSS-fragment voor sectieranden. Elke uitvoer kan worden gekopieerd als SVG, React, data-URI of CSS, of geëxporteerd naar PNG.
Parseren, optimaliseren, rasteren en zippen gebeurt allemaal in uw browser met standaard web-API's (DOMParser, Canvas en CompressionStream). Uw artwork bereikt nooit een server, dus de tools werken ook voor klantwerk onder geheimhoudingsverklaring. Voorvertoningen worden weergegeven via een geïsoleerde <img>, zodat scripts in een SVG die u plakt niet kunnen worden uitgevoerd, en de optimalisatie kan <script>-tags en gebeurtenishandlers verwijderen voordat u een bestand op uw site insluit.
Veelgestelde vragen
Welke SVG-tools zijn inbegrepen?
Drieëntwintig, gegroepeerd in vier gebieden. Optimaliseren: Optimizer, Minifier, Cleaner, Formatter en Path Simplifier. Converteren: SVG naar PNG/JPG/WebP, SVG naar React, Gegevens-URI en Viewer & Validator. Bewerken: Path Editor, ViewBox & Crop, Color Replacer en Sprite Generator. Genereer: golf, klodder, patroon, meshgradiënt, ruis, vormverdeler, veelhoek, ster, spiraal en kronkeling.
Hoe optimaliseer ik gratis een SVG-bestand?
Open de Optimizer, plak uw SVG of plaats een of meer .svg-bestanden en kies een voorinstelling (uitgebalanceerd, maximaal of alleen opschonen) of schakel een van de 21 optimalisaties in. De tool toont originele, geoptimaliseerde en gezipte formaten plus een visuele controle naast elkaar. Kopieer vervolgens het resultaat, download het of download elk bestand als ZIP.
Hoe maak ik een SVG-golf of blob?
Gebruik de Wave- of Blob-generator, pas de schuifregelaars (lagen, amplitude, complexiteit, willekeur) en kleuren aan en de vectorupdates zijn live. Druk op Willekeurig om variaties te verkennen, schakel animatie in voor een morphing-effect en kopieer vervolgens de SVG of exporteer deze.
Kan ik de SVG verkrijgen als CSS-achtergrond of gegevens-URI?
Ja. Elk resultaat heeft exporttabbladen voor onbewerkte SVG, React, een compacte URL-gecodeerde gegevens-URI, Base64 en een kant-en-klare CSS-regel, plus .svg- en PNG/JPG/WebP-downloads. De Data URI-tool produceert ook een CSS-maskerfragment en kan een data-URI terug naar SVG decoderen.
Wat verwijdert de SVG-reiniger?
XML-declaraties, DOCTYPE, opmerkingen, <metadata> en editor-naamruimten en attributen van Inkscape, Sodipodi, Illustrator, Sketch, Serif en Figma. Het zorgt ervoor dat de markeringen ingesprongen en leesbaar blijven, dus het is de juiste keuze als u het bestand toch handmatig wilt bewerken.
Wordt mijn SVG geüpload naar een server?
Nee. Alles, inclusief optimalisatie, PNG-weergave en ZIP-creatie, wordt lokaal in uw browser uitgevoerd. Uw bestanden verlaten uw apparaat nooit, dus het is privé en direct.
Hoe verklein of optimaliseer ik een SVG-bestand?
Plak of upload uw SVG en de optimalisatie verwijdert metagegevens, opmerkingen, ongebruikte definities en overtollige code van de editor, rondt getallen af en comprimeert padgegevens (zoals SVGO). Hierdoor wordt een bestand vaak met 30-70% verkleind zonder dat het uiterlijk verandert, en het draait allemaal in uw browser.
Hoe ruim ik rommelige SVG-code op uit Figma of Illustrator?
Ontwerptools voegen extra ruis toe, zoals generatoropmerkingen, laag-ID's, lege groepen en zes-decimale getallen. Plak de export in de Cleaner (houdt hem leesbaar) of de Optimizer (kleinste uitvoer) om lichtgewicht, webklare markeringen te krijgen.
Kan ik een SVG naar een gegevens-URI converteren?
Ja. Gebruik de Data-URI-tool of het tabblad Data-URI voor elk resultaat. Het maakt gebruik van URL-codering, die meestal ongeveer 30% kleiner is dan Base64, en geeft je ook Base64, een CSS-achtergrondregel en een <img>-tag.
Hoe converteer ik SVG naar PNG met een transparante achtergrond?
Open SVG naar PNG / JPG, voeg uw bestand(en) toe, kies PNG en een schaal (bijvoorbeeld 4×) of een exacte breedte of hoogte, en houd Transparante achtergrond ingeschakeld. U kunt veel SVG's batchgewijs naar een ZIP converteren, in plaats daarvan JPG of WebP kiezen, of Pictogrammenset kiezen om PNG's van 16–512 px te exporteren voor favicons en app-pictogrammen.
Hoe converteer ik een SVG naar een React-component?
Plak de SVG in SVG om te reageren (JSX), geef de component een naam en kies TypeScript of JavaScript, React of React Native. Attributen worden geconverteerd naar camelCase, inline stijlen worden objecten en {...props} wordt verspreid over de root. U kunt ook van kleur wisselen naar currentColor en een toegankelijke titelprop toevoegen.
Zal het optimaliseren veranderen hoe mijn SVG eruit ziet?
Niet met de standaardinstelling Gebalanceerd. Elke optimalisatie daarin verwijdert alleen onzichtbare gegevens of herschrijft waarden op gelijkwaardige wijze. Door een zeer lage nauwkeurigheid (0–1 decimalen) kunnen de punten op kleine pictogrammen lichtjes verschuiven. Daarom toont de optimalisatie het origineel en het resultaat naast elkaar voordat u downloadt.
Hoe verwijder ik de lege ruimte rond een SVG?
Open ViewBox & Crop, plak de SVG en klik op Bijsnijden naar inhoud. De tool meet de werkelijke grenzen van de tekening, stelt een strakke viewBox in met de door u gekozen opvulling en kan de breedte- en hoogte-attributen bijwerken of verwijderen.
Hoe kan ik de kleuren van een SVG wijzigen?
De Kleurvervanger detecteert elke vulling, lijn en verloopkleur (hex, rgb(), hsl() en benoemde kleuren) en geeft aan hoe vaak elke kleur voorkomt. U kunt ze één voor één opnieuw toewijzen, de tint, verzadiging en lichtheid voor het hele bestand wijzigen, converteren naar grijswaarden of omkeren, of alles vervangen door currentColor zodat het pictogram uw CSS-tekstkleur volgt.
Wat is een SVG-sprite en hoe gebruik ik deze?
Een sprite is één SVG-bestand met veel pictogrammen als <symbol>-elementen. Voeg uw pictogrammen toe aan de Sprite Generator en verwijs vervolgens naar elk pictogram met <svg><use href="#icon-id"/></svg>. De tool kan interne ID's voorvoegen om kleurovergangen te voorkomen en kleuren naar currentColor te converteren, en genereert de gebruikscode voor u.
Is het veilig om een SVG van een onbekende bron te plakken?
Ja. Voorvertoningen worden weergegeven in een geïsoleerde <img>, waar scripts niet kunnen worden uitgevoerd. De Validator markeert <script>-tags, gebeurtenishandlers en externe links, en de optimalisatie verwijdert standaard scripts en handlers voordat u het bestand op een site insluit.
Kan ik de gegenereerde golven en blobs animeren?
Ja. De Wave- en Blob-generatoren hebben een Animate-schakelaar die een op zichzelf staande SMIL-morph toevoegt. Het speelt in browsers binnen <img>, CSS-achtergronden en inline SVG, zonder dat JavaScript of CSS vereist is.
