SVG Optimizer: Minify and Clean SVG Files for the Web
SVGs exported from design tools like Figma, Illustrator, or Inkscape are often bloated with metadata that serves the editor but adds no value on the web. A simple icon exported from Illustrator might be 10KB when the actual path data is under 1KB. Removing editor namespaces, comments, empty groups, and high-precision decimals typically reduces SVG size by 30–80% — directly improving page load times and LCP scores.
Formula
Optimization passes: remove <metadata>, <title>, <!-- comments -->,
editor namespaces (inkscape:, sodipodi:), collapse useless <g> groups,
round decimal precision (4 → 2 digits), merge path commandsBased on SVGO optimization passes. Typical size reduction: 30-80% for designer-exported SVGs which include editor metadata.
Why Exported SVGs Are Bloated
Figma, Illustrator, and Inkscape all embed editor-specific metadata in exported SVGs. Inkscape adds sodipodi: and inkscape: namespace attributes. Illustrator adds Adobe-specific namespaces and <metadata> blocks. Figma adds node IDs and layer names as id attributes. These attributes are invisible to the browser but can double the file size. Comments, XML declarations, and whitespace add more.
What to Watch Out for During Optimization
Most optimizations are safe, but some can break SVGs: removing id attributes breaks CSS selectors and JavaScript that target those IDs. Removing viewBox can break SVGs used in <img> tags. Collapsing groups can remove class attributes used for animation or styling. The safest optimization level removes metadata, comments, and editor namespaces without touching IDs or the viewBox.
SVG in Web Performance: Inline vs External
Inline SVG (pasted into HTML) allows CSS and JS manipulation of internal elements, adds no extra HTTP request, and supports animations. External SVG (via <img src="icon.svg">) is cached separately, simpler to use, but cannot be styled from the parent page's CSS. For icons used repeatedly, sprite sheets are a strong option. Optimized inline SVGs are ideal for hero images and animated illustrations.
Common SVG Bloat Sources
- Editor namespaces: inkscape:, sodipodi:, adobe:, xlink: declarations
- Metadata blocks:
, , <desc> with editor info</span></li><li class="flex gap-3"><span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span><span>XML declarations: <?xml version='1.0'?> (not needed in HTML5)</span></li><li class="flex gap-3"><span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span><span>Comments: <!-- Illustrator generated... --></span></li><li class="flex gap-3"><span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span><span>Empty groups: <g></g> or <g id='layer1'> with no transforms</span></li><li class="flex gap-3"><span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span><span>High decimal precision: d='M 10.0000 20.0000' vs d='M10 20'</span></li></ul></div><div class="space-y-4"><h3 class="text-xl font-semibold text-foreground">Safe vs Risky Optimizations</h3><ul class="text-sm space-y-3"><li class="flex gap-3"><span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span><span>Safe: remove editor namespaces, metadata, comments, XML declaration</span></li><li class="flex gap-3"><span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span><span>Safe: round coordinates to 2 decimal places</span></li><li class="flex gap-3"><span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span><span>Safe: remove empty groups with no attributes</span></li><li class="flex gap-3"><span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span><span>Risky: remove id attributes (breaks CSS/JS references)</span></li><li class="flex gap-3"><span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span><span>Risky: remove viewBox (breaks responsive scaling)</span></li><li class="flex gap-3"><span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span><span>Risky: collapse transforms on animated elements</span></li></ul></div></div><div class="space-y-8 bg-muted/10 rounded-3xl p-8 border border-muted"><h3 class="text-2xl font-bold text-foreground">Frequently Asked Questions</h3><div class="grid gap-6 md:grid-cols-2"><div class="space-y-2"><h3 class="font-medium text-foreground text-base">Why are SVG files so large when exported from Figma or Illustrator?</h3><p class="text-sm">Design tools embed editor-specific metadata in exported SVGs: layer names, node IDs, Adobe/Inkscape namespaces, comments, and XML declarations. None of this is needed by browsers. A typical Figma icon export might be 5–10× larger than the path data alone. Optimization strips this metadata, leaving only what the browser needs to render.</p></div><div class="space-y-2"><h3 class="font-medium text-foreground text-base">What is SVGO?</h3><p class="text-sm">SVGO (SVG Optimizer) is the most widely used open-source SVG optimization library, written in Node.js. It runs a configurable set of optimization passes (plugins) over SVG files. Many online SVG tools and build pipelines (webpack, Vite, Next.js image optimization) use SVGO under the hood.</p></div><div class="space-y-2"><h3 class="font-medium text-foreground text-base">Is it safe to optimize SVGs used as icons?</h3><p class="text-sm">Generally yes, if you use a conservative optimization level that removes only metadata, comments, and editor namespaces. Avoid removing id attributes if any CSS or JavaScript in your page targets those IDs. Removing the viewBox attribute can break icons used in img tags or as CSS backgrounds.</p></div><div class="space-y-2"><h3 class="font-medium text-foreground text-base">Can optimization break my SVG animations?</h3><p class="text-sm">Yes, aggressive optimization can break SMIL animations and CSS animations targeting internal SVG elements. If your SVG has animations, use a conservative setting that preserves IDs, class attributes, and group structure. Test the optimized output in the browser before deploying.</p></div><div class="space-y-2"><h3 class="font-medium text-foreground text-base">What is the difference between inline SVG and an img src SVG?</h3><p class="text-sm">Inline SVG (pasted into HTML) lets CSS and JavaScript access and manipulate internal elements — useful for icon theming and animation. External SVG (via <img src='icon.svg'>) is cached separately and simpler to use, but CSS from the parent page cannot style internal elements.</p></div><div class="space-y-2"><h3 class="font-medium text-foreground text-base">How do I use an optimized SVG in HTML?</h3><p class="text-sm">For inline use: paste the SVG markup directly into your HTML. For external use: reference it as <img src='icon.svg' alt='...'>. For React: copy the SVG markup into a component (removing xmlns if not needed at the root). Most frameworks also support importing SVGs as components via bundler plugins.</p></div><div class="space-y-2"><h3 class="font-medium text-foreground text-base">What is a viewBox?</h3><p class="text-sm">The viewBox attribute defines the internal coordinate system of an SVG: 'min-x min-y width height'. It allows SVGs to scale to any size while maintaining proportions. Without viewBox, SVGs have fixed pixel dimensions. Always preserve the viewBox when optimizing SVGs intended for responsive use.</p></div></div></div></article><section class="max-w-4xl mx-auto px-4 py-12 border-t border-muted"><div class="flex items-center justify-between mb-8"><h2 class="text-2xl font-bold text-foreground">Related Tools</h2><a class="text-sm font-medium text-primary hover:underline flex items-center gap-1" href="/developer">View all <!-- -->developer<!-- --> tools <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></div><div class="grid gap-4 sm:grid-cols-2"><a class="group" href="/developer/json-formatter"><div data-slot="card" data-size="default" class="group/card flex flex-col gap-4 rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl h-full border-muted/50 hover:border-primary/50 hover:bg-muted/5 transition-all duration-300 overflow-hidden"><div data-slot="card-content" class="group-data-[size=sm]/card:px-3 p-5 flex items-start justify-between"><div class="space-y-1"><h3 class="font-semibold text-foreground group-hover:text-primary transition-colors">JSON Formatter</h3><p class="text-xs text-muted-foreground line-clamp-1">Clean and validate JSON data.</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 text-muted-foreground/30 group-hover:text-primary transition-colors group-hover:translate-x-1" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div></a><a class="group" href="/developer/jwt-decoder"><div data-slot="card" data-size="default" class="group/card flex flex-col gap-4 rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl h-full border-muted/50 hover:border-primary/50 hover:bg-muted/5 transition-all duration-300 overflow-hidden"><div data-slot="card-content" class="group-data-[size=sm]/card:px-3 p-5 flex items-start justify-between"><div class="space-y-1"><h3 class="font-semibold text-foreground group-hover:text-primary transition-colors">JWT Decoder</h3><p class="text-xs text-muted-foreground line-clamp-1">Inspect JSON Web Tokens.</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 text-muted-foreground/30 group-hover:text-primary transition-colors group-hover:translate-x-1" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div></a><a class="group" href="/developer/base64-tool"><div data-slot="card" data-size="default" class="group/card flex flex-col gap-4 rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl h-full border-muted/50 hover:border-primary/50 hover:bg-muted/5 transition-all duration-300 overflow-hidden"><div data-slot="card-content" class="group-data-[size=sm]/card:px-3 p-5 flex items-start justify-between"><div class="space-y-1"><h3 class="font-semibold text-foreground group-hover:text-primary transition-colors">Base64 Tool</h3><p class="text-xs text-muted-foreground line-clamp-1">Encode or decode Base64 data.</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 text-muted-foreground/30 group-hover:text-primary transition-colors group-hover:translate-x-1" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div></a><a class="group" href="/developer/sql-formatter"><div data-slot="card" data-size="default" class="group/card flex flex-col gap-4 rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl h-full border-muted/50 hover:border-primary/50 hover:bg-muted/5 transition-all duration-300 overflow-hidden"><div data-slot="card-content" class="group-data-[size=sm]/card:px-3 p-5 flex items-start justify-between"><div class="space-y-1"><h3 class="font-semibold text-foreground group-hover:text-primary transition-colors">SQL Formatter</h3><p class="text-xs text-muted-foreground line-clamp-1">Beautify your SQL queries.</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 text-muted-foreground/30 group-hover:text-primary transition-colors group-hover:translate-x-1" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div></a></div></section></div></div><!--$--><!--/$--></main><footer class="border-t bg-muted/5"><div class="w-full max-w-7xl mx-auto px-4 md:px-6 lg:px-8 py-8 md:py-10"><div class="grid grid-cols-2 md:grid-cols-5 gap-6 md:gap-8"><div class="col-span-2 md:col-span-1 space-y-4"><a class="flex items-center gap-2" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calculator h-5 w-5 text-primary" aria-hidden="true"><rect width="16" height="20" x="4" y="2" rx="2"></rect><line x1="8" x2="16" y1="6" y2="6"></line><line x1="16" x2="16" y1="14" y2="18"></line><path d="M16 10h.01"></path><path d="M12 10h.01"></path><path d="M8 10h.01"></path><path d="M12 14h.01"></path><path d="M8 14h.01"></path><path d="M12 18h.01"></path><path d="M8 18h.01"></path></svg><span class="text-lg font-bold tracking-tight">ModernCalcs</span></a><p class="text-muted-foreground text-xs leading-relaxed max-w-xs">Professional, privacy-first utility platform. All calculations happen locally on your device for total data sovereignty.</p><div class="flex flex-wrap gap-2 pt-1"><span class="text-[10px] font-semibold border rounded-full px-2.5 py-1 text-muted-foreground">🔒 No Data Collected</span><span class="text-[10px] font-semibold border rounded-full px-2.5 py-1 text-muted-foreground">⚡ 500+ Tools</span><span class="text-[10px] font-semibold border rounded-full px-2.5 py-1 text-muted-foreground">🇮🇳 India-First</span></div></div><div class="space-y-3"><h4 class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary/70">Calculators</h4><ul class="flex flex-col gap-2 text-xs text-muted-foreground font-medium"><li><a class="hover:text-primary transition-colors" href="/finance">Finance</a></li><li><a class="hover:text-primary transition-colors" href="/health">Health</a></li><li><a class="hover:text-primary transition-colors" href="/developer">Developer</a></li><li><a class="hover:text-primary transition-colors" href="/saas">SaaS</a></li><li><a class="hover:text-primary transition-colors" href="/ai-writer">AI Writer</a></li></ul></div><div class="space-y-3"><h4 class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary/70">Tools</h4><ul class="flex flex-col gap-2 text-xs text-muted-foreground font-medium"><li><a class="hover:text-primary transition-colors" href="/utilities">Utilities</a></li><li><a class="hover:text-primary transition-colors" href="/interior">Interior</a></li><li><a class="hover:text-primary transition-colors" href="/images">Images</a></li><li><a class="hover:text-primary transition-colors" href="/pdf">PDF</a></li><li><a class="hover:text-primary transition-colors" href="/utilities/writing">Writing</a></li></ul></div><div class="space-y-3"><h4 class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary/70">Resources</h4><ul class="flex flex-col gap-2 text-xs text-muted-foreground font-medium"><li><a class="hover:text-primary transition-colors" href="/guides">Guides</a></li><li><a class="hover:text-primary transition-colors" href="/comparisons">Comparisons</a></li><li><a class="hover:text-primary transition-colors" href="/workflows">Workflows</a></li><li><a class="hover:text-primary transition-colors" href="/">Home</a></li></ul></div><div class="space-y-3"><h4 class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary/70">Company</h4><ul class="flex flex-col gap-2 text-xs text-muted-foreground font-medium"><li><a class="hover:text-primary transition-colors" href="/contact">Contact</a></li><li><a class="hover:text-primary transition-colors" href="/privacy-policy">Privacy</a></li><li><a class="hover:text-primary transition-colors" href="/terms-of-service">Terms</a></li><li><a href="https://github.com/ModernCalcs/moderncalcs" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition-colors inline-flex items-center gap-1.5"><svg class="h-3.5 w-3.5 fill-current" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.867 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.579.688.481C19.137 20.162 22 16.418 22 12c0-5.523-4.477-10-10-10z"></path></svg>GitHub</a></li></ul></div></div><div class="mt-8 pt-6 border-t flex flex-col sm:flex-row justify-between items-center gap-4 text-[10px] font-bold uppercase tracking-[0.15em] text-muted-foreground"><div class="flex items-center gap-4"><span>© 2026 ModernCalcs</span><span class="hidden sm:inline">•</span><span>Local Processing Only</span></div><div><span>All calculations run locally on your device</span></div></div></div></footer><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--><script src="/_next/static/chunks/0ae9w-nr5ni~n.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[479520,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\"],\"\"]\n3:I[311093,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\"],\"SettingsProvider\"]\n4:I[798742,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\"],\"RouteTracker\"]\n5:I[403265,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\"],\"Navbar\"]\n6:I[339756,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\"],\"default\"]\n7:I[758298,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\",\"/_next/static/chunks/0b6px5a75tg2i.js\"],\"default\"]\n8:I[837457,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\"],\"default\"]\n9:I[505014,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\",\"/_next/static/chunks/14jwzyerodis-.js\"],\"default\"]\na:I[522016,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\",\"/_next/static/chunks/14jwzyerodis-.js\"],\"\"]\n16:I[168027,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/06lp.2bmnl7.y.css\",\"style\"]\n:HL[\"/_next/static/chunks/0x1xlq~u6w-ep.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.08e28id.o-okb.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.09~u27dqhyhd6.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"developer\",\"svg-optimizer\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"developer\",{\"children\":[\"svg-optimizer\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/06lp.2bmnl7.y.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0x1xlq~u6w-ep.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/15h-tboov_qbg.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0xduz181o.bb-.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/0appppv0acqjl.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/0ut4mvz-9z6ht.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en-IN\",\"className\":\"geist_85cf2eac-module__7jEzba__variable geist_mono_1bf8cbf6-module__FlyLvG__variable h-full antialiased\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"min-h-full flex flex-col bg-background\",\"children\":[[\"$\",\"$L2\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-FYTQG9FK96\",\"strategy\":\"lazyOnload\"}],[\"$\",\"$L2\",null,{\"id\":\"google-analytics\",\"strategy\":\"lazyOnload\",\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n gtag('config', 'G-FYTQG9FK96', {\\n page_path: window.location.pathname });\\n \"}],[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"ModernCalcs\\\",\\\"url\\\":\\\"https://moderncalcs.com\\\",\\\"logo\\\":\\\"https://moderncalcs.com/favicon.png\\\",\\\"description\\\":\\\"Free, privacy-first online calculators for finance, health, developer tools, and more. India-focused, 500+ tools, all calculations run client-side.\\\",\\\"sameAs\\\":[\\\"https://github.com/ModernCalcs/moderncalcs\\\"]}\"}}],[\"$\",\"script\",\"1\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebSite\\\",\\\"name\\\":\\\"ModernCalcs\\\",\\\"url\\\":\\\"https://moderncalcs.com\\\",\\\"inLanguage\\\":\\\"en-IN\\\",\\\"description\\\":\\\"500+ free privacy-first calculators for India — SIP, EMI, GST, income tax, BMI, and developer tools.\\\"}\"}}]],[\"$\",\"$L3\",null,{\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"$L5\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1\",\"children\":[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$7\",\"errorStyles\":[],\"errorScripts\":[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0b6px5a75tg2i.js\",\"async\":true}]],\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"w-full px-4 md:px-6 lg:px-8 py-24 flex flex-col items-center text-center gap-8 max-w-2xl mx-auto\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center\",\"children\":[\"$\",\"$L9\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"rect\",{\"width\":\"16\",\"height\":\"20\",\"x\":\"4\",\"y\":\"2\",\"rx\":\"2\",\"key\":\"1nb95v\"}],[\"line\",{\"x1\":\"8\",\"x2\":\"16\",\"y1\":\"6\",\"y2\":\"6\",\"key\":\"x4nwl0\"}],[\"line\",{\"x1\":\"16\",\"x2\":\"16\",\"y1\":\"14\",\"y2\":\"18\",\"key\":\"wjye3r\"}],[\"path\",{\"d\":\"M16 10h.01\",\"key\":\"1m94wz\"}],[\"path\",{\"d\":\"M12 10h.01\",\"key\":\"1nrarc\"}],[\"path\",{\"d\":\"M8 10h.01\",\"key\":\"19clt8\"}],[\"path\",{\"d\":\"M12 14h.01\",\"key\":\"1etili\"}],[\"path\",{\"d\":\"M8 14h.01\",\"key\":\"6423bh\"}],[\"path\",{\"d\":\"M12 18h.01\",\"key\":\"mhygvu\"}],[\"path\",{\"d\":\"M8 18h.01\",\"key\":\"lrp35t\"}]],\"className\":\"lucide-calculator w-8 h-8 text-primary\"}]}],[\"$\",\"div\",null,{\"className\":\"space-y-3\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm font-semibold uppercase tracking-widest text-muted-foreground\",\"children\":\"404\"}],[\"$\",\"h1\",null,{\"className\":\"text-4xl font-bold tracking-tight\",\"children\":\"Page Not Found\"}],[\"$\",\"p\",null,{\"className\":\"text-muted-foreground text-lg max-w-md mx-auto\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col sm:flex-row gap-3\",\"children\":[[\"$\",\"$La\",null,{\"href\":\"/\",\"className\":\"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [\u0026_svg]:pointer-events-none [\u0026_svg]:shrink-0 [\u0026_svg:not([class*='size-'])]:size-4 bg-primary text-primary-foreground [a]:hover:bg-primary/80 h-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 rounded-full gap-2\",\"children\":[\"$Lb\",\"Go to Homepage\"]}],\"$Lc\"]}],\"$Ld\"]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],\"$Le\"]}],\"$Lf\",\"$L10\"]}]}]]}],{\"children\":[\"$L11\",{\"children\":[\"$L12\",{\"children\":[\"$L13\",{},null,false,null]},null,false,\"$@14\"]},null,false,\"$@14\"]},null,false,null],\"$L15\",false]],\"m\":\"$undefined\",\"G\":[\"$16\",[\"$L17\",\"$L18\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"3dbMnprCWFUH4kCPIwnal\"}\n"])</script><script>self.__next_f.push([1,"1e:I[443880,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\"],\"Analytics\"]\n1f:I[957215,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\"],\"SpeedInsights\"]\n26:I[897367,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\"],\"ViewportBoundary\"]\n28:I[897367,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\"],\"MetadataBoundary\"]\n29:\"$Sreact.suspense\"\nb:[\"$\",\"$L9\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\",\"key\":\"5wwlr5\"}],[\"path\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\",\"key\":\"r6nss1\"}]],\"className\":\"lucide-house w-4 h-4\"}]\nc:[\"$\",\"$La\",null,{\"href\":\"/finance\",\"className\":\"group/button inline-flex shrink-0 items-center justify-center border bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [\u0026_svg]:pointer-events-none [\u0026_svg]:shrink-0 [\u0026_svg:not([class*='size-'])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 h-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 rounded-full gap-2\",\"children\":[\"Finance Hub \",[\"$\",\"$L9\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M5 12h14\",\"key\":\"1ays0h\"}],[\"path\",{\"d\":\"m12 5 7 7-7 7\",\"key\":\"xquz4c\"}]],\"className\":\"lucide-arrow-right w-4 h-4\"}]]}]\nd:[\"$\",\"div\",null,{\"className\":\"grid grid-cols-2 sm:grid-cols-4 gap-3 w-full pt-4 border-t border-border/40\",\"children\":[[\"$\",\"$La\",\"/finance\",{\"href\":\"/finance\",\"className\":\"p-3 rounded-xl border border-border bg-muted/20 hover:bg-muted/50 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors\",\"children\":\"Finance\"}],[\"$\",\"$La\",\"/health\",{\"href\":\"/health\",\"className\":\"p-3 rounded-xl border border-border bg-muted/20 hover:bg-muted/50 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors\",\"children\":\"Health\"}],[\"$\",\"$La\",\"/developer\",{\"href\":\"/developer\",\"className\":\"p-3 rounded-xl border border-border bg-muted/20 hover:bg-muted/50 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors\",\"children\":\"Developer\"}],[\"$\",\"$La\",\"/utilities\",{\"href\":\"/utilities\",\"className\":\"p-3 rounded-xl border border-border bg-muted/20 hover:bg-muted/50 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors\",\"children\":\"Utilities\"}]]}]\n"])</script><script>self.__next_f.push([1,"e:[\"$\",\"footer\",null,{\"className\":\"border-t bg-muted/5\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full max-w-7xl mx-auto px-4 md:px-6 lg:px-8 py-8 md:py-10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-cols-2 md:grid-cols-5 gap-6 md:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-span-2 md:col-span-1 space-y-4\",\"children\":[[\"$\",\"$La\",null,{\"href\":\"/\",\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"$L9\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$0:f:0:1:0:props:children:1:props:children:props:children:3:props:children:2:props:children:props:notFound:0:props:children:0:props:children:props:iconNode\",\"className\":\"lucide-calculator h-5 w-5 text-primary\"}],[\"$\",\"span\",null,{\"className\":\"text-lg font-bold tracking-tight\",\"children\":\"ModernCalcs\"}]]}],[\"$\",\"p\",null,{\"className\":\"text-muted-foreground text-xs leading-relaxed max-w-xs\",\"children\":\"Professional, privacy-first utility platform. All calculations happen locally on your device for total data sovereignty.\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 pt-1\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[10px] font-semibold border rounded-full px-2.5 py-1 text-muted-foreground\",\"children\":\"🔒 No Data Collected\"}],[\"$\",\"span\",null,{\"className\":\"text-[10px] font-semibold border rounded-full px-2.5 py-1 text-muted-foreground\",\"children\":\"⚡ 500+ Tools\"}],[\"$\",\"span\",null,{\"className\":\"text-[10px] font-semibold border rounded-full px-2.5 py-1 text-muted-foreground\",\"children\":\"🇮🇳 India-First\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-3\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"text-[10px] font-bold uppercase tracking-[0.2em] text-primary/70\",\"children\":\"Calculators\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 text-xs text-muted-foreground font-medium\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/finance\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"Finance\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/health\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"Health\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/developer\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"Developer\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/saas\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"SaaS\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/ai-writer\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"AI Writer\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-3\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"text-[10px] font-bold uppercase tracking-[0.2em] text-primary/70\",\"children\":\"Tools\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 text-xs text-muted-foreground font-medium\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/utilities\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"Utilities\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/interior\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"Interior\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/images\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"Images\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/pdf\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"PDF\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/utilities/writing\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"Writing\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-3\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"text-[10px] font-bold uppercase tracking-[0.2em] text-primary/70\",\"children\":\"Resources\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 text-xs text-muted-foreground font-medium\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/guides\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"Guides\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/comparisons\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"Comparisons\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/workflows\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"Workflows\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"Home\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-3\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"text-[10px] font-bold uppercase tracking-[0.2em] text-primary/70\",\"children\":\"Company\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 text-xs text-muted-foreground font-medium\",\"children\":[[\"$\",\"li\",null,{\"children\":\"$L19\"}],\"$L1a\",\"$L1b\",\"$L1c\"]}]]}]]}],\"$L1d\"]}]}]\n"])</script><script>self.__next_f.push([1,"f:[\"$\",\"$L1e\",null,{}]\n10:[\"$\",\"$L1f\",null,{}]\n11:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n12:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n20:Tb5b,"])</script><script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"Why are SVG files so large when exported from Figma or Illustrator?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Design tools embed editor-specific metadata in exported SVGs: layer names, node IDs, Adobe/Inkscape namespaces, comments, and XML declarations. None of this is needed by browsers. A typical Figma icon export might be 5–10× larger than the path data alone. Optimization strips this metadata, leaving only what the browser needs to render.\"}},{\"@type\":\"Question\",\"name\":\"What is SVGO?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"SVGO (SVG Optimizer) is the most widely used open-source SVG optimization library, written in Node.js. It runs a configurable set of optimization passes (plugins) over SVG files. Many online SVG tools and build pipelines (webpack, Vite, Next.js image optimization) use SVGO under the hood.\"}},{\"@type\":\"Question\",\"name\":\"Is it safe to optimize SVGs used as icons?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Generally yes, if you use a conservative optimization level that removes only metadata, comments, and editor namespaces. Avoid removing id attributes if any CSS or JavaScript in your page targets those IDs. Removing the viewBox attribute can break icons used in img tags or as CSS backgrounds.\"}},{\"@type\":\"Question\",\"name\":\"Can optimization break my SVG animations?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes, aggressive optimization can break SMIL animations and CSS animations targeting internal SVG elements. If your SVG has animations, use a conservative setting that preserves IDs, class attributes, and group structure. Test the optimized output in the browser before deploying.\"}},{\"@type\":\"Question\",\"name\":\"What is the difference between inline SVG and an img src SVG?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Inline SVG (pasted into HTML) lets CSS and JavaScript access and manipulate internal elements — useful for icon theming and animation. External SVG (via ) is cached separately and simpler to use, but CSS from the parent page cannot style internal elements.\"}},{\"@type\":\"Question\",\"name\":\"How do I use an optimized SVG in HTML?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"For inline use: paste the SVG markup directly into your HTML. For external use: reference it as . For React: copy the SVG markup into a component (removing xmlns if not needed at the root). Most frameworks also support importing SVGs as components via bundler plugins.\"}},{\"@type\":\"Question\",\"name\":\"What is a viewBox?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"The viewBox attribute defines the internal coordinate system of an SVG: 'min-x min-y width height'. It allows SVGs to scale to any size while maintaining proportions. Without viewBox, SVGs have fixed pixel dimensions. Always preserve the viewBox when optimizing SVGs intended for responsive use.\"}}]}"])</script><script>self.__next_f.push([1,"13:[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-0\",\"children\":[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"SoftwareApplication\\\",\\\"name\\\":\\\"SVG Optimizer\\\",\\\"description\\\":\\\"SVG Optimizer - Developer Tools Hub. Secure, high-precision, client-side online tool.\\\",\\\"url\\\":\\\"https://moderncalcs.com/developer/svg-optimizer\\\",\\\"operatingSystem\\\":\\\"Any\\\",\\\"applicationCategory\\\":\\\"UtilityApplication\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"INR\\\"}}\"}}],[\"$\",\"script\",\"1\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$20\"}}]],\"$L21\",\"$L22\"]}],[\"$L23\"],\"$L24\"]}]\n25:[]\n14:\"$W25\"\n15:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L26\",null,{\"children\":\"$L27\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$29\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L2a\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n17:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/06lp.2bmnl7.y.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n18:[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0x1xlq~u6w-ep.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n"])</script><script>self.__next_f.push([1,"2b:I[500865,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\",\"/_next/static/chunks/14jwzyerodis-.js\"],\"ShareButton\"]\n2c:I[191682,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\",\"/_next/static/chunks/14jwzyerodis-.js\"],\"SvgOptimizerClient\"]\n31:I[897367,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\"],\"OutletBoundary\"]\n19:[\"$\",\"$La\",null,{\"href\":\"/contact\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"Contact\"}]\n1a:[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/privacy-policy\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"Privacy\"}]}]\n1b:[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/terms-of-service\",\"className\":\"hover:text-primary transition-colors\",\"children\":\"Terms\"}]}]\n1c:[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"https://github.com/ModernCalcs/moderncalcs\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"hover:text-primary transition-colors inline-flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"h-3.5 w-3.5 fill-current\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\",\"d\":\"M12 2C6.477 2 2 6.477 2 12c0 4.42 2.867 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.579.688.481C19.137 20.162 22 16.418 22 12c0-5.523-4.477-10-10-10z\"}]}],\"GitHub\"]}]}]\n1d:[\"$\",\"div\",null,{\"className\":\"mt-8 pt-6 border-t flex flex-col sm:flex-row justify-between items-center gap-4 text-[10px] font-bold uppercase tracking-[0.15em] text-muted-foreground\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-4\",\"children\":[[\"$\",\"span\",null,{\"children\":\"© 2026 ModernCalcs\"}],[\"$\",\"span\",null,{\"className\":\"hidden sm:inline\",\"children\":\"•\"}],[\"$\",\"span\",null,{\"children\":\"Local Processing Only\"}]]}],[\"$\",\"div\",null,{\"children\":[\"$\",\"span\",null,{\"children\":\"All calculations run locally on your device\"}]}]]}]\n"])</script><script>self.__next_f.push([1,"21:[\"$\",\"div\",null,{\"className\":\"w-full max-w-7xl mx-auto px-4 md:px-6 lg:px-8 pt-4 md:pt-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between gap-4 border-b border-border/20 pb-4 mb-4 md:mb-6\",\"children\":[[\"$\",\"nav\",null,{\"className\":\"flex overflow-x-auto whitespace-nowrap no-scrollbar\",\"aria-label\":\"Breadcrumb\",\"children\":[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"Home\\\",\\\"item\\\":\\\"https://moderncalcs.com\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"Developer Tools Hub\\\",\\\"item\\\":\\\"https://moderncalcs.com/developer\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":3,\\\"name\\\":\\\"SVG Optimizer\\\",\\\"item\\\":\\\"https://moderncalcs.com/developer/svg-optimizer\\\"}]}\"}}]],[\"$\",\"ol\",null,{\"className\":\"flex items-center space-x-2 text-xs md:text-sm text-muted-foreground\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$La\",null,{\"href\":\"/\",\"className\":\"flex items-center hover:text-foreground transition-colors\",\"children\":[[\"$\",\"$L9\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$b:props:iconNode\",\"className\":\"lucide-house h-4 w-4\"}],[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"Home\"}]]}]}],[[\"$\",\"li\",\"/developer\",{\"className\":\"flex items-center space-x-2\",\"children\":[[\"$\",\"$L9\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"m9 18 6-6-6-6\",\"key\":\"mthhwq\"}]],\"className\":\"lucide-chevron-right h-4 w-4 shrink-0 text-muted-foreground/40\"}],[\"$\",\"$La\",null,{\"href\":\"/developer\",\"className\":\"hover:text-foreground transition-colors\",\"children\":\"Developer Tools Hub\"}]]}],[\"$\",\"li\",\"/developer/svg-optimizer\",{\"className\":\"flex items-center space-x-2\",\"children\":[[\"$\",\"$L9\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$21:props:children:props:children:0:props:children:1:props:children:1:0:props:children:0:props:iconNode\",\"className\":\"lucide-chevron-right h-4 w-4 shrink-0 text-muted-foreground/40\"}],[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"SVG Optimizer\"}]]}]]]}]]}],[\"$\",\"$L2b\",null,{}]]}]}]\n"])</script><script>self.__next_f.push([1,"22:[\"$\",\"div\",null,{\"className\":\"w-full max-w-7xl mx-auto px-4 md:px-6 lg:px-8 pb-12\",\"children\":[[\"$\",\"$L2c\",null,{}],[\"$\",\"article\",null,{\"className\":\"max-w-4xl mx-auto px-4 py-12 space-y-12 text-muted-foreground leading-relaxed\",\"children\":[[\"$\",\"div\",null,{\"className\":\"space-y-6\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-3xl md:text-4xl font-bold text-foreground tracking-tight\",\"children\":\"SVG Optimizer: Minify and Clean SVG Files for the Web\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-muted-foreground/80\",\"dangerouslySetInnerHTML\":{\"__html\":\"SVGs exported from design tools like \u003cstrong\u003eFigma, Illustrator, or Inkscape\u003c/strong\u003e are often bloated with metadata that serves the editor but adds no value on the web. A simple icon exported from Illustrator might be 10KB when the actual path data is under 1KB. Removing editor namespaces, comments, empty groups, and high-precision decimals typically reduces SVG size by \u003cstrong\u003e30–80%\u003c/strong\u003e — directly improving page load times and LCP scores.\"}}],[\"$\",\"div\",null,{\"className\":\"bg-muted/30 border border-muted rounded-2xl p-6 font-mono text-sm text-foreground shadow-sm\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-xs uppercase tracking-widest text-muted-foreground mb-2 font-sans\",\"children\":\"Formula\"}],\"Optimization passes: remove \u003cmetadata\u003e, \u003ctitle\u003e, \u003c!-- comments --\u003e,\\neditor namespaces (inkscape:, sodipodi:), collapse useless \u003cg\u003e groups,\\nround decimal precision (4 → 2 digits), merge path commands\",[\"$\",\"p\",null,{\"className\":\"text-muted-foreground mt-2 text-xs font-sans italic\",\"children\":\"Based on SVGO optimization passes. Typical size reduction: 30-80% for designer-exported SVGs which include editor metadata.\"}]]}],\"$undefined\"]}],[\"$\",\"div\",null,{\"className\":\"grid gap-12 sm:grid-cols-2\",\"children\":[[\"$\",\"div\",\"Why Exported SVGs Are Bloated\",{\"className\":\"space-y-4\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-xl font-semibold text-foreground border-l-4 border-primary pl-4\",\"children\":\"Why Exported SVGs Are Bloated\"}],[\"$\",\"p\",null,{\"className\":\"text-sm leading-relaxed\",\"dangerouslySetInnerHTML\":{\"__html\":\"Figma, Illustrator, and Inkscape all embed editor-specific metadata in exported SVGs. \u003cstrong\u003eInkscape\u003c/strong\u003e adds \u003ccode\u003esodipodi:\u003c/code\u003e and \u003ccode\u003einkscape:\u003c/code\u003e namespace attributes. \u003cstrong\u003eIllustrator\u003c/strong\u003e adds Adobe-specific namespaces and \u003ccode\u003e\u0026lt;metadata\u0026gt;\u003c/code\u003e blocks. \u003cstrong\u003eFigma\u003c/strong\u003e adds node IDs and layer names as \u003ccode\u003eid\u003c/code\u003e attributes. These attributes are invisible to the browser but can double the file size. Comments, XML declarations, and whitespace add more.\"}}]]}],[\"$\",\"div\",\"What to Watch Out for During Optimization\",{\"className\":\"space-y-4\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-xl font-semibold text-foreground border-l-4 border-primary pl-4\",\"children\":\"What to Watch Out for During Optimization\"}],[\"$\",\"p\",null,{\"className\":\"text-sm leading-relaxed\",\"dangerouslySetInnerHTML\":{\"__html\":\"Most optimizations are safe, but some can break SVGs: removing \u003ccode\u003eid\u003c/code\u003e attributes breaks CSS selectors and JavaScript that target those IDs. Removing \u003ccode\u003eviewBox\u003c/code\u003e can break SVGs used in \u003ccode\u003e\u0026lt;img\u0026gt;\u003c/code\u003e tags. Collapsing groups can remove \u003ccode\u003eclass\u003c/code\u003e attributes used for animation or styling. The safest optimization level removes metadata, comments, and editor namespaces without touching IDs or the viewBox.\"}}]]}],[\"$\",\"div\",\"SVG in Web Performance: Inline vs External\",{\"className\":\"space-y-4\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-xl font-semibold text-foreground border-l-4 border-primary pl-4\",\"children\":\"SVG in Web Performance: Inline vs External\"}],\"$L2d\"]}]]}],\"$undefined\",\"$L2e\",\"$L2f\"]}],\"$L30\"]}]\n"])</script><script>self.__next_f.push([1,"23:[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/14jwzyerodis-.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n24:[\"$\",\"$L31\",null,{\"children\":[\"$\",\"$29\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@32\"}]}]\n"])</script><script>self.__next_f.push([1,"2d:[\"$\",\"p\",null,{\"className\":\"text-sm leading-relaxed\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cstrong\u003eInline SVG\u003c/strong\u003e (pasted into HTML) allows CSS and JS manipulation of internal elements, adds no extra HTTP request, and supports animations. \u003cstrong\u003eExternal SVG\u003c/strong\u003e (via \u003ccode\u003e\u0026lt;img src=\\\"icon.svg\\\"\u0026gt;\u003c/code\u003e) is cached separately, simpler to use, but cannot be styled from the parent page's CSS. For icons used repeatedly, sprite sheets are a strong option. Optimized inline SVGs are ideal for hero images and animated illustrations.\"}}]\n"])</script><script>self.__next_f.push([1,"2e:[\"$\",\"div\",null,{\"className\":\"grid gap-12 sm:grid-cols-2\",\"children\":[[\"$\",\"div\",\"Common SVG Bloat Sources\",{\"className\":\"space-y-4\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-xl font-semibold text-foreground\",\"children\":\"Common SVG Bloat Sources\"}],[\"$\",\"ul\",null,{\"className\":\"text-sm space-y-3\",\"children\":[[\"$\",\"li\",\"Editor namespaces: inkscape:, sodipodi:, adobe:, xlink: declarations\",{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0\"}],[\"$\",\"span\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"Editor namespaces: inkscape:, sodipodi:, adobe:, xlink: declarations\"}}]]}],[\"$\",\"li\",\"Metadata blocks: \u003cmetadata\u003e, \u003ctitle\u003e, \u003cdesc\u003e with editor info\",{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0\"}],[\"$\",\"span\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"Metadata blocks: \u003cmetadata\u003e, \u003ctitle\u003e, \u003cdesc\u003e with editor info\"}}]]}],[\"$\",\"li\",\"XML declarations: \u003c?xml version='1.0'?\u003e (not needed in HTML5)\",{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0\"}],[\"$\",\"span\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"XML declarations: \u003c?xml version='1.0'?\u003e (not needed in HTML5)\"}}]]}],[\"$\",\"li\",\"Comments: \u003c!-- Illustrator generated... --\u003e\",{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0\"}],[\"$\",\"span\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"Comments: \u003c!-- Illustrator generated... --\u003e\"}}]]}],[\"$\",\"li\",\"Empty groups: \u003cg\u003e\u003c/g\u003e or \u003cg id='layer1'\u003e with no transforms\",{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0\"}],[\"$\",\"span\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"Empty groups: \u003cg\u003e\u003c/g\u003e or \u003cg id='layer1'\u003e with no transforms\"}}]]}],[\"$\",\"li\",\"High decimal precision: d='M 10.0000 20.0000' vs d='M10 20'\",{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0\"}],[\"$\",\"span\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"High decimal precision: d='M 10.0000 20.0000' vs d='M10 20'\"}}]]}]]}]]}],[\"$\",\"div\",\"Safe vs Risky Optimizations\",{\"className\":\"space-y-4\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-xl font-semibold text-foreground\",\"children\":\"Safe vs Risky Optimizations\"}],[\"$\",\"ul\",null,{\"className\":\"text-sm space-y-3\",\"children\":[[\"$\",\"li\",\"Safe: remove editor namespaces, metadata, comments, XML declaration\",{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0\"}],[\"$\",\"span\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"Safe: remove editor namespaces, metadata, comments, XML declaration\"}}]]}],[\"$\",\"li\",\"Safe: round coordinates to 2 decimal places\",{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0\"}],[\"$\",\"span\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"Safe: round coordinates to 2 decimal places\"}}]]}],[\"$\",\"li\",\"Safe: remove empty groups with no attributes\",{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0\"}],[\"$\",\"span\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"Safe: remove empty groups with no attributes\"}}]]}],[\"$\",\"li\",\"Risky: remove id attributes (breaks CSS/JS references)\",{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0\"}],[\"$\",\"span\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"Risky: remove id attributes (breaks CSS/JS references)\"}}]]}],[\"$\",\"li\",\"Risky: remove viewBox (breaks responsive scaling)\",{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0\"}],[\"$\",\"span\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"Risky: remove viewBox (breaks responsive scaling)\"}}]]}],[\"$\",\"li\",\"Risky: collapse transforms on animated elements\",{\"className\":\"flex gap-3\",\"children\":[\"$L33\",\"$L34\"]}]]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"2f:[\"$\",\"div\",null,{\"className\":\"space-y-8 bg-muted/10 rounded-3xl p-8 border border-muted\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold text-foreground\",\"children\":\"Frequently Asked Questions\"}],[\"$\",\"div\",null,{\"className\":\"grid gap-6 md:grid-cols-2\",\"children\":[[\"$\",\"div\",\"Why are SVG files so large when exported from Figma or Illustrator?\",{\"className\":\"space-y-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-medium text-foreground text-base\",\"children\":\"Why are SVG files so large when exported from Figma or Illustrator?\"}],[\"$\",\"p\",null,{\"className\":\"text-sm\",\"dangerouslySetInnerHTML\":{\"__html\":\"Design tools embed editor-specific metadata in exported SVGs: layer names, node IDs, Adobe/Inkscape namespaces, comments, and XML declarations. None of this is needed by browsers. A typical Figma icon export might be 5–10× larger than the path data alone. Optimization strips this metadata, leaving only what the browser needs to render.\"}}]]}],[\"$\",\"div\",\"What is SVGO?\",{\"className\":\"space-y-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-medium text-foreground text-base\",\"children\":\"What is SVGO?\"}],[\"$\",\"p\",null,{\"className\":\"text-sm\",\"dangerouslySetInnerHTML\":{\"__html\":\"SVGO (SVG Optimizer) is the most widely used open-source SVG optimization library, written in Node.js. It runs a configurable set of optimization passes (plugins) over SVG files. Many online SVG tools and build pipelines (webpack, Vite, Next.js image optimization) use SVGO under the hood.\"}}]]}],[\"$\",\"div\",\"Is it safe to optimize SVGs used as icons?\",{\"className\":\"space-y-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-medium text-foreground text-base\",\"children\":\"Is it safe to optimize SVGs used as icons?\"}],[\"$\",\"p\",null,{\"className\":\"text-sm\",\"dangerouslySetInnerHTML\":{\"__html\":\"Generally yes, if you use a conservative optimization level that removes only metadata, comments, and editor namespaces. Avoid removing id attributes if any CSS or JavaScript in your page targets those IDs. Removing the viewBox attribute can break icons used in img tags or as CSS backgrounds.\"}}]]}],[\"$\",\"div\",\"Can optimization break my SVG animations?\",{\"className\":\"space-y-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-medium text-foreground text-base\",\"children\":\"Can optimization break my SVG animations?\"}],[\"$\",\"p\",null,{\"className\":\"text-sm\",\"dangerouslySetInnerHTML\":{\"__html\":\"Yes, aggressive optimization can break SMIL animations and CSS animations targeting internal SVG elements. If your SVG has animations, use a conservative setting that preserves IDs, class attributes, and group structure. Test the optimized output in the browser before deploying.\"}}]]}],[\"$\",\"div\",\"What is the difference between inline SVG and an img src SVG?\",{\"className\":\"space-y-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-medium text-foreground text-base\",\"children\":\"What is the difference between inline SVG and an img src SVG?\"}],[\"$\",\"p\",null,{\"className\":\"text-sm\",\"dangerouslySetInnerHTML\":{\"__html\":\"Inline SVG (pasted into HTML) lets CSS and JavaScript access and manipulate internal elements — useful for icon theming and animation. External SVG (via \u003cimg src='icon.svg'\u003e) is cached separately and simpler to use, but CSS from the parent page cannot style internal elements.\"}}]]}],[\"$\",\"div\",\"How do I use an optimized SVG in HTML?\",{\"className\":\"space-y-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-medium text-foreground text-base\",\"children\":\"How do I use an optimized SVG in HTML?\"}],[\"$\",\"p\",null,{\"className\":\"text-sm\",\"dangerouslySetInnerHTML\":{\"__html\":\"For inline use: paste the SVG markup directly into your HTML. For external use: reference it as \u003cimg src='icon.svg' alt='...'\u003e. For React: copy the SVG markup into a component (removing xmlns if not needed at the root). Most frameworks also support importing SVGs as components via bundler plugins.\"}}]]}],\"$L35\"]}]]}]\n"])</script><script>self.__next_f.push([1,"30:[\"$\",\"section\",null,{\"className\":\"max-w-4xl mx-auto px-4 py-12 border-t border-muted\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between mb-8\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl font-bold text-foreground\",\"children\":\"Related Tools\"}],[\"$\",\"$La\",null,{\"href\":\"/developer\",\"className\":\"text-sm font-medium text-primary hover:underline flex items-center gap-1\",\"children\":[\"View all \",\"developer\",\" tools \",[\"$\",\"$L9\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$c:props:children:1:props:iconNode\",\"className\":\"lucide-arrow-right h-4 w-4\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"grid gap-4 sm:grid-cols-2\",\"children\":[[\"$\",\"$La\",\"/developer/json-formatter\",{\"href\":\"/developer/json-formatter\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card\",\"data-size\":\"default\",\"className\":\"group/card flex flex-col gap-4 rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[\u003eimg:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl h-full border-muted/50 hover:border-primary/50 hover:bg-muted/5 transition-all duration-300 overflow-hidden\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"group-data-[size=sm]/card:px-3 p-5 flex items-start justify-between\",\"children\":[[\"$\",\"div\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold text-foreground group-hover:text-primary transition-colors\",\"children\":\"JSON Formatter\"}],[\"$\",\"p\",null,{\"className\":\"text-xs text-muted-foreground line-clamp-1\",\"children\":\"Clean and validate JSON data.\"}]]}],[\"$\",\"$L9\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$c:props:children:1:props:iconNode\",\"className\":\"lucide-arrow-right h-4 w-4 text-muted-foreground/30 group-hover:text-primary transition-colors group-hover:translate-x-1\"}]]}]}]}],[\"$\",\"$La\",\"/developer/jwt-decoder\",{\"href\":\"/developer/jwt-decoder\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card\",\"data-size\":\"default\",\"className\":\"group/card flex flex-col gap-4 rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[\u003eimg:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl h-full border-muted/50 hover:border-primary/50 hover:bg-muted/5 transition-all duration-300 overflow-hidden\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"group-data-[size=sm]/card:px-3 p-5 flex items-start justify-between\",\"children\":[[\"$\",\"div\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold text-foreground group-hover:text-primary transition-colors\",\"children\":\"JWT Decoder\"}],[\"$\",\"p\",null,{\"className\":\"text-xs text-muted-foreground line-clamp-1\",\"children\":\"Inspect JSON Web Tokens.\"}]]}],[\"$\",\"$L9\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$c:props:children:1:props:iconNode\",\"className\":\"lucide-arrow-right h-4 w-4 text-muted-foreground/30 group-hover:text-primary transition-colors group-hover:translate-x-1\"}]]}]}]}],[\"$\",\"$La\",\"/developer/base64-tool\",{\"href\":\"/developer/base64-tool\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card\",\"data-size\":\"default\",\"className\":\"group/card flex flex-col gap-4 rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[\u003eimg:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl h-full border-muted/50 hover:border-primary/50 hover:bg-muted/5 transition-all duration-300 overflow-hidden\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"group-data-[size=sm]/card:px-3 p-5 flex items-start justify-between\",\"children\":[\"$L36\",\"$L37\"]}]}]}],\"$L38\"]}]]}]\n"])</script><script>self.__next_f.push([1,"33:[\"$\",\"span\",null,{\"className\":\"h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0\"}]\n34:[\"$\",\"span\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"Risky: collapse transforms on animated elements\"}}]\n35:[\"$\",\"div\",\"What is a viewBox?\",{\"className\":\"space-y-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-medium text-foreground text-base\",\"children\":\"What is a viewBox?\"}],[\"$\",\"p\",null,{\"className\":\"text-sm\",\"dangerouslySetInnerHTML\":{\"__html\":\"The viewBox attribute defines the internal coordinate system of an SVG: 'min-x min-y width height'. It allows SVGs to scale to any size while maintaining proportions. Without viewBox, SVGs have fixed pixel dimensions. Always preserve the viewBox when optimizing SVGs intended for responsive use.\"}}]]}]\n36:[\"$\",\"div\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold text-foreground group-hover:text-primary transition-colors\",\"children\":\"Base64 Tool\"}],[\"$\",\"p\",null,{\"className\":\"text-xs text-muted-foreground line-clamp-1\",\"children\":\"Encode or decode Base64 data.\"}]]}]\n37:[\"$\",\"$L9\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$c:props:children:1:props:iconNode\",\"className\":\"lucide-arrow-right h-4 w-4 text-muted-foreground/30 group-hover:text-primary transition-colors group-hover:translate-x-1\"}]\n38:[\"$\",\"$La\",\"/developer/sql-formatter\",{\"href\":\"/developer/sql-formatter\",\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card\",\"data-size\":\"default\",\"className\":\"group/card flex flex-col gap-4 rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[\u003eimg:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl h-full border-muted/50 hover:border-primary/50 hover:bg-muted/5 transition-all duration-300 overflow-hidden\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"group-data-[size=sm]/card:px-3 p-5 flex items-start justify-between\",\"children\":[[\"$\",\"div\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold text-foreground group-hover:text-primary transition-colors\",\"children\":\"SQL Formatter\"}],[\"$\",\"p\",null,{\"className\":\"text-xs text-muted-foreground line-clamp-1\",\"children\":\"Beautify your SQL queries.\"}]]}],[\"$\",\"$L9\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$c:props:children:1:props:iconNode\",\"className\":\"lucide-arrow-right h-4 w-4 text-muted-foreground/30 group-hover:text-primary transition-colors group-hover:translate-x-1\"}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"27:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"39:I[27201,[\"/_next/static/chunks/15h-tboov_qbg.js\",\"/_next/static/chunks/0xduz181o.bb-.js\",\"/_next/static/chunks/0appppv0acqjl.js\",\"/_next/static/chunks/0ut4mvz-9z6ht.js\"],\"IconMark\"]\n"])</script><script>self.__next_f.push([1,"2a:[[\"$\",\"title\",\"0\",{\"children\":\"SVG Optimizer - Free Online Tool | ModernCalcs\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Optimize and minify SVG files by removing metadata, comments, and redundant paths. Reduce SVG file size by 30-80% for faster web pages.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"ModernCalcs Team\"}],[\"$\",\"link\",\"3\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"4\",{\"name\":\"creator\",\"content\":\"ModernCalcs\"}],[\"$\",\"meta\",\"5\",{\"name\":\"publisher\",\"content\":\"ModernCalcs\"}],[\"$\",\"meta\",\"6\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"7\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"8\",{\"rel\":\"canonical\",\"href\":\"https://moderncalcs.com/developer/svg-optimizer\"}],[\"$\",\"meta\",\"9\",{\"name\":\"format-detection\",\"content\":\"telephone=no, address=no, email=no\"}],[\"$\",\"meta\",\"10\",{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"11\",{\"name\":\"apple-mobile-web-app-title\",\"content\":\"ModernCalcs\"}],[\"$\",\"meta\",\"12\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"default\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:title\",\"content\":\"SVG Optimizer\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:description\",\"content\":\"Optimize and minify SVG files by removing metadata, comments, and redundant paths. Reduce SVG file size by 30-80% for faster web pages.\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:url\",\"content\":\"https://moderncalcs.com/developer/svg-optimizer\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:creator\",\"content\":\"@moderncalcs\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:title\",\"content\":\"Free Online Calculators for India | ModernCalcs\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:description\",\"content\":\"Fast, accurate, and privacy-first calculators for finance, health, and more.\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:image\",\"content\":\"https://moderncalcs.com/og-image.png\"}],[\"$\",\"link\",\"22\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0x4ljuff7-n~i.ico\",\"sizes\":\"1024x1024\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"23\",{\"rel\":\"icon\",\"href\":\"/favicon.png\"}],[\"$\",\"link\",\"24\",{\"rel\":\"apple-touch-icon\",\"href\":\"/icon-192.png\"}],[\"$\",\"$L39\",\"25\",{}]]\n"])</script><script>self.__next_f.push([1,"32:null\n"])</script></body></html>