A free, private SVG workspace with 23 tools. Optimize and minify SVGs SVGO-style (in batches, with before/after checks), clean Figma and Illustrator exports, and convert SVG to PNG, JPG, WebP, React components or data URIs. You can also validate files, edit paths, crop the viewBox, recolor, build sprites and generate waves, blobs, patterns, mesh gradients, grain textures and dividers, all in your browser.
SVG Forge brings the SVG jobs you'd normally spread across five websites into one page: an SVGO-style optimizer with batch ZIP export, a minifier, cleaner and formatter; converters from SVG to PNG, JPG, WebP, React components and data URIs; a validator; a visual path editor, viewBox cropper, color replacer and sprite builder; and ten generators for waves, blobs, patterns, mesh gradients, grain textures and section dividers. Any result can be handed to the next tool with one click. You can generate a blob, recolor it, optimize it and export it as a React component without copying and pasting between tabs.
Features
23 SVG tools: optimize, convert, edit & generate
SVGO-style optimizer: 21 toggles, presets, batch ZIP & visual diff
SVG to PNG, JPG & WebP at any size, including a 16–512 px icon set
SVG to React / React Native component (TSX or JSX)
Data URI encoder & decoder, CSS background and CSS mask output
Choose from Optimize, Convert, Edit or Generate in the sidebar (or the picker on mobile). Each tool also has its own link, such as #svg-to-png.
2
Add your SVG
Paste markup, upload or drag-and-drop one or more .svg files, or read from the clipboard. Generators start from a ready-made design you can randomize.
3
Adjust and check
Tune presets, sliders and toggles. The preview updates live and the optimizer shows the original and result side by side with byte and gzip savings.
4
Export or hand off
Copy as SVG, React, data URI, Base64 or CSS, download .svg, export PNG/JPG/WebP, or send the result straight to another tool with “Open in…”.
Common use cases
Optimize and minify icons and illustrations before shipping to production
Clean bloated SVG exports from Figma, Illustrator, Inkscape or Sketch
Batch-compress a whole icon folder and download it as a ZIP
Convert an SVG logo to PNG for email, social media or a favicon set
Turn SVG icons into typed React or React Native components
Inline small icons in CSS as the smallest possible data URI
Crop the empty space around an SVG by fitting the viewBox to its content
Recolor an SVG to a brand palette or switch it to currentColor
Bundle icons into one reusable <symbol> sprite
Create wave, blob, mesh-gradient and grain backgrounds for landing pages
Detailed guide
Which SVG tool do I need?
Start with the job, not the tool name. To make a file smaller, use Optimize. To use an SVG somewhere that wants a bitmap, code or CSS, use Convert. To fix or restyle an existing SVG, use Edit. To create new artwork from sliders, use Generate.
Backgrounds, hero sections, dividers and decorative shapes
How the SVG optimizer works, and which settings are safe
The optimizer parses your file into a real XML document in the browser and applies 21 optimizations modelled on SVGO. Each one can be switched on or off, and three presets (Balanced, Maximum, Clean only) cover the common cases. A side-by-side visual check shows the original and optimized render, so you can confirm nothing changed before you download. You can drop in dozens of files at once and get them back as a single ZIP. Typical exports from Illustrator, Inkscape or Figma shrink 30–70%, and a gzip size is shown because that's what your server actually sends.
Optimization
What it does
Visual risk
Remove editor data & metadata
Deletes Inkscape, Sodipodi, Illustrator, Sketch and Figma namespaces, <metadata> and comments
None
Round numbers / compress paths
Rounds coordinates to your chosen precision and rewrites path data in the shorter of absolute or relative form
None at 2–3 decimals; check tiny icons at 0–1
Remove unused defs & IDs
Drops gradients, clip-paths and IDs that nothing references
None
Collapse groups / remove defaults
Unwraps empty <g> wrappers and removes values like fill-opacity="1"
None
Styles → attributes, shorten colors
style="fill:#ffffff" becomes fill="#fff"
None (skipped automatically when a <style> block exists)
Responsive (drop width/height)
Keeps only the viewBox so CSS controls the size
Layout may change if you relied on the fixed size
Remove <title>/<desc>
Strips accessible names
None visually, but it hurts screen-reader users
Clean up SVG code exported from Figma, Illustrator or Inkscape
Design tools pad SVG exports with generator comments, XML declarations, editor namespaces, layer IDs like Layer_1 and SVGID_1_, empty groups, enable-background styles and numbers with six decimals. The SVG Cleaner removes that cruft but keeps your markup indented and readable, which is useful when you'll hand-edit or animate the file. The Optimizer goes further for production, and the Validator lists exactly what's inside (element counts, colors, fonts, embedded bitmaps, scripts and external links) so you can see why a file is heavy or unsafe before you use it.
SVG to PNG, React component or data URI: which format to use
SVG is the best choice for icons and illustrations on the web. Some places still need a bitmap or code, though. The converters handle each case without an upload.
Export
Use it when
Notes
PNG / WebP
Email, social posts, app stores, favicons, anywhere SVG isn't accepted
Any size up to 8192 px, transparent background, batch ZIP, and a one-click 16–512 px icon set
JPG
Places that need a small, opaque image
Pick the background color that replaces transparency
React / React Native
Icons inside a React, Next.js or Expo codebase
camelCase attributes, style objects, {...props}, optional currentColor and an accessible title prop
Data URI (URL-encoded)
Small icons inlined in CSS or HTML with no extra request
Usually about 30% smaller than Base64. The CSS mask output lets you recolor with background-color
SVG sprite
Many icons reused across a site
One file of <symbol>s referenced with <use href="#id">
The generators produce clean, hand-editable SVG rather than bitmap exports. Layered waves and morphing blobs can be animated with SMIL, which works inside <img> and CSS backgrounds without JavaScript. The pattern generator exports 16 seamless motifs either as a single tile for background-repeat or as a full canvas. The mesh gradient and noise generators create the soft gradient and film-grain looks popular in modern landing pages, and the shape divider comes with a ready-to-paste HTML and CSS snippet for section edges. Every output can be copied as SVG, React, data URI or CSS, or exported to PNG.
Parsing, optimizing, rasterizing and zipping all happen in your browser with standard web APIs (DOMParser, Canvas and CompressionStream). Your artwork never reaches a server, so the tools also work for client work under NDA. Previews are rendered through an isolated <img>, so any scripts in an SVG you paste can't run, and the optimizer can strip <script> tags and event handlers before you embed a file on your site.
Frequently asked questions
What SVG tools are included?
Twenty-three, grouped into four areas. Optimize: Optimizer, Minifier, Cleaner, Formatter and Path Simplifier. Convert: SVG to PNG/JPG/WebP, SVG to React, Data URI and Viewer & Validator. Edit: Path Editor, ViewBox & Crop, Color Replacer and Sprite Generator. Generate: Wave, Blob, Pattern, Mesh Gradient, Noise, Shape Divider, Polygon, Star, Spiral and Squiggle.
How do I optimize an SVG file for free?
Open the Optimizer, paste your SVG or drop in one or more .svg files, and pick a preset (Balanced, Maximum or Clean only) or toggle any of the 21 optimizations. The tool shows original, optimized and gzipped sizes plus a side-by-side visual check. Then copy the result, download it, or download every file as a ZIP.
How do I make an SVG wave or blob?
Use the Wave or Blob generator, adjust the sliders (layers, amplitude, complexity, randomness) and colors, and the vector updates live. Hit Random to explore variations, turn on animation for a morphing effect, then copy the SVG or export it.
Can I get the SVG as a CSS background or Data URI?
Yes. Every result has export tabs for raw SVG, React, a compact URL-encoded Data URI, Base64 and a ready-to-paste CSS rule, plus .svg and PNG/JPG/WebP downloads. The Data URI tool also produces a CSS mask snippet and can decode a data URI back into SVG.
What does the SVG cleaner remove?
XML declarations, DOCTYPE, comments, <metadata> and editor namespaces and attributes from Inkscape, Sodipodi, Illustrator, Sketch, Serif and Figma. It keeps the markup indented and readable, so it's the right choice when you still want to hand-edit the file.
Is my SVG uploaded to a server?
No. Everything, including optimizing, PNG rendering and ZIP creation, runs locally in your browser. Your files never leave your device, so it's private and instant.
How do I minify or optimize an SVG file?
Paste or upload your SVG and the optimizer strips editor metadata, comments, unused definitions and redundant code, rounds numbers and compresses path data (like SVGO). This often shrinks a file by 30–70% without changing how it looks, and it all runs in your browser.
How do I clean up messy SVG code from Figma or Illustrator?
Design tools add bloat such as generator comments, layer IDs, empty groups and six-decimal numbers. Paste the export into the Cleaner (keeps it readable) or the Optimizer (smallest output) to get lightweight, web-ready markup.
Can I convert an SVG to a data URI?
Yes. Use the Data URI tool or the Data URI tab on any result. It uses URL-encoding, which is usually about 30% smaller than Base64, and also gives you Base64, a CSS background rule and an <img> tag.
How do I convert SVG to PNG with a transparent background?
Open SVG to PNG / JPG, add your file(s), choose PNG and a scale (e.g. 4×) or an exact width or height, and keep Transparent background on. You can batch-convert many SVGs to a ZIP, pick JPG or WebP instead, or choose Icon set to export 16–512 px PNGs for favicons and app icons.
How do I convert an SVG to a React component?
Paste the SVG into SVG to React (JSX), name the component and choose TypeScript or JavaScript, React or React Native. Attributes are converted to camelCase, inline styles become objects and {...props} is spread on the root. You can also switch colors to currentColor and add an accessible title prop.
Will optimizing change how my SVG looks?
Not with the default Balanced preset. Every optimization in it only removes invisible data or rewrites values equivalently. Very low precision (0–1 decimals) can slightly move points on tiny icons, which is why the optimizer shows the original and result side by side before you download.
How do I remove the empty space around an SVG?
Open ViewBox & Crop, paste the SVG and click Crop to content. The tool measures the drawing's real bounds, sets a tight viewBox with the padding you choose, and can update or remove the width and height attributes.
How can I change the colors of an SVG?
The Color Replacer detects every fill, stroke and gradient color (hex, rgb(), hsl() and named colors) and lists how often each one appears. You can remap them one by one, shift hue, saturation and lightness for the whole file, convert to grayscale or invert, or replace everything with currentColor so the icon follows your CSS text color.
What is an SVG sprite and how do I use it?
A sprite is one SVG file containing many icons as <symbol> elements. Add your icons to the Sprite Generator, then reference each one with <svg><use href="#icon-id"/></svg>. The tool can prefix internal IDs to avoid gradient clashes and convert colors to currentColor, and it generates the usage code for you.
Is it safe to paste an SVG from an unknown source?
Yes. Previews are rendered inside an isolated <img>, where scripts can't run. The Validator flags <script> tags, event handlers and external links, and the optimizer removes scripts and handlers by default before you embed the file on a site.
Can I animate the generated waves and blobs?
Yes. The Wave and Blob generators have an Animate toggle that adds a self-contained SMIL morph. It plays in browsers inside <img>, CSS backgrounds and inline SVG, with no JavaScript or CSS required.
