SVG（可缩放矢量图形）
SVG 是一种基于 XML 的矢量图像格式，可缩放至任意分辨率而不损失质量。它非常适合网页上的标志、图标、插图和交互式图形。SVG 文件可以通过 CSS 设置样式、通过 JavaScript 添加动画，并且完全可搜索和可访问。
MIME 类型
image/svg+xml
类型
文本
压缩
无损
优点
- + Infinite scalability without quality loss
- + Tiny file sizes for simple graphics
- + Styleable with CSS and scriptable with JS
- + Accessible and SEO-friendly (text is selectable)
缺点
- − Not suitable for photographs or complex raster images
- − Complex SVGs can be large and slow to render
- − Security concerns when accepting user-uploaded SVGs
何时使用 .SVG
适用于标志、图标、插图、图表，以及任何需要在任意分辨率下完美缩放或通过 CSS 设置样式的图形。
技术细节
SVG 将图像存储为描述几何形状、路径和文本的 XML 文本。它支持滤镜、渐变、裁剪路径、蒙版和嵌入的光栅图像。
历史
SVG 由 W3C 开发，于 2001 年首次作为推荐标准发布。SVG 1.1 在 2003 年成为广泛采用的标准，SVG 2 目前正在开发中。
从 .SVG 转换
转换为 .SVG
相关格式
相关术语
Learn More
Color Theory for Digital Design: A Practical Guide
Understanding color theory helps you create visually harmonious designs that communicate effectively. This guide covers color models, harmony rules, accessibility …
CSS Units Explained: px, em, rem, vh, and When to Use Each
CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units …
Image Format Guide: JPEG vs PNG vs WebP vs AVIF
Choosing the right image format affects file size, quality, and browser compatibility. This comparison covers the strengths of JPEG, PNG, …
QR Code Generation: Best Practices for Print and Digital
QR codes bridge physical and digital experiences, but poorly generated codes fail to scan. This guide covers sizing, error correction, …
Flexbox vs CSS Grid: A Practical Comparison
Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and …
How to Convert Images Between Formats
A practical guide to converting between image formats like JPEG, PNG, WebP, SVG, and HEIC. Learn which conversions are lossless, …