SVG 工具

SVG 预览与查看器

在浏览器中即时预览和查看SVG矢量图形。检查渲染效果、尺寸,并在不同缩放级别下进行缩放查看。

svgpreviewviewrenderdisplay

SVG Preview

SVG Info

Width240
Height240
ViewBox0 0 24 24
Background:
100%

What is SVG 预览与查看器?

SVG预览与查看器是一款在线工具,让您可以在干净专用的查看器环境中即时渲染和检查可缩放矢量图形(SVG)文件。许多文本编辑器、代码编辑器和文件浏览器不提供高质量的SVG预览,或只显示静态缩略图,难以验证SVG在浏览器中的实际渲染方式,或检查精确的尺寸、viewBox设置和矢量渲染质量。本SVG查看器支持粘贴SVG标记、拖放.svg文件或从设备选择文件。查看器以原生分辨率渲染SVG,具有与现代Web浏览器相同的清晰抗锯齿渲染效果。您可以从缩略图放大到像素级放大,在画布上平移,切换网格叠加层以进行对齐检查,并检查不同比例因子下的实际渲染像素尺寸。信息面板显示提取的SVG元数据,包括声明的宽度和高度、viewBox坐标、检测到的宽高比、可见内容的估计边界框以及SVG元素的计数(路径、组、形状、文本等)。背景色板让您可以在白色、黑色、透明棋盘格或自定义颜色下预览SVG,以验证其在不同背景下的显示效果,这对于具有特定背景要求的Logo和图标特别有用。查看器还会检测并报告常见的SVG问题,如缺少viewBox属性、非正方形宽高比以及潜在的问题功能。

When to Use SVG 预览与查看器

用于在将SVG资源从设计师添加到项目之前进行验证、检查SVG在不同背景颜色下的渲染方式、检查SVG尺寸和viewBox坐标、在导出前预览多种尺寸的图标,或比较不同SVG优化工具的渲染输出。

How to Use SVG 预览与查看器

粘贴SVG标记、拖放.svg文件或点击选择文件。SVG立即渲染。使用缩放控件和平移检查细节。切换网格叠加、背景颜色和信息显示。如果需要,将预览导出为PNG或复制原始SVG代码。