SVG 查看器，免费

关于 SVG

SVG（Scalable Vector Graphics）是一种用于矢量图形的 XML 格式。与位图格式（PNG、JPG）不同，SVG 图像可在任意尺寸下完美缩放，不会损失质量。它轻量、可访问，并被现代浏览器广泛支持。

常见问题

什么是 SVG？

SVG（Scalable Vector Graphics）是一种 2D 图形格式，使用数学曲线和路径而非像素。这使得 SVG 文件与分辨率无关 · 从小图标到广告牌大小都保持清晰。

SVG 和 PNG 有什么区别？

PNG 是基于像素的位图且尺寸固定 · 放大会变模糊。SVG 是基于数学的矢量图，可无限放大而不失真。SVG 适合 logo、图标和插图。PNG 更适合照片和复杂图像。

可以直接编辑 SVG 代码吗？

可以，SVG 是 XML 文本，因此可以在任意文本编辑器中编辑。您可以通过修改属性来改变颜色、大小、位置等。使用此查看器粘贴代码即可即时看到变化。

SVG两度赢得格式战

SVG出现之前，1998年初两种竞争性矢量格式被提交给W3C。PGML（精确图形标记语言）于1998年4月10日由Adobe、IBM、Netscape和Sun提交，以Adobe PostScript成像模型为基础。VML（矢量标记语言）于1998年5月13日由Microsoft、Macromedia、惠普、Autodesk和Visio提交，语法接近Microsoft已在Office 2000和Internet Explorer 5中推出的产品。W3C没有选出赢家，而是成立了由Chris Lilley担任主席的SVG工作组，设计一个能取代两者的统一标准。SVG的首份公开工作草案于1999年2月11日发布。

SVG 1.0于2001年9月4日作为W3C建议标准发布，编辑为Jon Ferraiolo（Adobe），贡献者来自Adobe、IBM、Sun、Apple、Canon、Corel、Kodak、Macromedia、Microsoft、Netscape、Oracle、Sharp、Quark和Xerox，是W3C规范中厂商联盟最广泛的之一。SVG 1.1于2003年1月14日发布，至今仍是现代网络的实际基准；其第二版（2011年8月16日）纳入了勘误。SVG 1.1将规范拆分为模块，并定义了三种配置文件（Full、Basic、Tiny）。VML继续在IE 5至9中发布，并被Microsoft Office内部使用，但在IE 9（2011年3月）中因支持原生SVG而被废弃，并在IE 11时实际消亡。SVG 2自2016年起一直是W3C工作草案，尚无建议标准发布日期；各浏览器根据互操作需求零散地实现各功能。

SVG真正与众不同的地方

• 它只是XML。一个完整的图标可以只是一行：<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor"/></svg>。由于SVG是文本，它可以被差异比较和版本控制（Git将其视为源代码），可在服务器端生成，可被搜索引擎索引（<text>内的文本可被抓取），可高效压缩（gzip和brotli对重复的XML标记非常友好，典型压缩率60-80%），并且无需专业软件即可在任意文本编辑器中编辑。
• 分辨率无关性。由于SVG路径以数学曲线和坐标定义，而非像素网格，SVG在任意缩放级别和任何设备像素密度下渲染效果完全一致。无需管理「@2x」或「@3x」视网膜资源。单个2 KB图标可从16×16像素的favicon无损缩放到400×400的主图插画。
• 线条艺术文件体积极小。典型的24×24单色图标，SVG约200-500字节，而透明PNG为1-3 KB。普通公司徽标，SVG为1-5 KB，PNG为15-50 KB。1,000个符号的图标集，单个SVG精灵约50 KB，而多DPI PNG精灵为2-5 MB。
• 可内联到HTML并通过CSS设置样式。一旦SVG内联，每个元素都是DOM的一部分。CSS可以寻址它：.icon-stroke { stroke: currentColor; stroke-width: 2; }。单属性currentColor使现代图标系统得以运作，图标自动继承周围文本的颜色。
• 三种不同方式支持动画。CSS动画/过渡（现代首选方式）、SVG内部的SMIL声明式XML（<animate>、<animateTransform>、<animateMotion>），或通过SVG DOM使用JavaScript。Chrome于2015年撤回废弃计划后，SMIL在Chrome、Firefox和Safari中至今仍可使用。
• 可编程操控。document.querySelector('#chart-bar-3').setAttribute('height', newValue)。这是D3.js、Vega、Plotly、Highcharts、ApexCharts及其他数据可视化生态系统的基础。
• 默认可访问。<title>在悬停时显示为提示文本。<desc>向屏幕阅读器公开。ARIA属性（role="img"、aria-label、aria-labelledby、aria-describedby）正常工作。与<canvas>元素（辅助技术的黑盒）相比，SVG完全可访问。

浏览器支持自2011年起全面普及

原生SVG支持最早见于Firefox 1.5（2005年11月）、Opera 9（2006年6月）、Safari 3.0（2007年6月）、Chrome 1.0（2008年9月），最终在Internet Explorer 9（2011年3月）实现，成为转折点。IE 9之前，网站必须提供VML转换垫片或Adobe SVG Viewer插件来支持IE 6-8。iOS Safari从发布起就有部分SVG支持，并从iOS 5（2011年10月）起全面支持；Android从Honeycomb 3.0（2011年2月）开始支持，ChromeWebView在Android 4.4（2013年）前后取代了AOSP浏览器。SVG作为图像（<img src="x.svg">）的实际最低门槛大约是2011年底。到2026年，实际上不存在需要支持不具备完整SVG能力的浏览器的网络项目。

SVG不仅是图像格式，更是可执行文档类型

这是理解SVG安全的最重要一点。恶意SVG可包含<script>块、事件处理程序（onload、onclick、onmouseover）或<a xlink:href="javascript:...">链接。当此类SVG在活动上下文中加载（通过<object>、<iframe>、浏览器导航到.svg网址，或通过innerHTML插入）时，浏览器会执行其中的脚本。允许上传SVG并以此方式嵌入的网站可能遭到上传者实施的XSS攻击。

<img>标签是安全路径。当SVG通过<img src="x.svg">或作为CSS的background-image加载时，浏览器以禁用脚本、阻止外部请求的沙盒模式运行SVG。内部脚本不会执行，外部请求被阻止，SVG无法与父页面交互。SVG内部的CSS会渲染，但所有可能产生副作用的内容都被禁用。这是目前推荐的SVG使用方式。

对于服务器端防御，OWASP建议使用DOMPurify（DOMPurify.sanitize(svg, {USE_PROFILES: {svg: true}})）、svg-sanitizer（PHP）、sanitize-svg（Node）或Bleach（Python）对上传的SVG进行净化，剔除<script>、<foreignObject>及所有on*事件处理程序，并拒绝xlink:href值中以javascript:或data:开头的情况。在显示用户SVG的页面上设置严格的Content-Security-Policy，以及使用Content-Disposition: attachment提供下载的SVG，是双重保险措施。本查看器纯客户端运行，SVG不会离开您的设备；但如果您在公共网站上嵌入用户提供的SVG，请务必进行净化。

SVG vs PNG vs JPG vs WebP vs AVIF：何时使用哪种

• 徽标、图标、插图、图表、含文字的信息图：选SVG。可缩放至任意大小，文件极小，可通过CSS改色，文字仍是文字（可选取、可翻译、可索引）。
• 照片：选JPG（或AVIF/WebP用于现代技术栈）。用矢量编码照片会产生极大的文件体积。
• 截图：选PNG（或WebP）。无损光栅格式可完美保留像素级UI。
• 动态UI贴纸：选SVG（CSS或SMIL）。比GIF更小更清晰，比视频更适合短循环动画。

WebP（谷歌，2010年）和AVIF（AOMedia，2019年）是现代光栅格式，与PNG和JPG竞争，而非与SVG竞争，它们不是矢量格式。SVG的失效场景是照片和连续色调图像：将每个像素表示为矢量图元会使文件远大于JPEG。对于图标和徽标，SVG仍无可匹敌。

使用SVGO优化您的SVG

从Adobe Illustrator、Sketch、Figma或Inkscape导出的典型SVG携带大量冗余：编辑器特有的元数据（<sodipodi:namedview>、<inkscape:groupmode>）、默认图层名称和分组层级、路径坐标中过多的精度（d="M 12.000023 18.999991 ..."）、可改为CSS类的内联样式属性、标识编辑器的注释块。

SVGO（SVG优化器），最初由Kir Belevich于2012年编写，是业界标准工具。它是一个拥有约50个插件的Node.js命令行工具，处理各项优化：removeComments、removeMetadata、removeEditorsNSData、convertColors（将rgb(255,0,0)转换为#f00）、convertPathData（折叠路径命令并删除冗余精度）、mergePaths、cleanupNumericValues（四舍五入到可配置精度，默认3位小数）。典型压缩率为设计工具导出的手工SVG缩小30-70%，Inkscape导出偶尔可达80%（因编辑器元数据较重）。SVGOMG（svgomg.net）是Jake Archibald（谷歌）为SVGO开发的Web前端，也是最常用的图形界面版本。

图标库全景

SVG图标库主导着现代Web技术栈。您会遇到的大型图标集有：Heroicons（Tailwind Labs，约280个图标，MIT协议）、Lucide（Feather的分支，约1,400个）、Bootstrap Icons（约2,000个）、Material Symbols（谷歌，约3,000个，多种字重）、Font Awesome 6（约30,000个免费+Pro版）、Phosphor Icons（约9,000个，六种字重）和Tabler Icons（约5,200个）。聚合器Iconify通过单一API托管来自150+图标集的20万余个开源图标；开发者可以编写<iconify-icon icon="mdi:home"></iconify-icon>，框架按需获取对应图标的SVG。从字体图标（Font Awesome 4 / Glyphicons时代）到SVG图标的转变大约发生在2017-2019年，驱动力来自可访问性、可改色性以及消除FOUT（图标字体未加载时的无样式文字闪烁）。

更多问题

viewBox与width/height有什么区别？

viewBox="0 0 100 100"定义SVG的内部用户坐标系统，其「自然」画布为100×100单位，与渲染像素大小无关。width和height设置渲染显示大小。两者同时存在时，SVG将viewBox缩放以适应渲染框。preserveAspectRatio（默认值xMidYMid meet）控制缩放时如何处理宽高比不匹配：meet保持比例并居中，none拉伸，slice裁剪以填充。仅设置viewBox并让CSS控制width和height是图标系统的现代最佳实践。

为什么我的SVG图标在屏幕上看起来模糊？

几乎总是以下三种原因之一：（1）SVG被渲染到与viewBox宽高比不匹配的固定像素尺寸，导致浏览器拉伸；（2）SVG从设计工具导出时带有亚像素坐标（「M 12.5 7.5 L ...」），浏览器抗锯齿在处理非整数边缘时尽力而为；或（3）设置了preserveAspectRatio="none"，使SVG可任意拉伸。解决方法：确保渲染容器与viewBox比例匹配，在设计工具的导出选项中将坐标对齐到整数，以及避免使用preserveAspectRatio="none"，除非您明确需要拉伸效果。

我可以将SVG用作favicon吗？

可以。<link rel="icon" type="image/svg+xml" href="icon.svg">在Chrome 80+、Firefox 41+和Safari 14+中受支持。常见做法是为现代浏览器提供一个SVG favicon，同时提供ICO回退（<link rel="icon" sizes="any" href="favicon.ico">）用于旧版客户端。SVG favicon还可以在SVG内部使用prefers-color-scheme媒体查询，在浅色和深色主题变体之间自动切换。

路径d属性真的是一种微型语言吗？

是的，掌握这十几个命令是最接近「徒手读懂SVG」的方式。命令包括：M/m（移动到，绝对/相对），L/l（直线到），H/h（水平线），V/v（垂直线），C/c（三次贝塞尔曲线，两个控制点），S/s（平滑三次，反射前一个控制点），Q/q（二次贝塞尔），T/t（平滑二次），A/a（椭圆弧，最复杂），Z/z（闭合路径）。典型的图标d如M5 12h14M12 5l7 7-7 7表示「移动到(5,12)，水平线14单位，移动到(12,5)，右下各7单位的线，左下各7单位的线」，即一个向右的箭头。

相关工具