SVG 图像示例

SVG 是一种用于呈现矢量图形的格式。矢量图形是一种将图像编码为基本几何对象 - 点、线、圆、矩形的方式。以下是可供下载的该格式测试图像

示例文件：春江
春江
300 Kb
400x300
↓
示例文件：春天公园
春天公园
435 Kb
400x300
↓
示例文件：大型测试图片，红色填充
大型测试图片，红色填充
1 Kb
400x300
↓
示例文件：大型测试图片，填充为绿色
大型测试图片，填充为绿色
1 Kb
400x300
↓
示例文件：大尺寸的蓝色填充测试图片
大尺寸的蓝色填充测试图片
1 Kb
400x300
↓
示例文件：带有红色填充的小测试图片
带有红色填充的小测试图片
1 Kb
200x200
↓
示例文件：带有绿色填充的小测试图片
带有绿色填充的小测试图片
1 Kb
200x200
↓
示例文件：带蓝色填充的小测试图片
带蓝色填充的小测试图片
1 Kb
200x200
↓
示例文件：小的红色图片
小的红色图片
1 Kb
100x75
↓
示例文件：小的绿色图片
小的绿色图片
1 Kb
100x75
↓
示例文件：小的蓝色图片
小的蓝色图片
1 Kb
100x75
↓
示例文件：单像素红色图像
单像素红色图像
1 Kb
1x1
↓

🧠 SVG 工作原理

SVG不是像素图像，而是包含绘图指令的XML文本文件：线条、曲线、形状、文字。因此SVG可以无损缩放且文件很小。可以用CSS设置样式，用JavaScript制作动画。它的组成如下：

📄 <xml> XML声明 和命名空间 🎯 <svg> viewBox, width, height 🎨 <defs> <style> 渐变、滤镜 样式、标记 📐 图形 <rect> <circle> <path> <text> 主要内容 🌐 渲染 浏览器绘制 矢量，无损