什么是SVG？
SVG（可缩放矢量图形）是一种基于XML的矢量图像格式，可在不损失质量的情况下缩放到任意大小。了解SVG的定义、工作原理及使用场景。
SVG是一种用于描述2D矢量图形的基于XML的标记语言。与以像素网格存储图像的栅格格式（PNG、JPG）不同，SVG通过数学方式描述形状——使用路径、圆形、矩形和贝塞尔曲线。这意味着SVG图像可以缩放到任意大小——从16×16的favicon到4K壁纸——而不会损失任何质量。
SVG的工作原理
SVG文件是带有XML标记的文本文件： <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="#FF5733" /> <text x="50" y="55" text-anchor="middle" fill="white">你好</text> </svg> 这个SVG绘制了一个里面写有"你好"的红色圆圈。浏览器读取XML并在任何分辨率下渲染为清晰的图形。
SVG的优势
• 与分辨率无关——在任何尺寸下都完美清晰，无像素化 • 文件小——简单图形比同等PNG小得多 • 可用文本编辑器或设计工具（Figma、Illustrator）编辑 • 可制作动画——CSS和JavaScript可以为SVG元素添加动画 • 可访问性——SVG中的文字是真实文字，屏幕阅读器和搜索引擎可读 • 可用CSS样式化——无需编辑文件即可更改颜色和样式 • 可直接内联到HTML中
何时使用SVG
SVG适用于： • logo和品牌图标——需要在所有尺寸下清晰 • UI图标和插图 • 图表和数据可视化 • 交互式图形和动画 • Favicon（现代浏览器支持SVG favicon） • 简单几何图形 不应使用SVG的情况： • 照片——栅格格式（JPG/WebP）效率更高 • 复杂的写实图像 • 颜色和渐变较多的图像——文件大小会变大
Try it yourself
从SVG生成Favicon关于SVG
SVG由W3C开发，于2001年成为W3C推荐标准。现在所有现代浏览器都无需插件原生支持它。SVG已成为网页图标和logo的标准，取代了图标字体和精灵图。SVG 2.0规范增加了改进的文字处理、新的颜色函数，以及与CSS和HTML更好的集成。
FAQ
- SVG代表什么？
- SVG代表Scalable Vector Graphics（可缩放矢量图形）。
- SVG和PNG有什么区别？
- SVG是存储形状数学描述的矢量格式，可无限缩放而不损失质量。PNG是存储像素的栅格格式，放大后会模糊。SVG最适合logo和图标；PNG最适合照片和复杂图像。
- 我可以在网站上使用SVG吗？
- 可以。所有现代浏览器都原生支持SVG。您可以将SVG作为<img>的src、CSS背景图像使用，或直接内联到HTML中。内联SVG特别强大，因为它支持CSS样式和JavaScript交互。