页头广告招租
×
📱 手机扫码访问
用手机浏览器或微信扫一扫，即可在手机上访问当前页面
扫描后可直接在手机上使用该工具
×
📱 微信扫一扫分享
打开微信"扫一扫"，即可分享至好友或朋友圈
手机QQ也可扫描此二维码分享至QQ好友或QQ空间
🎨 SVG 压缩工具
全程本地运行，文件不会上传到任何服务器，保护您的隐私安全
📁
拖拽 SVG 文件到此处，或点击选择文件
支持 .svg 格式，文件在浏览器本地处理
📂
拖拽多个 SVG 文件到此处，或点击选择文件
支持同时处理多个文件，全部在本地完成
📭
暂无文件，请拖拽或选择 SVG 文件
🖥️ 实时预览
📝 生成的 CSS 代码
/* 调整左侧参数，点击生成布局 */
📝 使用说明
一、单文件压缩
步骤 1：上传或粘贴 SVG
将 SVG 文件直接拖拽到页面中央的虚线框内，或点击虚线框选择本地文件。也可以直接在左侧代码框中粘贴 SVG 代码。
步骤 2：选择压缩选项
页面下方提供多个复选框，默认全部勾选。根据需求保留或取消某些选项：
移除注释：删除 SVG 中的
移除元数据：删除<desc><br />
移除编辑器数据：删除 Illustrator、Figma、Inkscape 等编辑器插入的专有数据<br />
压缩空白：删除多余空格、换行和缩进<br />
移除默认属性：删除值为默认值的属性（如 fill="black"、opacity="1" 等）<br />
缩短 ID：将较长的 ID 名称替换为短字符，并同步更新引用<br />
路径精度优化：将路径坐标保留两位小数，减少数据量<br />
步骤 3：执行压缩<br />
点击 压缩 按钮，右侧代码框会立即显示压缩后的代码，同时显示压缩比例（如 -45%）。<br />
步骤 4：预览与保存<br />
左右两侧均提供实时预览，可对比压缩前后的视觉效果。确认无误后，点击 复制代码 或 下载 按钮保存结果。点击 清空 可重置当前文件。<br />
二、批量压缩<br />
步骤 1：添加多个文件<br />
切换到「批量压缩」标签页，将多个 SVG 文件拖拽到上传区域，或点击选择多个文件。文件会以列表形式展示。<br />
步骤 2：压缩文件<br />
单独压缩：点击某个文件旁的 压缩 按钮，仅处理该文件<br />
全部压缩：点击顶部 全部压缩 按钮，一次性处理列表中所有文件<br />
步骤 3：查看结果<br />
每个文件会显示原始大小和压缩后大小，以及节省的百分比。<br />
步骤 4：导出文件<br />
单独下载：点击某个文件旁的 下载 按钮<br />
批量下载：点击顶部 打包下载 按钮，所有已压缩的文件会自动依次下载<br />
移除文件：点击 移除 按钮可从列表中删除不需要的文件<br />
三、Flex / Grid 布局生成器<br />
步骤 1：选择布局类型<br />
切换到「Flex/Grid 布局生成器」标签页，点击顶部的 Flex 或 Grid 按钮切换布局模式。<br />
步骤 2：调整参数（Flex 模式）<br />
flex-direction：设置主轴方向（水平/垂直/反向）<br />
justify-content：设置主轴对齐方式（左对齐/居中/两端对齐等）<br />
align-items：设置交叉轴对齐方式（拉伸/顶部/居中/底部）<br />
flex-wrap：设置是否换行<br />
gap：设置子元素间距（单位：像素）<br />
子元素数量：设置预览中显示的方块数量<br />
步骤 3：调整参数（Grid 模式）<br />
grid-template-columns：设置列模板（如 repeat(3, 1fr) 表示三列等宽）<br />
grid-template-rows：设置行模板（如 auto 或 repeat(2, 100px)）<br />
gap：设置网格间距<br />
justify-items / align-items：设置单元格内对齐方式<br />
子元素数量：设置预览方块数量<br />
步骤 4：生成与复制<br />
参数调整时右侧预览实时更新。点击 生成布局 可刷新预览，点击 复制 CSS 将生成的 CSS 代码复制到剪贴板，直接粘贴到项目中使用。<br />
四、隐私与安全<br />
本工具 全程在浏览器本地运行，所有 SVG 文件和代码处理均在您的设备上完成，不会上传到任何服务器。您可以放心处理包含敏感信息的 SVG 文件。<br />
五、常见问题<br />
Q：压缩后 SVG 显示异常怎么办？<br />
A：请检查是否勾选了过度优化的选项（如「移除默认属性」可能导致某些图形样式丢失），取消相关选项后重新压缩即可。<br />
Q：批量下载时浏览器拦截了弹窗？<br />
A：部分浏览器会拦截多个文件的连续下载，请允许本网站的弹窗权限，或逐个手动下载。<br />
Q：布局生成器的 CSS 代码可以直接用吗？<br />
A：可以直接使用。生成的代码为标准 CSS，您只需将 .container 的样式应用到实际容器元素上即可。<br />
Q：移动端如何使用？<br />
A：本工具已适配手机端，用手机浏览器打开即可正常使用所有功能，界面会自动调整为满屏布局。 </div>
</div>
<!-- 工具功能说明 -->
<div class="feature-card">
<div class="tool-card-title">🔧 工具功能说明</div>
<div class="tool-card-body">
SVG 压缩工具是一款全程本地运行的在线工具，支持单文件压缩、批量压缩以及可视化 Flex/Grid CSS 布局生成器。单文件模式支持拖拽上传和代码粘贴，提供多种压缩选项（移除注释、元数据、编辑器数据、空白压缩、默认属性清理、ID 缩短、路径精度优化），实时对比原始与压缩后的代码及预览效果。批量模式支持同时处理多个 SVG 文件，一键全部压缩并打包下载。内置的 Flex/Grid 布局生成器专为前端新手设计，通过可视化参数调整实时生成 CSS 代码，帮助快速掌握现代 CSS 布局。所有处理均在浏览器本地完成，文件不会上传至服务器，充分保护用户隐私。工具采用响应式设计，完美适配手机和电脑，移动端满屏显示且功能完整。配色方案采用 LLM 橙色、Agent 蓝色、Skills 绿色、MCP 紫色的专业配色，界面美观清晰。 </div>
</div>
</div>
<!-- 广告位2 -->
<div class="ad-slot ">
<div>
<div class="ad-label">📌 广告位</div>
<div>暂无广告内容</div>
</div>
</div>
<!-- 留言板 -->
<!-- 广告位3 -->
<div class="ad-slot has-content" style="margin-top:20px;">
<div>页尾广告招租</div> </div>
<style>
/* ========== 友情链接区域 ========== */
.friend-links-section {
background: #fff;
border-radius: 8px;
padding: 20px 24px;
border: 1px solid #e8e8e8;
margin-bottom: 16px;
}
.friend-links-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.friend-links-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
.friend-links-more {
font-size: 14px;
color: #1890ff;
text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
transition: color 0.2s ease;
}
.friend-links-more:hover {
color: #40a9ff;
}
.friend-links-more::after {
content: '›';
font-size: 16px;
}
.friend-links-divider {
height: 1px;
background: #f0f0f0;
margin-bottom: 16px;
}
.friend-links-list {
display: flex;
flex-wrap: wrap;
gap: 16px 24px;
}
.friend-link-item {
font-size: 14px;
color: #1890ff;
text-decoration: none;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.friend-link-item:hover {
color: #40a9ff;
text-decoration: underline;
}
.friend-link-item .link-icon {
width: 16px;
height: 16px;
border-radius: 3px;
object-fit: cover;
}
/* 友链分组（当数量较多时） */
.friend-links-group-title {
font-size: 13px;
font-weight: 500;
color: #999;
margin: 12px 0 8px;
padding-left: 4px;
border-left: 2px solid #1890ff;
}
.friend-links-group-title:first-child {
margin-top: 0;
}
/* ========== 页脚 ========== */
.site-footer {
text-align: center;
padding: 16px 0 24px;
margin: 0 -24px -24px;
}
.footer-nav {
font-size: 14px;
color: #666;
margin-bottom: 8px;
}
.footer-nav a {
color: #666;
text-decoration: none;
transition: color 0.2s ease;
}
.footer-nav a:hover {
color: #1890ff;
}
.footer-nav .divider {
color: #d9d9d9;
margin: 0 8px;
}
.footer-copyright {
font-size: 14px;
color: #666;
line-height: 1.8;
}
.footer-copyright a {
color: #1890ff;
text-decoration: none;
}
.footer-copyright a:hover {
text-decoration: underline;
}
.footer-version {
color: #1890ff;
}
.footer-icp {
color: #333;
font-size: 13px;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 16px;
}
.footer-icp a {
color: #333;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.footer-icp a:hover {
color: #ff6a00;
text-decoration: underline;
}
.footer-police {
font-size: 13px;
}
.footer-police a {
color: #333;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.footer-police a:hover {
color: #ff6a00;
text-decoration: underline;
}
.footer-police .police-icon {
width: 20px;
height: auto;
flex-shrink: 0;
}
/* ========== 响应式 ========== */
@media (max-width: 768px) {
.site-footer {
margin: 0 -16px -16px;
padding: 12px 16px 20px;
}
.friend-links-section {
padding: 16px;
}
.friend-links-list {
gap: 12px 16px;
}
.friend-link-item {
font-size: 13px;
}
.footer-copyright {
font-size: 13px;
}
}
</style>
<!-- 友情链接区域 -->
<section class="friend-links-section">
<div class="friend-links-header">
<div class="friend-links-title">友情链接</div>
</div>
<div class="friend-links-divider"></div>
<div class="friend-links-list">
<a href="https://www.baidu.com" target="_blank" rel="noopener" class="friend-link-item" title="">
百度一下 </a>
<a href="https://www.cz88.net/" target="_blank" rel="noopener" class="friend-link-item" title="互联网创业资讯平台">
纯真网络 </a>
</div>
</section>
<!-- 页脚 -->
<footer class="site-footer">
<div class="footer-copyright">
Copyright © 2023-2026 东讯在线工具网. Current version is <span class="footer-version">V1.229</span>. UTC+08:00, 2026-07-26 12:46 </div>
<div class="footer-icp">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" title="工信部备案管理系统">粤ICP备2026085725号</a>
<span class="footer-police">
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44196102000321" target="_blank" rel="noopener" title="公安机关互联网站安全管理平台">
<img src="/static/images/police-icon.png" alt="" class="police-icon">
粤公网安备44196102000321号 </a>
</span>
<a href="/about.php">关于我们</a>
<a href="/sitemap.php">访客地图</a>
<a href="/privacy.php">隐私政策</a>
</div>
</footer>
</main>
</div>
<script>
// 提交留言
function submitComment(parentId) {
parentId = parentId || 0;
var contentEl = parentId ? document.getElementById('replyContent_' + parentId) : document.getElementById('commentContent');
var content = contentEl.value.trim();
if (!content) {
alert('请输入留言内容');
return;
}
var formData = new FormData();
formData.append('tool_id', 86);
formData.append('parent_id', parentId);
formData.append('content', content);
fetch('/api/comment/submit.php', {
method: 'POST',
body: formData
})
.then(function(r) { return r.json(); })
.then(function(res) {
if (res.code === 200) {
alert(res.message || '提交成功，留言将在审核通过后显示');
location.reload();
} else if (res.code === 401) {
openLoginModal();
} else {
alert(res.message || '提交失败');
}
})
.catch(function() {
alert('网络错误，请稍后重试');
});
}
function showReplyForm(commentId) {
var form = document.getElementById('replyForm_' + commentId);
if (form) {
form.classList.toggle('active');
if (form.classList.contains('active')) {
form.querySelector('textarea').focus();
}
}
}
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.key === 'Enter') {
var activeEl = document.activeElement;
if (activeEl && activeEl.classList.contains('comment-textarea')) {
var parentId = activeEl.dataset.parentId || 0;
submitComment(parentId);
}
}
});
// ==================== 分享功能 ====================
function copyToolLink() {
var url = window.location.href;
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(function() {
showCopySuccess();
recordShare('copy');
}).catch(function(err) {
fallbackCopyToolLink(url);
});
} else {
fallbackCopyToolLink(url);
}
}
function fallbackCopyToolLink(text) {
try {
var input = document.createElement('textarea');
input.value = text;
input.style.position = 'fixed';
input.style.left = '-9999px';
input.style.top = '0';
document.body.appendChild(input);
input.focus();
input.select();
document.execCommand('copy');
document.body.removeChild(input);
} catch (e) {
console.log('Fallback copy failed:', e);
}
showCopySuccess();
recordShare('copy');
}
function showCopySuccess() {
if (typeof layer !== 'undefined' && layer.msg) {
layer.msg('📋 链接复制成功', {icon: 1, time: 2000});
} else {
alert('链接复制成功');
}
}
function showMobileQR() {
document.getElementById('mobileQrModal').classList.add('active');
}
function closeMobileQR() {
document.getElementById('mobileQrModal').classList.remove('active');
}
document.getElementById('mobileQrModal').addEventListener('click', function(e) {
if (e.target === this) {
closeMobileQR();
}
});
function showWechatQR() {
document.getElementById('qrModal').classList.add('active');
recordShare('wechat');
}
function closeWechatQR() {
document.getElementById('qrModal').classList.remove('active');
}
document.getElementById('qrModal').addEventListener('click', function(e) {
if (e.target === this) {
closeWechatQR();
}
});
// ==================== 收藏功能 ====================
function addToFavorite() {
var toolId = 86;
var isLoggedIn = false;
if (!isLoggedIn) {
if (typeof layer !== 'undefined' && layer.msg) {
layer.msg('请先登录后再收藏', {icon: 2, time: 2000});
} else {
alert('请先登录后再收藏');
}
openLoginModal();
return;
}
var formData = new FormData();
formData.append('tool_id', toolId);
fetch('/api/favorite/add.php', {
method: 'POST',
body: formData
})
.then(function(r) { return r.json(); })
.then(function(res) {
if (res.code === 200) {
var msg = res.data && res.data.favorited ? '⭐ 收藏成功' : '⭐ 已取消收藏';
if (typeof layer !== 'undefined' && layer.msg) {
layer.msg(msg, {icon: 1, time: 2000});
} else {
alert(res.data && res.data.favorited ? '收藏成功' : '已取消收藏');
}
recordShare('favorite');
} else if (res.code === 401) {
openLoginModal();
} else {
if (typeof layer !== 'undefined' && layer.msg) {
layer.msg(res.message || '操作失败', {icon: 2, time: 2000});
} else {
alert(res.message || '操作失败');
}
}
})
.catch(function(err) {
console.log('Favorite error:', err);
browserFavorite();
});
}
function browserFavorite() {
var url = window.location.href;
var title = document.title;
try {
if (window.sidebar && window.sidebar.addPanel) {
window.sidebar.addPanel(title, url, '');
} else if (window.external && ('AddFavorite' in window.external)) {
window.external.AddFavorite(url, title);
} else {
alert('请按 Ctrl+D 收藏本页');
}
} catch (e) {
alert('请按 Ctrl+D 收藏本页');
}
}
function recordShare(type) {
var formData = new FormData();
formData.append('tool_id', 86);
formData.append('share_type', type);
formData.append('share_url', window.location.href);
fetch('/api/share/record.php', {
method: 'POST',
body: formData
}).then(function(r) { return r.json(); }).then(function(res) {
if (res.code === 200) {
var countEl = document.getElementById('shareCount');
if (countEl && res.data && res.data.share_count) {
countEl.textContent = res.data.share_count + ' 次分享';
}
}
}).catch(function() {});
}
// ==================== 真实使用计数：仅当用户真正操作工具时才 +1，每次页面加载只计 1 次 ====================
(function () {
var toolId = 86;
var usedFlag = false;
window.markToolUsed = function () {
if (usedFlag) return;
usedFlag = true;
fetch('/api/tool/use.php?id=' + toolId, { method: 'POST' }).catch(function () {});
};
document.addEventListener('DOMContentLoaded', function () {
// 表单提交（工具操作区内的真实操作）才算使用
document.addEventListener('submit', function (e) {
var card = document.querySelector('.tool-card');
if (!card || !card.contains(e.target)) return;
window.markToolUsed();
});
// 点击工具操作区内的主操作按钮 / 外链工具访问按钮才算使用
document.addEventListener('click', function (e) {
if (e.target.closest && e.target.closest('[data-nocount]')) return;
var inTool = false;
var card = document.querySelector('.tool-card');
if (card && card.contains(e.target)) inTool = true;
var extCard = document.querySelector('.external-link-card');
if (extCard && extCard.contains(e.target)) inTool = true;
if (!inTool) return;
var el = e.target.closest && e.target.closest('button, input[type="submit"], [data-tool-use], a.btn-go-link');
if (!el) return;
window.markToolUsed();
});
});
})();
</script>
</body>
</html>
步骤 1：上传或粘贴 SVG
将 SVG 文件直接拖拽到页面中央的虚线框内，或点击虚线框选择本地文件。也可以直接在左侧代码框中粘贴 SVG 代码。
步骤 2：选择压缩选项
页面下方提供多个复选框，默认全部勾选。根据需求保留或取消某些选项：
移除注释：删除 SVG 中的
移除元数据：删除