SVG简介
SVG（Scalable Vector Graphics）是一种基于可扩展标记语言的图形图像格式。与传统的位图格式（如JPEG、PNG）不同，SVG使用矢量图形，这意味着它可以无限放大而不失真。这使得SVG在网页设计、动画制作和图形处理等领域有着广泛的应用。
入门基础
1. SVG基本结构
一个简单的SVG文件通常包含以下基本结构：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- 图形内容 -->
</svg>
<svg>：定义SVG画布，width和height属性分别表示画布的宽度和高度。xmlns：定义SVG命名空间。
2. SVG基本形状
SVG提供了多种基本形状，如矩形、圆形、椭圆、线、折线、多边形等。
- 矩形：
<rect x="10" y="10" width="50" height="50" fill="red" /> - 圆形：
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> - 椭圆：
<ellipse cx="50" cy="50" rx="40" ry="20" fill="red" /> - 线：
<line x1="10" y1="10" x2="100" y2="100" stroke="black" stroke-width="2" /> - 折线：
<polyline points="10,10 40,80 80,10" stroke="black" stroke-width="2" fill="none" /> - 多边形：
<polygon points="10,10 40,80 80,10" stroke="black" stroke-width="2" fill="none" />
高级技巧
1. SVG路径
SVG路径允许你创建更复杂的图形。路径由一系列的命令组成，如M（移动到）、L（直线）、C（曲线）等。
<path d="M10 10 L50 10 L50 50 L10 50 Z" fill="red" />
2. SVG渐变
SVG渐变允许你在图形中创建颜色渐变效果。
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:blue" />
<stop offset="100%" style="stop-color:red" />
</linearGradient>
<rect x="10" y="10" width="80" height="80" fill="url(#gradient)" />
3. SVG动画
SVG动画允许你在图形中创建动态效果，如移动、放大、旋转等。
<animate attributeName="width" from="100" to="200" dur="2s" fill="freeze" />
<rect x="10" y="10" width="100" height="100" fill="red" />
实战案例
1. 制作简单的图标
使用SVG绘制一个简单的图标，如心形。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M50 10 Q60 40 90 50 T100 70 Q90 100 50 100 T10 70 Q20 40 30 50 T40 70 Z" fill="red" />
</svg>
2. 制作动画效果
使用SVG创建一个简单的动画效果，如让矩形放大。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100" fill="red">
<animate attributeName="width" from="100" to="200" dur="2s" fill="freeze" />
</rect>
</svg>
总结
通过本文的学习，相信你已经对SVG绘图有了基本的了解。SVG作为一种强大的图形图像格式，在网页设计和动画制作等领域有着广泛的应用。希望你能将所学知识应用到实际项目中，创造出更多优秀的作品！