Scalable Vector Graphics (.svg)
W3C 标准Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity, CSS styling, and animation.
将 SVG 转换为 PNG
免费的浏览器端 SVG 转 PNG 转换器。在您的设备上即时转换文件。
在线压缩 SVG
100% 浏览器本地私密压缩 — 文件永不离开您的设备
检查与元数据
操作系统和文件分析器通过检查开头的二进制字节序列来识别 SVG 文件：
字节级文件头签名 (Magic Bytes)
操作系统和文件分析器通过检查开头的二进制字节序列来识别 SVG 文件：
十六进制签名 (偏移量 0)：
3C 73 76 67ASCII 表示形式： <svg
标准化： W3C Recommendation (SVG 1.1 / SVG 2)
技术规格
| 容器架构 | XML-based text markup document defining 2D vector geometry |
| 压缩方式 | Gzip / Brotli text compression (SVGZ uses gzip compression) |
| 字节序 | Not applicable (Text-based UTF-8 / UTF-16 character stream) |
| 色彩空间 | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| 通道与结构 | Unlimited resolution vector shapes, bezier curves, typography, and opacity masks |
| 最大尺寸 | Resolution-independent (scales infinitely to any viewport without pixelation) |
| 透明度 | Full variable alpha transparency and CSS blend modes |
| 流式传输与渐进式加载 | Progressive text stream parsing supported by browser XML parser |
技术对比矩阵：SVG 对比同类产品
| 技术属性 | SVG (当前) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Rendering Model | Retained mode vector DOM | Immediate mode bitmap canvas | Retained mode fixed page container | Raster pixel grid |
| Styling & CSS | Fully styleable via CSS classes and variables | Requires JavaScript canvas API redraws | No dynamic CSS styling | Fixed raster pixels |
| Infinite Scalability | Yes (mathematical vector curves) | Requires manual resolution scaling | Yes (vector elements) | No (pixelates when enlarged) |
| Interactivity | Native DOM events (hover, click, animations) | Requires manual hit detection math | Static document | Requires image map or canvas |
常见损坏模式与十六进制恢复指南
⚠️ Browser displays XML Parsing Error: unclosed token or mismatched tag.
根本原因: Malformed XML syntax, missing closing tags, or unescaped ampersands ('&' instead of '&').
恢复方法: Validate with an XML linter (xmllint file.svg) and correct unbalanced tags.
安全分析与解析器攻击向量
Because SVG is executable XML that supports '<script>' tags and external entities, it presents significant XSS and SSRF risks if untrusted SVGs are displayed.
已知攻击向量
- Stored Cross-Site Scripting (XSS) via embedded '<script>' tags or 'onload=' event handlers.
- XML External Entity (XXE) attacks reading local server files when parsed on backend servers.
- Billion Laughs XML entity expansion causing denial of service.
防御性最佳实践: Always sanitize SVGs using DOMPurify before embedding, or serve SVGs with 'Content-Security-Policy: default-src 'none'' or as '<img>' tags which automatically disable scripts.
历史渊源与里程碑
核心优势与特点
- Infinite resolution independence: crisp lines and typography on any display or print scale.
- Extremely small file size for logos, icons, and UI interface elements.
- Fully scriptable and styleable via CSS and JavaScript inside the browser DOM.
技术局限与劣势
- Unsuitable for photographs or complex continuous-tone imagery.
- Complex vector paths with thousands of nodes can cause CPU rendering lag and high battery drain.
- XML nature allows embedded scripting, requiring strict sanitization before rendering untrusted uploads.
趣味技术冷知识
- Because SVG is plain XML text, compressing it with Gzip (producing an .svgz file) often reduces size by 70%–80%.
- The viewBox attribute defines an abstract coordinate canvas that maps dynamically to physical screen pixels.
常见技术问题
Can SVG files contain malicious code?
Yes. Because SVG is valid XML, it can contain embedded JavaScript ('<script>') that executes if the SVG is loaded directly in a browser or opened in an inline '<svg>' element. Serving SVGs via an '<img>' tag automatically neutralizes script execution.
When should I use SVG instead of PNG?
Use SVG for icons, logos, charts, illustrations, and typography where crisp scaling across all screen sizes and small file sizes are required. Use PNG or WebP for photographs.
相关的 SVG 转换对
Rasterize resolution-independent SVG vector graphics into high-resolution PNG bitmap assets.
Trace and vectorize high-contrast PNG bitmap images into scalable SVG paths.
Compile SVG vector graphics into scalable, printable PDF documents.
Extract vector graphics and paths from PDF pages into standalone SVG files.
Convert 2D CAD DXF drawings into web-viewable SVG vector diagrams.
Export SVG vector shapes into AutoCAD DXF format for CNC and CAD processing.