加载中...
使用缓存的音频
1
什么是SVG
可缩放矢量图形
Scalable Vector Graphics
1999
2001
2003
2008
2011
2018
SVG 1.0
SVG 1.1
SVG 1.2
SVG 1.1 Tiny
SVG 2.0
SVG 2.0
W3C推荐标准
矢量图形
位图
<root>
<element attribute="value">
<nested>内容</nested>
</element>
</root>
<svg width="200" height="200" viewBox="0 0 200 200">
<!-- 图形元素 -->
</svg>
x=200, y=100
width=200, height=100
rx=20, ry=20
cx=200, cy=150, r=50
cx=500, cy=150, rx=70, ry=40
路径是SVG中最强大的绘图工具
可以创建任意形状
M - 移动到
L - 直线到
C - 贝塞尔曲线
A - 弧线
Z - 闭合路径
三角形
心形
普通文本
粗体文本
斜体文本
viewBox="0 0 200 200"
响应式SVG
悬停我
1. 简化路径数据
2. 合并相似形状
3. 使用CSS样式
4. 移除不必要的元数据
图标
数据可视化
Logo设计
✓ Chrome - 完全支持
✓ Firefox - 完全支持
✓ Safari - 完全支持
✓ Edge - 完全支持
• Adobe Illustrator
• Inkscape
• SVGOMG
• CodePen
SVG核心优势
• 可缩放不失真
• 文件体积小
• 支持动画和交互
• 基于XML易于编辑
▶
🔊
00:00 / 00:00