SVG source
Or a .svg file
Decimal places Whole numbers 1 place 2 places — safe for most icons 3 places Do not round
and <desc></label></div><div class="f"><label style="display:flex;gap:8px;align-items:center;cursor:pointer"><input type="checkbox" id="rmIds" style="width:auto" checked>Remove ids that nothing references</label></div><div class="f"><label style="display:flex;gap:8px;align-items:center;cursor:pointer"><input type="checkbox" id="keepNewline" style="width:auto">Keep a line break between tags</label></div></div>
<div class="btns"><button class="btn" type="submit">Clean it</button><button class="btn ghost" type="reset" id="reset">Reset</button></div>
</form>
<div class="receipt"><div class="rc"><div class="rh"><span>SVG Minifier — Strip Editor Metadata, Comments and Excess Decimals</span><span>BuildFigure</span></div><div id="result" data-empty="Paste SVG source or pick a .svg file."></div></div></div>
</div>
<div class="share"><b>Share</b><button class="sb rd" data-share="rd">Reddit</button><button class="sb x" data-share="x">X</button><button class="sb fb" data-share="fb">Facebook</button><button class="sb" data-share="result">Copy result</button><button class="sb" data-share="copy">Copy link</button><button class="sb" data-share="native">More</button></div>
<div class="ad ad-in"><ins class="adsbygoogle" data-ad-client="ca-pub-3728114481969911" data-ad-slot="4444444444" data-ad-format="fluid" data-full-width-responsive="true"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div>
<article class="prose">
<h2>Where the bytes actually are</h2>
<p>Open an icon exported from a design tool and most of what you see is not the drawing. There is a generator comment naming the application and version, an XML declaration and sometimes a DOCTYPE, an RDF <code><metadata></code> block carrying licence boilerplate, a <code>sodipodi:namedview</code> element that stores the editor's zoom level and grid settings, namespaced attributes such as <code>inkscape:label</code> and <code>serif:id</code>, a nest of <code><g></code> elements that used to be layers and now wrap nothing, and coordinates written as <code>12.345678901234</code>.</p>
<p>None of that affects rendering. On a 24 x 24 icon the path data is commonly one or two kilobytes and the file is eight, which means most of what you ship is a record of how the file was made.</p>
<h2>What this strips and what it keeps</h2>
<div class="tw"><table class="t">
<tr><th>Removed</th><th>Kept</th></tr>
<tr><td>Comments, XML declaration, DOCTYPE</td><td><code>xmlns</code> — added back if missing</td></tr>
<tr><td><code><metadata></code>, <code>sodipodi:namedview</code></td><td><code>viewBox</code></td></tr>
<tr><td>Editor namespaces and attributes</td><td>Every presentation attribute — fill, stroke, opacity, transform</td></tr>
<tr><td><code>version</code>, <code>baseProfile</code></td><td>ids referenced by <code>url(#…)</code>, <code>href="#…"</code> or a CSS selector</td></tr>
<tr><td>Empty groups, whitespace between tags</td><td><code><title></code> and <code><desc></code>, unless you opt out</td></tr>
<tr><td>ids nothing points at</td><td>Structure — no element is merged, converted or moved</td></tr>
</table></div>
<h2>Two things here can break a file</h2>
<p><strong>Removing <code>viewBox</code>.</strong> This tool does not remove it, and no minifier should, but it is worth knowing why it matters because some optimiser configurations will. <code>viewBox</code> defines the coordinate system the drawing lives in, and it is what lets the SVG scale to whatever box you put it in. Without it the image renders at its intrinsic width and height and ignores your CSS sizing — you get a crop, or a small graphic marooned in a large container. If the output above loses its <code>viewBox</code>, something is wrong with the source and you should stop.</p>
<p><strong>Removing ids.</strong> An id in SVG is not decoration. Gradients, clip paths, masks, markers, filters and <code><use></code> elements all work by pointing at an id, and a stylesheet inside the file can select on one too. Delete an id that something references and the gradient renders as flat black, or the clipped shape stops being clipped. The scan here counts every <code>#name</code> occurrence in the file and keeps any id that appears, including inside CSS selectors and <code>url()</code> references. It cannot see a reference that lives outside the file — an external stylesheet, or JavaScript that does <code>getElementById</code> on an inline SVG. If your ids are addressed from outside, turn that option off.</p>
<h2>Rounding coordinates</h2>
<p>On a <code>viewBox="0 0 24 24"</code> icon, two decimal places is one hundredth of a user unit — well under a device pixel at any realistic display size, and invisible. The setting stops being safe when the coordinate system is small: a <code>viewBox="0 0 1 1"</code> normalised path rounded to two places has been quantised to a 100 x 100 grid, and curves will visibly kink. Long smooth curves defined by many nearby control points are the other case to watch.</p>
<p>Values carrying a unit — <code>2.5px</code>, <code>33.333%</code>, <code>1.5em</code> — are left alone, since rounding those changes layout rather than geometry. The two previews are there to be compared; if they differ, raise the setting or turn rounding off.</p>
<h2>Against a real optimiser</h2>
<p>SVGO parses the document into a tree and runs dozens of plugins over it: converting absolute path commands to relative, folding transforms into coordinates, merging adjacent paths, shortening <code>#ffffff</code> to <code>#fff</code>, collapsing useless groups while preserving inherited attributes. It gets further, and because it understands the structure it can do so more safely on complex files.</p>
<p>This tool does the safe text-level subset, which typically lands somewhere between 30 and 60 percent on a design-tool export and does not require a build step. If you have a pipeline, use SVGO in it. If you have four icons and a deadline, paste them here, compare the previews, and move on.</p>
<h2>Questions people ask</h2><div class="faq"><details><summary>The image changed after cleaning.</summary><p>Decimal rounding is the first suspect — set it to "Do not round" and compare again. If it still differs, an id was removed that a CSS rule or a gradient reference depended on, so turn off the id option. The two previews are rendered from the actual before and after strings, so anything you can see there is real.</p></details><details><summary>Is this worth doing if the server gzips everything?</summary><p>Partly. Gzip handles repeated whitespace very well, so that portion of the saving largely evaporates. Metadata blocks, editor attributes and long decimal strings are distinct content and survive compression as real bytes. For inline SVG there is a second reason: the markup is parsed as part of the HTML document, so a smaller file is less DOM to build.</p></details><details><summary>Can I run animated or scripted SVG through it?</summary><p>Not safely. Whitespace collapsing runs across the whole file including the contents of CDATA sections, so a script or a stylesheet with meaningful line breaks can come out broken. The output is checked for well-formedness and you will get a warning, but a file that still parses can still behave differently. Use a structure-aware optimiser for those.</p></details><details><summary>Should I remove title and desc?</summary><p>Only when the SVG is decorative or used as a CSS background or an img src, where nothing reads them. For inline SVG they are the accessible name and description — the equivalent of alt text — and removing them takes the graphic away from screen reader users to save a few dozen bytes. That is why the option is off by default.</p></details></div></article>
<h2>Related</h2><div class="grid"><a class="tile" href="/tools/json-formatter" data-k="json formatter, json validator, pretty print json, minify json, json beautifier, json syntax error, format json online"><b>JSON Formatter and Validator — Pretty Print, Minify, Find the Syntax Error</b><span>Indent, minify and validate JSON, with the error line</span></a><a class="tile" href="/tools/json-diff" data-k="json diff, compare json, json compare tool, json difference, diff two json files, api response diff, config diff"><b>JSON Diff — Compare Two JSON Documents by Path, Not by Line</b><span>Added, removed and changed keys between two JSON documents</span></a><a class="tile" href="/tools/yaml-json-converter" data-k="yaml to json, json to yaml, yaml converter, yaml parser online, yaml validator, docker compose to json, yaml json convert"><b>YAML to JSON Converter — Both Directions, with Indentation Errors Located</b><span>Convert YAML to JSON and back, in the browser</span></a><a class="tile" href="/tools/csv-to-json" data-k="csv to json, json to csv, csv converter, tsv to json, csv parser online, excel to json, convert csv"><b>CSV to JSON Converter — RFC 4180 Quoting, Tabs and Semicolons, Both Directions</b><span>CSV or a pasted spreadsheet to JSON, and back</span></a><a class="tile" href="/concrete-slab-calculator" data-k="concrete calculator, cubic yards, bags of concrete, slab, 80 lb bag, ready mix"><b>Concrete Slab Calculator — Bags and Cubic Yards for a Slab, Footing or Pier</b><span>Cubic yards and bag count for a slab, footing or pad</span></a><a class="tile" href="/curtain-size-calculator" data-k="curtain calculator, curtain size, drapery fullness, curtain fabric yardage, panel width, curtain length, pattern repeat"><b>Curtain Size Calculator — Panel Width, Length and Fabric Yardage With Fullness</b><span>Finished panel width and length, panel count and yardage</span></a></div>
<script>
if(!window.__copyBound){window.__copyBound=true;document.addEventListener('click',function(e){var b=e.target.closest('[data-copy],[data-copy-from]');if(!b)return;var t=b.hasAttribute('data-copy-from')?(document.getElementById(b.getAttribute('data-copy-from'))||{}).textContent||'':b.getAttribute('data-copy');navigator.clipboard.writeText(t).then(function(){b.textContent='Copied';setTimeout(function(){b.textContent='Copy'},1200)})});}
function nv(x, d) { if (x === '' || x == null) return d; var k = Number(x); return isNaN(k) ? d : k; }
function esc(s) { return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); }
function note(s) { return '<p class="note">' + s + '</p>'; }
function mono(s) { return '<span style="font-family:var(--mono);font-size:12px;word-break:break-all">' + s + '</span>'; }
function kb(n) { return n < 1024 ? n + ' B' : n < 1048576 ? (n / 1024).toFixed(1) + ' KB' : (n / 1048576).toFixed(2) + ' MB'; }
function outbox(text, id, h) {
id = id || 'outtxt';
return '<pre id="' + id + '" hidden>' + esc(text) + '</pre>' +
'<div style="display:flex;justify-content:flex-end;margin-bottom:6px"><button type="button" class="sb" data-copy-from="' + id + '">Copy</button></div>' +
'<textarea readonly style="width:100%;min-height:' + (h || 220) + 'px;font-family:var(--mono);font-size:13px;border:1px solid var(--rule2);border-radius:8px;padding:10px">' + esc(text) + '</textarea>';
}
function tbl(head, rows) {
var h = '<div class="tw"><table class="t"><thead><tr>' + head.map(function (x) { return '<th>' + x + '</th>'; }).join('') + '</tr></thead><tbody>';
rows.forEach(function (r) { h += '<tr>' + r.map(function (c) { return '<td>' + c + '</td>'; }).join('') + '</tr>'; });
return h + '</tbody></table></div>';
}
function warnbox(list) {
if (!list.length) return '';
return '<div class="note" style="margin-top:10px">' + list.map(esc).join('<br>') + '</div>';
}
function readText(file) {
return new Promise(function (res, rej) {
var r = new FileReader();
r.onload = function () { res(r.result); };
r.onerror = function () { rej(new Error('read')); };
r.readAsText(file);
});
}
// count '#id' references that are not just a prefix of a longer id
function refCount(s, id) {
var n = 0, i = 0, tok = '#' + id;
while ((i = s.indexOf(tok, i)) >= 0) {
var c = s.charAt(i + tok.length);
if (!/[A-Za-z0-9_-]/.test(c)) n++;
i += tok.length;
}
return n;
}
function dropAttr(s, id) {
var tok = ' id="' + id + '"';
var i = s.indexOf(tok);
return i < 0 ? s : s.slice(0, i) + s.slice(i + tok.length);
}
function minify(s, opt) {
var log = {};
function count(k, n) { log[k] = (log[k] || 0) + n; }
var before;
before = s;
s = s.replace(/<!--[\s\S]*?-->/g, '');
count('Comments', (before.match(/<!--/g) || []).length);
before = s;
s = s.replace(/<\?xml[\s\S]*?\?>/g, '').replace(/<!DOCTYPE[\s\S]*?>/gi, '');
count('XML declaration and DOCTYPE', (before.match(/<\?xml|<!DOCTYPE/gi) || []).length);
before = s;
s = s.replace(/<metadata[\s\S]*?<\/metadata>/gi, '').replace(/<sodipodi:namedview[\s\S]*?(\/>|<\/sodipodi:namedview>)/gi, '');
count('Metadata blocks', (before.match(/<metadata|<sodipodi:namedview/gi) || []).length);
if (opt.rmTitle) {
before = s;
s = s.replace(/<title[\s\S]*?<\/title>/gi, '').replace(/<desc[\s\S]*?<\/desc>/gi, '');
count('title and desc', (before.match(/<title|<desc/gi) || []).length);
}
before = s;
s = s.replace(/\s+(?:inkscape|sodipodi|sketch|serif|i|x):[\w.-]+="[^"]*"/g, '');
s = s.replace(/\s+xmlns:(?:inkscape|sodipodi|sketch|i|x|serif|rdf|cc|dc)="[^"]*"/g, '');
s = s.replace(/\s+(?:xml:space|enable-background|data-name)="[^"]*"/g, '');
count('Editor attributes',
(before.match(/\s(?:inkscape|sodipodi|sketch|serif|i|x):[\w.-]+="/g) || []).length +
(before.match(/\sxmlns:(?:inkscape|sodipodi|sketch|i|x|serif|rdf|cc|dc)="/g) || []).length +
(before.match(/\s(?:enable-background|xml:space|data-name)="/g) || []).length);
s = s.replace(/\s+(version|baseProfile)="[^"]*"/g, '');
var dec = opt.decimals;
if (dec >= 0) {
var p = Math.pow(10, dec), n = 0;
s = s.replace(/(-?\d+\.\d+)(?![\d.]*[a-zA-Z%])/g, function (m) {
n++;
var r = Math.round(parseFloat(m) * p) / p;
return String(r).replace(/^(-?)0\./, '$1.');
});
count('Numbers rounded', n);
}
var gn = 0, prev;
do {
prev = s;
s = s.replace(/<g(\s[^>]*)?>\s*<\/g>/g, function () { gn++; return ''; })
.replace(/<g\s*\/>/g, function () { gn++; return ''; });
} while (prev !== s);
count('Empty groups', gn);
if (opt.rmIds) {
var ids = [], removed = 0;
s.replace(/\sid="([^"]+)"/g, function (m, id) { ids.push(id); return m; });
ids.forEach(function (id) {
if (refCount(s, id) === 0) { s = dropAttr(s, id); removed++; }
});
count('Unreferenced ids', removed);
}
s = s.replace(/\s+/g, ' ')
.replace(/\s*=\s*"/g, '="')
.replace(/"\s+\/>/g, '"/>')
.replace(/\s+>/g, '>')
.replace(/>\s+</g, '><')
.replace(/\s+\/>/g, '/>');
s = s.replace(/<(\w+)([^>]*)><\/\1>/g, '<$1$2/>');
s = s.replace(/\sstyle=""/g, '').replace(/\sclass=""/g, '');
if (opt.keepNewline) s = s.replace(/></g, '>\n<');
return { out: s.trim(), log: log };
}
function b64(s) { return btoa(unescape(encodeURIComponent(s))); }
function process(text, opt) {
text = String(text || '').trim();
if (!text) return null;
if (!/<svg[\s>]/i.test(text)) return { html: note('No <svg> element found in that.'), share: '' };
var doc = new DOMParser().parseFromString(text, 'image/svg+xml');
if (doc.getElementsByTagName('parsererror').length) {
return { html: note('That is not well-formed XML, so nothing was changed. Look for an unclosed tag or an unbalanced quote.'), share: '' };
}
var r = minify(text, opt);
var out = r.out;
if (!/xmlns="http:\/\/www\.w3\.org\/2000\/svg"/.test(out)) out = out.replace(/<svg/i, '<svg xmlns="http://www.w3.org/2000/svg"');
var broken = new DOMParser().parseFromString(out, 'image/svg+xml').getElementsByTagName('parsererror').length > 0;
var hasViewBox = /\sviewBox="/i.test(out);
var b1 = new TextEncoder().encode(text).length;
var b2 = new TextEncoder().encode(out).length;
var pct = b1 ? (1 - b2 / b1) * 100 : 0;
var html = fmt.big(kb(b2), kb(b1) + ' before — ' + (pct >= 0 ? pct.toFixed(1) + '% smaller' : Math.abs(pct).toFixed(1) + '% larger'));
if (broken) html += note('The result is not well-formed XML. The source probably contains something this text-level pass mangles, such as CDATA or an embedded script. Do not use the output.');
try {
html += '<div style="display:flex;gap:10px;margin:8px 0">' +
'<div style="flex:1;text-align:center;border:1px solid var(--rule2);border-radius:8px;padding:8px"><div style="font-size:12px;color:var(--graphite);margin-bottom:4px">Before</div><img src="data:image/svg+xml;base64,' + b64(text) + '" alt="original" style="max-width:100%;max-height:160px"></div>' +
'<div style="flex:1;text-align:center;border:1px solid var(--rule2);border-radius:8px;padding:8px"><div style="font-size:12px;color:var(--graphite);margin-bottom:4px">After</div><img src="data:image/svg+xml;base64,' + b64(out) + '" alt="cleaned" style="max-width:100%;max-height:160px"></div></div>';
} catch (e) { /* non-Latin characters that will not base64; skip the preview */ }
html += fmt.sec('Cleaned SVG') + outbox(out, 'svgout', 200);
html += fmt.sec('What came out');
var any = false;
Object.keys(r.log).forEach(function (k) { if (r.log[k]) { any = true; html += fmt.line(k, fmt.num(r.log[k], 0)); } });
if (!any) html += fmt.line('Nothing removable', 'this file was already clean');
html += fmt.line('Before', fmt.num(text.length, 0) + ' chars, ' + kb(b1));
html += fmt.line('After', fmt.num(out.length, 0) + ' chars, ' + kb(b2));
if (!hasViewBox) html += note('This SVG has no viewBox. Without one it cannot scale to fit a container — it renders at its intrinsic size and crops or leaves whitespace. If the original had one and it is gone, stop and check the source.');
html += note('This is a text-level pass. Merging path data, converting shapes to paths, collapsing transforms and shortening colours are structural rewrites that need a real optimiser such as SVGO. If the two previews above look different, raise the decimal setting.');
return { html: html, share: 'SVG: ' + kb(b1) + ' to ' + kb(b2) + ' (' + pct.toFixed(0) + '% smaller)' };
}
window.calc = function (v) {
var opt = {
decimals: nv(v.decimals, 2),
rmTitle: !!v.rmTitle,
rmIds: !!v.rmIds,
keepNewline: !!v.keepNewline
};
var pasted = (v.src || '').trim();
if (!v.file && !pasted) return null;
if (!v.file) return process(pasted, opt);
return readText(v.file)
.then(function (text) { return process(text, opt) || { html: note('That file is empty.'), share: '' }; })
.catch(function () { return { html: note('That file could not be read.'), share: '' }; });
};
</script>
<div class="ad ad-bottom"><ins class="adsbygoogle" data-ad-client="ca-pub-3728114481969911" data-ad-slot="5555555555" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div>
</main>
<aside class="side"><div class="ad ad-side"><ins class="adsbygoogle" data-ad-client="ca-pub-3728114481969911" data-ad-slot="3333333333" data-ad-format="vertical" data-full-width-responsive="true"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></aside>
</div>
<footer class="ftr"><span>© 2026 BuildFigure</span><a href="/about">About</a><a href="/privacy">Privacy</a><a href="mailto:rkas7890@gmail.com">Contact</a><a href="https://ko.buildfigure.org/" hreflang="ko" lang="ko">한국어</a><span style="margin-left:auto">Estimates for planning. Check quantities against your own measurements before ordering.</span></footer>
<div class="toast" id="toast"></div>
<script src="/assets/app.js"></script>
</body>
</html>