SVG Optimization Guide | Reduce File Size & Improve Performance

Why Optimize SVG Files?

SVG (Scalable Vector Graphics) files exported from design tools like Figma, Illustrator, Sketch, and Inkscape often contain far more data than necessary. This invisible bloat includes:

- Editor metadata (which tool created the file, version info) - Unused definitions and gradients - Redundant attributes (default values that browsers apply anyway) - Comments and whitespace - Unnecessary precision (coordinates with 8 decimal places when 2 would suffice)

A 10 KB icon might shrink to 2 KB after optimization — an 80% reduction — without any visual change. For sites using dozens of SVG icons, this adds up to significant bandwidth and performance savings.

What Gets Removed During Optimization

Metadata elements: ``, ``, `` (unless needed for accessibility)</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Editor-specific data</strong>: Inkscape namespaces (`inkscape:`, `sodipodi:`), Illustrator attributes (`data-name`, `i:`), Figma IDs</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Comments</strong>: XML comments (``) that served as notes during design</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Empty groups</strong>: `<g>` elements that contain nothing or serve no purpose</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Unused definitions</strong>: Gradients, patterns, and filters in `<defs>` that are not referenced</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Default attribute values</strong>: `fill="black"` when black is the default, `stroke-width="1"` when 1 is default</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Excessive precision</strong>: Coordinates like `12.34567890` truncated to `12.35`</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Whitespace</strong>: Newlines, tabs, and spaces that make the file readable but add bytes</p></section><section id="manual-optimization-techniques" class="scroll-mt-20"><div class="mb-4 flex items-start gap-3"><span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-xs font-bold bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">3</span> <h2 class="text-xl font-bold text-gray-900 dark:text-white">Manual Optimization Techniques</h2></div> <p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Before using automated tools, consider these manual improvements:</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Simplify paths</strong>: Reduce anchor points in your design tool. Every point adds bytes.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Use shapes instead of paths</strong>: A `<circle>` or `<rect>` is smaller than the equivalent `<path>`.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Optimize transforms</strong>: Apply transforms to coordinates directly instead of using `transform` attributes.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Remove hidden layers</strong>: Delete any layers or elements that are not visible in the final output.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Use consistent precision</strong>: 2-3 decimal places is usually sufficient for web graphics.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Prefer CSS for styling</strong>: Move fills, strokes, and fonts to external CSS when the same SVG is used multiple times.</p></section><section id="automated-optimization-tools" class="scroll-mt-20"><div class="mb-4 flex items-start gap-3"><span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-xs font-bold bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">4</span> <h2 class="text-xl font-bold text-gray-900 dark:text-white">Automated Optimization Tools</h2></div> <p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">SVGO (CLI)</strong>: The industry-standard Node.js tool for SVG optimization. Highly configurable with plugins for different optimization strategies.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">SVGOMG (Web)</strong>: A web interface for SVGO by Jake Archibald. Paste or upload SVG and toggle optimization options visually.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Utiliify SVG Optimizer</strong>: A browser-based tool that applies common optimizations (metadata removal, whitespace cleanup, empty group removal) with no uploads — your files stay local.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Design tool plugins</strong>: Figma, Sketch, and Illustrator have export plugins that can optimize on export.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400">For most use cases, running your SVGs through SVGOMG or the Utiliify optimizer before adding them to your codebase is sufficient. For build pipelines, integrate SVGO as part of your asset processing.</p></section><section id="optimization-best-practices" class="scroll-mt-20"><div class="mb-4 flex items-start gap-3"><span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-xs font-bold bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">5</span> <h2 class="text-xl font-bold text-gray-900 dark:text-white">Optimization Best Practices</h2></div> <p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Optimize before committing</strong>: Add SVG optimization to your design handoff checklist. Optimized files are smaller, cleaner, and easier to maintain.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Keep originals</strong>: Store the original, unoptimized SVGs from your design tool separately. Optimization is lossy for editability — you cannot easily recreate metadata once removed.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Test after optimization</strong>: Open the optimized SVG in a browser to verify it looks identical. Some aggressive optimizations (like removing `viewBox`) can break rendering.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Use sprites for multiple icons</strong>: Combine frequently used icons into an SVG sprite sheet and reference them with `<use>`. This reduces HTTP requests and enables browser caching.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><strong class="font-semibold text-gray-900 dark:text-white">Consider inline vs. external</strong>: Small SVGs (< 2 KB) can be inlined in HTML for fewer network requests. Larger SVGs should be external and cached.</p></section><section id="measuring-the-impact" class="scroll-mt-20"><div class="mb-4 flex items-start gap-3"><span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-xs font-bold bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">6</span> <h2 class="text-xl font-bold text-gray-900 dark:text-white">Measuring the Impact</h2></div> <p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400">To measure optimization impact on your site:</p><div class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400"><p class="mb-1.5">1. <strong class="font-semibold text-gray-900 dark:text-white">Before/after file size</strong>: Compare the original and optimized file sizes. Aim for 30-60% reduction.</p></div><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400">2. <strong class="font-semibold text-gray-900 dark:text-white">Total SVG weight</strong>: Sum all SVG assets on a page. This should be < 50 KB for most sites.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400">3. <strong class="font-semibold text-gray-900 dark:text-white">Lighthouse audit</strong>: Run a Lighthouse performance audit. Large, unoptimized images (including SVGs) are flagged in the "Properly size images" and "Efficiently encode images" audits.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400">4. <strong class="font-semibold text-gray-900 dark:text-white">Network panel</strong>: Check the browser DevTools Network panel to see how long SVG assets take to download.</p><p class="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Optimized SVGs load faster, improve Core Web Vitals scores (especially LCP and CLS for above-the-fold icons), and reduce bandwidth costs for both you and your users.</p></section></div></article> <aside class="w-full shrink-0 lg:w-72"><div class="lg:sticky lg:top-24"><nav class="mb-6 rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900"><h2 class="mb-3 flex items-center gap-2 text-sm font-bold text-gray-900 dark:text-white"><svg class="h-4 w-4 text-purple-700 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path></svg> In This Guide</h2> <ol class="space-y-1.5"><li><a href="#why-optimize-svg-files" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-xs text-gray-600 transition-colors hover:bg-gray-50 hover:text-accent-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-accent-400"><span class="flex h-5 w-5 shrink-0 items-center justify-center rounded text-[10px] font-semibold bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">1</span> <span class="line-clamp-2">Why Optimize SVG Files?</span></a></li><li><a href="#what-gets-removed-during-optimization" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-xs text-gray-600 transition-colors hover:bg-gray-50 hover:text-accent-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-accent-400"><span class="flex h-5 w-5 shrink-0 items-center justify-center rounded text-[10px] font-semibold bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">2</span> <span class="line-clamp-2">What Gets Removed During Optimization</span></a></li><li><a href="#manual-optimization-techniques" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-xs text-gray-600 transition-colors hover:bg-gray-50 hover:text-accent-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-accent-400"><span class="flex h-5 w-5 shrink-0 items-center justify-center rounded text-[10px] font-semibold bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">3</span> <span class="line-clamp-2">Manual Optimization Techniques</span></a></li><li><a href="#automated-optimization-tools" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-xs text-gray-600 transition-colors hover:bg-gray-50 hover:text-accent-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-accent-400"><span class="flex h-5 w-5 shrink-0 items-center justify-center rounded text-[10px] font-semibold bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">4</span> <span class="line-clamp-2">Automated Optimization Tools</span></a></li><li><a href="#optimization-best-practices" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-xs text-gray-600 transition-colors hover:bg-gray-50 hover:text-accent-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-accent-400"><span class="flex h-5 w-5 shrink-0 items-center justify-center rounded text-[10px] font-semibold bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">5</span> <span class="line-clamp-2">Optimization Best Practices</span></a></li><li><a href="#measuring-the-impact" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-xs text-gray-600 transition-colors hover:bg-gray-50 hover:text-accent-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-accent-400"><span class="flex h-5 w-5 shrink-0 items-center justify-center rounded text-[10px] font-semibold bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">6</span> <span class="line-clamp-2">Measuring the Impact</span></a></li></ol></nav> <div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900"><h2 class="mb-3 flex items-center gap-2 text-sm font-bold text-gray-900 dark:text-white"><svg class="h-4 w-4 text-purple-700 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17l-5.384 3.175 1.029-5.999-4.36-4.25 6.023-.876L11.42 2 14.08 7.22l6.023.876-4.36 4.25 1.03 5.999z"></path></svg> Related Tools</h2> <div class="space-y-2"><a href="/tools/file/svg-optimizer" class="group flex items-start gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"><div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17l-5.384 3.175 1.029-5.999-4.36-4.25 6.023-.876L11.42 2 14.08 7.22l6.023.876-4.36 4.25 1.03 5.999z"></path></svg></div> <div class="min-w-0"><p class="text-xs font-semibold text-gray-900 group-hover:text-accent-600 dark:text-white dark:group-hover:text-accent-400">SVG Optimizer</p> <p class="line-clamp-1 text-[10px] text-gray-500 dark:text-gray-400">Optimize SVG files by removing metadata and unnecessary elements.</p></div></a><a href="/tools/file/image-compressor" class="group flex items-start gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"><div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17l-5.384 3.175 1.029-5.999-4.36-4.25 6.023-.876L11.42 2 14.08 7.22l6.023.876-4.36 4.25 1.03 5.999z"></path></svg></div> <div class="min-w-0"><p class="text-xs font-semibold text-gray-900 group-hover:text-accent-600 dark:text-white dark:group-hover:text-accent-400">Image Compressor</p> <p class="line-clamp-1 text-[10px] text-gray-500 dark:text-gray-400">Compress images in your browser — no uploads to any server.</p></div></a><a href="/tools/design/css-unit-converter" class="group flex items-start gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"><div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17l-5.384 3.175 1.029-5.999-4.36-4.25 6.023-.876L11.42 2 14.08 7.22l6.023.876-4.36 4.25 1.03 5.999z"></path></svg></div> <div class="min-w-0"><p class="text-xs font-semibold text-gray-900 group-hover:text-accent-600 dark:text-white dark:group-hover:text-accent-400">CSS Unit Converter</p> <p class="line-clamp-1 text-[10px] text-gray-500 dark:text-gray-400">Convert between px, rem, em, vw, vh, %, and pt.</p></div></a></div></div></div></aside></div>  <section class="mt-14 border-t border-gray-200 pt-10 dark:border-gray-800"><div class="mb-6 flex items-center justify-between"><h2 class="text-xl font-bold text-gray-900 dark:text-white">More Guides</h2> <a href="/guides" class="inline-flex items-center gap-1 text-sm font-medium text-accent-600 transition-colors hover:text-accent-700 dark:text-accent-400 dark:hover:text-accent-300">View all <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path></svg></a></div> <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3"><article class="group flex flex-col rounded-xl border border-gray-200 bg-white transition-all hover:border-blue-300 dark:hover:border-blue-700 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900"><div class="h-1 rounded-t-xl bg-gradient-to-r from-blue-400 to-blue-600"></div> <div class="flex flex-1 flex-col p-5"><div class="mb-3 flex items-center gap-2"><span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[10px] font-semibold bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400"><svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg> Developer</span> <span class="inline-flex items-center gap-1 text-[10px] text-gray-400 dark:text-gray-500"><svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> 8 min read <span class="text-gray-300 dark:text-gray-600">·</span> In-depth</span></div> <a href="/guides/cron-expressions-scheduling-tasks" class="block"><h3 class="mb-2 text-sm font-bold leading-snug text-gray-900 transition-colors group-hover:text-accent-600 dark:text-white dark:group-hover:text-accent-400">Cron Expressions Explained: Scheduling Tasks Without the Confusion</h3></a> <div class="flex flex-wrap gap-1.5"><span class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400">scheduling</span><span class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400">workflow</span><span class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400">debugging</span></div></div></article><article class="group flex flex-col rounded-xl border border-gray-200 bg-white transition-all hover:border-purple-300 dark:hover:border-purple-700 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900"><div class="h-1 rounded-t-xl bg-gradient-to-r from-purple-400 to-purple-600"></div> <div class="flex flex-1 flex-col p-5"><div class="mb-3 flex items-center gap-2"><span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[10px] font-semibold bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400"><svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.098 19.902a3.75 3.75 0 005.304 0l6.401-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008z"/></svg> Design</span> <span class="inline-flex items-center gap-1 text-[10px] text-gray-400 dark:text-gray-500"><svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> 8 min read <span class="text-gray-300 dark:text-gray-600">·</span> In-depth</span></div> <a href="/guides/css-flexbox-visual-guide" class="block"><h3 class="mb-2 text-sm font-bold leading-snug text-gray-900 transition-colors group-hover:text-accent-600 dark:text-white dark:group-hover:text-accent-400">Understanding CSS Flexbox: A Visual Guide with Practical Examples</h3></a> <div class="flex flex-wrap gap-1.5"><span class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400">design-systems</span><span class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400">documentation</span></div></div></article><article class="group flex flex-col rounded-xl border border-gray-200 bg-white transition-all hover:border-teal-300 dark:hover:border-teal-700 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900"><div class="h-1 rounded-t-xl bg-gradient-to-r from-teal-400 to-teal-600"></div> <div class="flex flex-1 flex-col p-5"><div class="mb-3 flex items-center gap-2"><span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[10px] font-semibold bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-400"><svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z"/></svg> Business</span> <span class="inline-flex items-center gap-1 text-[10px] text-gray-400 dark:text-gray-500"><svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> 6 min read <span class="text-gray-300 dark:text-gray-600">·</span> In-depth</span></div> <a href="/guides/invoice-numbering-best-practices-south-africa" class="block"><h3 class="mb-2 text-sm font-bold leading-snug text-gray-900 transition-colors group-hover:text-accent-600 dark:text-white dark:group-hover:text-accent-400">Invoice Numbering Best Practices for South African Small Businesses</h3></a> <div class="flex flex-wrap gap-1.5"><span class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400">invoicing</span><span class="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400">compliance</span></div></div></article></div></section> <nav class="mt-10 flex flex-wrap items-center gap-4 border-t border-gray-200 pt-6 dark:border-gray-800"><a href="/guides" class="inline-flex items-center gap-1.5 text-sm font-medium text-accent-600 transition-colors hover:text-accent-700 dark:text-accent-400 dark:hover:text-accent-300"><svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"></path></svg> All Guides</a> <span class="text-gray-300 dark:text-gray-700">|</span> <a href="/tools" class="inline-flex items-center gap-1.5 text-sm font-medium text-accent-600 transition-colors hover:text-accent-700 dark:text-accent-400 dark:hover:text-accent-300">Browse All Tools <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path></svg></a></nav></div></main> <footer class="relative overflow-hidden border-t border-accent-200/40 bg-gradient-to-b from-accent-50/40 via-violet-50/30 to-accent-50/50 dark:border-accent-500/20 dark:from-accent-950/40 dark:via-violet-950/30 dark:to-accent-950/50"><div class="pointer-events-none absolute inset-0 overflow-hidden"><div class="absolute -right-24 -top-24 h-96 w-96 rounded-full bg-accent-400/[0.08] blur-3xl dark:bg-accent-400/[0.1]"></div> <div class="absolute -bottom-32 -left-32 h-96 w-96 rounded-full bg-violet-400/[0.06] blur-3xl dark:bg-violet-400/[0.08]"></div></div> <div class="relative mx-auto max-w-7xl px-4 pt-16 pb-8 sm:px-6 lg:px-8"><div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-12 lg:gap-8"><div class="lg:col-span-4"><a href="/" class="inline-flex items-center gap-2.5"><img src="/favicon.svg" alt="Logo" width="28" height="28"/> <span class="text-xl font-bold text-stone-800 dark:text-white">Utiliify</span></a> <p class="mt-4 max-w-xs text-sm leading-relaxed text-stone-600 dark:text-stone-400">Fast, free tools that run entirely in your browser. No sign-up required, no data sent to servers.</p> <div class="mt-5 inline-flex items-center gap-2 rounded-full bg-emerald-500/10 px-3 py-1.5 text-xs font-medium text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400"><svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"></path></svg> 100% Private — Your data stays local</div></div> <div class="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:col-span-8"><div><h3 class="text-xs font-semibold uppercase tracking-wider text-stone-900 dark:text-white">Categories</h3> <ul class="mt-4 space-y-3"><li><a href="/tools/dev" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Developer</a></li><li><a href="/tools/finance" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Finance</a></li><li><a href="/tools/file" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">File & Image</a></li><li><a href="/tools/datetime" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Date & Time</a></li><li><a href="/tools/business" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Business</a></li><li><a href="/tools/text" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Text & Data</a></li><li><a href="/tools/design" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Design</a></li><li><a href="/tools/productivity" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Productivity</a></li></ul></div> <div><h3 class="text-xs font-semibold uppercase tracking-wider text-stone-900 dark:text-white">Popular Tools</h3> <ul class="mt-4 space-y-3"><li><a href="/tools/dev/json-formatter" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">JSON Formatter</a></li><li><a href="/tools/dev/base64-encode-decode" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Base64 Encoder</a></li><li><a href="/tools/finance/vat-calculator" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">VAT Calculator</a></li><li><a href="/tools/file/image-compressor" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Image Compressor</a></li><li><a href="/tools/business/roi-calculator" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">ROI Calculator</a></li><li><a href="/tools/dev/regex-tester" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Regex Tester</a></li> <li><a href="/tools" class="inline-flex items-center gap-1 text-sm font-medium text-accent-600 transition-colors hover:text-accent-700 dark:text-accent-400 dark:hover:text-accent-300">View all <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path></svg></a></li></ul></div> <div><h3 class="text-xs font-semibold uppercase tracking-wider text-stone-900 dark:text-white">Company</h3> <ul class="mt-4 space-y-3"><li><a href="/about" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">About</a></li> <li><a href="/guides" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Guides</a></li> <li><a href="/blog" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Blog</a></li> <li><a href="/changelog" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Changelog</a></li> <li><a href="/privacy" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Privacy</a></li> <li><a href="/terms" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Terms</a></li> <li><a href="mailto:support@utiliify.com" class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Contact</a></li> <li><button class="text-sm text-stone-600 transition-colors hover:text-accent-600 dark:text-stone-400 dark:hover:text-accent-400">Feedback</button></li></ul></div></div></div> <div class="mt-12 flex flex-col items-center justify-between gap-4 border-t border-stone-200/80 pt-8 sm:flex-row dark:border-stone-800/80"><p class="text-xs text-stone-500 dark:text-stone-500">© 2026 Utiliify. Built with care for developers, creators, and businesses.</p> <div class="flex items-center gap-6 text-xs"><a href="/privacy" class="text-stone-500 transition-colors hover:text-stone-700 dark:text-stone-500 dark:hover:text-stone-300">Privacy Policy</a> <a href="/terms" class="text-stone-500 transition-colors hover:text-stone-700 dark:text-stone-500 dark:hover:text-stone-300">Terms of Service</a></div></div></div></footer></div>     <script> { __sveltekit_v59y1h = { base: new URL("..", location).pathname.slice(0, -1) }; const element = document.currentScript.parentElement; Promise.all([ import("../_app/immutable/entry/start.B7osTOY4.js"), import("../_app/immutable/entry/app.D3DusGFb.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 9], data: [null,null], form: null, error: null }); }); } </script> </div> </body> </html>