HTML5 SVG
HTML5 SVG技术文档
什么是SVG？
SVG是指可缩放矢量图形(Scalable Vector Graphics)，它是基于XML语言的一种图像格式，用来描述二维矢量图形，可以保证在各种分辨率下图像质量不失真。
相比较于传统的图片格式如PNG、JPEG等，SVG具有优秀的可编辑性和可扩展性。
使用SVG
嵌入SVG
可以使用<img>标签来嵌入一个SVG图像：
<img src="example.svg" alt="SVG Example">
也可以使用<object>标签来嵌入SVG图像：
<object type="image/svg+xml" data="example.svg">
<img src="example.png" alt="SVG Example">
</object>
在HTML中画SVG
SVG图像可以在HTML中用<svg>标签画出。
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" fill="white" />
</svg>
</body>
</html>
以上代码将呈现一个圆形。
手绘SVG
在SVG中可以手绘图形。
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<path d="M 10 10 L 90 10 L 50 90 Z" stroke="black" fill="white" />
</svg>
</body>
</html>
以上代码将呈现一个三角形。
SVG动画
SVG动画可以使用CSS或JavaScript来实现。以下是使用CSS实现的一个例子。
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes example {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
circle {
stroke: black;
fill: white;
animation: example 5s infinite linear;
}
</style>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" />
</svg>
</body>
</html>
以上代码将呈现一个旋转的圆形。
总结
HTML5 SVG是一种非常有用的图像格式，可以用来展现矢量图像和动画。除了以上示例外，SVG还支持众多特性，例如<text>标签、渐变效果等等。建议开发者深入学习SVG，以充分利用其优秀的可编辑性和可扩展性。