已更新9月 2026
如何使用SVG优化器
- 粘贴 SVG 代码 - 直接从设计工具导出。
- 读取优化输出并节省大小 - 通常节省 30-70%。
- 复制干净的 SVG - 将其内联到 HTML 中或另存为资源。
- 将
保留在有意义的图形上</strong> - 这是屏幕阅读器标签。</li></ol> </div> </section> <section class="glass-card p-6 sm:p-8"> <h2 class="font-heading text-2xl font-semibold text-gold">SVG优化器是什么？</h2> <div class="prose-tonton mt-4 max-w-none text-cream/80 [&_p]:mb-3 [&_strong]:text-cream"> <p>SVG 优化器会清除矢量文件中所有不绘制的内容：编辑器元数据（Illustrator/Figma/Inkscape 印章可自由导出）、注释、隐藏元素、默认值属性、过多的路径精度（小数点后 8 位，其中 2 位就足够了）和冗余分组。渲染效果相同；文件通常会缩小 30-70%。</p><p>导出的 SVG 非常臃肿——一个简单的图标让设计工具的大小为 8 KB，其中包含 6 KB 的编辑器残留。由于 SVG 以代码形式提供（通常在 HTML 中内联），因此剩余部分就是页面权重和 DOM 噪声乘以每个图标。</p> </div> </section> <section class="glass-card p-6 sm:p-8"> <h2 class="font-heading text-2xl font-semibold text-gold">关于SVG优化器</h2> <div class="prose-tonton mt-4 max-w-none text-cream/80 [&_p]:mb-3 [&_strong]:text-cream"> <p>粘贴 SVG 代码，读取优化版本和节省的大小，复制干净的结果。</p><p>清理的内容以及为什么它是安全的：元数据和编辑器命名空间（纯导出残留）、注释和标题（除非您保留它们以方便访问 - 见下文）、不可见/空元素、超出视觉相关性的路径坐标精度以及可折叠转换/组。保持不变的东西：渲染的所有内容 - 绘图是字节不同的，像素相同的。</p><p>部署说明：优化的 SVG 在 HTML 中完美内嵌（没有请求的图标 - 比较 Base64 路线，SVG 通常击败它），以及一个可访问性警告 - <code><title></code> 元素为屏幕阅读器提供服务，因此保留或重新将它们添加到有意义的（非装饰性）图形上。对于图标系统，在提交时优化一次；构建管道中的 SVGO 是该工具的自动化兄弟。代码在您的浏览器中处理。</p> </div> </section> <section class="glass-card p-6 sm:p-8" x-data="{ active: null }"> <h2 class="font-heading text-2xl font-semibold text-gold">常见问题解答</h2> <div class="mt-4 divide-y divide-gold/10"> <div class="py-3"> <button @click="active === 0 ? active = null : active = 0" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">优化会改变我的 SVG 的外观吗？</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 0 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 0" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> 否 - 仅删除非渲染内容和冗余精度。绘图输出是像素相同的；如果您喜欢确认的话，可以比较渲染的结果。 </div> </div> <div class="py-3"> <button @click="active === 1 ? active = null : active = 1" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">为什么设计工具 SVG 导出如此臃肿？</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 1 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 1" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> 编辑者嵌入他们的工作数据——图层名称、编辑器命名空间、元数据块、最大精度——以便文件在工具中忠实地重新打开。网络不需要这些；优化是删除编辑的行李。 </div> </div> <div class="py-3"> <button @click="active === 2 ? active = null : active = 2" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">我实际需要多少路径精度？</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 2 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 2" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> 典型图标 viewBox 的小数点后 1-2 位——与 7 位小数坐标的视觉差异实际上是子像素。精度降低通常是最大的字节胜利。 </div> </div> <div class="py-3"> <button @click="active === 3 ? active = null : active = 3" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">内联 SVG 比 <img> 标签更好吗？</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 3 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 3" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> 内联您使用 CSS 设置样式/动画的图标（currentColor 主题是杀手级功能）并跳过请求； <img>/CSS-url 用于大型或重复的插图，其中缓存获胜。优化的代码使得内联无论哪种方式都很便宜。 </div> </div> <div class="py-3"> <button @click="active === 4 ? active = null : active = 4" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">像 <title> 这样的辅助功能元素怎么样？</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 4 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 4" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> 将它们放在有意义的图形上 - <标题> 是屏幕阅读器宣布的内容。装饰图标取而代之的是 aria-hidden="true"。优化字节，而不是语义。 </div> </div> </div> </section> </div> <div class="space-y-6"> <aside class="glass-card p-5"> <h2 class="font-heading text-xl font-semibold text-gold">相关工具</h2> <ul class="mt-3 divide-y divide-gold/10"> <li> <a href="https://tonton-tools.com/zh/rotate-image" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">旋转图像</span> </a> </li> <li> <a href="https://tonton-tools.com/zh/flip-image" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">翻转图像</span> </a> </li> <li> <a href="https://tonton-tools.com/zh/jpg-to-webp" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">JPG 转 WebP</span> </a> </li> <li> <a href="https://tonton-tools.com/zh/base64-to-image" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">Base64 转图像</span> </a> </li> <li> <a href="https://tonton-tools.com/zh/png-to-webp" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">PNG 到 WebP</span> </a> </li> <li> <a href="https://tonton-tools.com/zh/ico-converter" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">ICO转换器</span> </a> </li> </ul> <a href="https://tonton-tools.com/zh/tools/image-tools" class="mt-3 inline-block text-xs font-medium text-gold hover:underline"> 查看全部 图像工具 → </a> </aside> </div> </div> <div class="my-6 flex justify-center" aria-label="Advertisement"> <ins class="adsbygoogle block w-full" style="display:block" data-ad-client="ca-pub-1594540167961527" data-ad-slot="6784859214" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> </div> </main> <footer class="relative mt-20 border-t border-gold/15 bg-charcoal-surface/40"> <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-gold/50 to-transparent"></div> <div class="mx-auto max-w-7xl px-4 py-14 sm:px-6"> <div class="grid gap-10 md:grid-cols-4"> <div class="md:col-span-1"> <a href="https://tonton-tools.com/zh" class="inline-block transition hover:opacity-90" aria-label="TontonTools home"> <img src="https://tonton-tools.com/images/logo.png" alt="TontonTools" width="1116" height="269" class="h-11 w-auto"> </a> <p class="mt-4 text-sm text-cream/60"> TontonTools is a free, ad-supported collection of 330+ online tools for SEO professionals, developers, YouTubers, content creators, and students. </p> </div> <div class="md:col-span-2 grid grid-cols-2 gap-6 sm:grid-cols-3"> <a href="https://tonton-tools.com/zh/tools/text-tools" class="text-sm text-cream/70 transition hover:text-gold">文本工具</a> <a href="https://tonton-tools.com/zh/tools/youtube-tools" class="text-sm text-cream/70 transition hover:text-gold">YouTube 工具</a> <a href="https://tonton-tools.com/zh/tools/seo-tools" class="text-sm text-cream/70 transition hover:text-gold">搜索引擎优化工具</a> <a href="https://tonton-tools.com/zh/tools/domain-ip-tools" class="text-sm text-cream/70 transition hover:text-gold">域名和 IP 工具</a> <a href="https://tonton-tools.com/zh/tools/website-management" class="text-sm text-cream/70 transition hover:text-gold">网站管理</a> <a href="https://tonton-tools.com/zh/tools/web-development" class="text-sm text-cream/70 transition hover:text-gold">网页开发</a> <a href="https://tonton-tools.com/zh/tools/image-tools" class="text-sm text-cream/70 transition hover:text-gold">图像工具</a> <a href="https://tonton-tools.com/zh/tools/calculators" class="text-sm text-cream/70 transition hover:text-gold">计算器</a> <a href="https://tonton-tools.com/zh/tools/unit-converters" class="text-sm text-cream/70 transition hover:text-gold">单位转换器</a> </div> <div> <h3 class="font-heading text-lg text-gold">公司</h3> <ul class="mt-4 space-y-2 text-sm"> <li><a href="https://tonton-tools.com/zh/about" class="text-cream/70 hover:text-gold">关于：：site</a></li> <li><a href="https://tonton-tools.com/zh/contact" class="text-cream/70 hover:text-gold">联系：：name</a></li> <li><a href="https://tonton-tools.com/zh/blog" class="text-cream/70 hover:text-gold">博客</a></li> <li><a href="https://tonton-tools.com/zh/developers" class="text-cream/70 hover:text-gold">开发者API</a></li> <li><a href="https://tonton-tools.com/zh/report-tool" class="text-cream/70 hover:text-gold">报告工具</a></li> </ul> <h3 class="mt-6 font-heading text-lg text-gold">合法的</h3> <ul class="mt-4 space-y-2 text-sm"> <li><a href="https://tonton-tools.com/zh/privacy-policy" class="text-cream/70 hover:text-gold">隐私政策</a></li> <li><a href="https://tonton-tools.com/zh/terms-of-service" class="text-cream/70 hover:text-gold">服务条款</a></li> <li><a href="https://tonton-tools.com/zh/disclaimer" class="text-cream/70 hover:text-gold">免责声明</a></li> </ul> </div> </div> <div class="mt-10 flex flex-col items-center justify-between gap-3 border-t border-gold/10 pt-6 text-sm text-cream/60 sm:flex-row"> <p>© 2026 TontonTools. 版权所有。</p> <p>由 Tonton Business Digital Agency 建造</p> </div> </div> </footer> <div x-data="{ show: false }" x-init="show = ! localStorage.getItem('cookie_consent')" x-show="show" x-cloak x-transition.duration.300ms class="fixed inset-x-0 bottom-0 z-50 p-3 sm:p-4"> <div class="glass-card mx-auto flex max-w-4xl flex-col items-center gap-3 p-4 sm:flex-row sm:gap-4"> <p class="flex-1 text-center text-sm text-cream/70 sm:text-left"> We use cookies for analytics and to keep the tools free via ads. See our <a href="https://tonton-tools.com/zh/privacy-policy" class="text-gold hover:underline">Privacy Policy</a>. </p> <div class="flex shrink-0 gap-2"> <button @click="localStorage.setItem('cookie_consent','declined'); show=false" class="btn-ghost text-sm">Decline</button> <button @click="localStorage.setItem('cookie_consent','accepted'); window.loadAnalytics && window.loadAnalytics(); show=false" class="btn-gold text-sm">Accept</button> </div> </div> </div> <script> // Fire a GA4 "tool_used" event the first time a visitor interacts with this tool. (function () { var section = document.getElementById('tool-interface'); if (!section) return; var fired = false; function fire() { if (fired) return; fired = true; window.trackToolUsed && window.trackToolUsed('svg-optimizer', 'image-tools'); } ['input', 'change', 'click', 'submit'].forEach(function (ev) { section.addEventListener(ev, fire, { passive: true }); }); })(); </script> </body> </html>