Io可以看到许多惊人的加载。io图标。它们都是用svg编写的，只有几行代码，比img图片更精细、更小，比纯dom实现更灵活、更高效。此外，可以制作图标来响应点击事件。
方法/步骤1基本图形元素
Svg有一些预定义的形状元素:矩形。，圆形<圆>，椭圆<椭圆>，直线<直线>，折线<折线>，多边形<多边形>，路径<路径>和文本。。
-一步阅读2风格和效果
svg元素的样式可以写成标签的属性或样式。以下是一些关键的样式属性:
笔画:笔画颜色
笔画宽度:笔画宽度
笔画不透明度:笔画的透明度
填充:填充颜色，即背景
填充不透明度:填充颜色的透明度
变换:图形变换，类似于css3变换
Svg还支持许多滤镜效果，如渐变、阴影、模糊、图像混合等。不需要知道太多，例如，画几个彩色的圆，用带填充的圆。
第三，辅助要素
Svg有几个辅助元素:< g>。& ltdefs>。& lt符号>。& lt使用>。。它们不代表特定的形状，但有助于组织和重用图形元素。具体介绍可以参考这里。
& ltg>。元素通常用于对相关图形元素进行分组，以便进行统一操作，例如旋转、缩放或添加相关样式。
& lt使用>。为了实现SVG现有图形的重用，您可以重用单个SVG图形元素或重用< g >图形元素。& ltdefs>。定义的组元素。
& ltdefs>。内部定义的元素不会直接显示，您可以使用< use >按钮。实例化时定义。
& lt符号>。能够用< g >创建自己的窗口。组功能和< defs >最初看不见的特征。
对于上面提到的转换基点问题，可以使用嵌套< g>。标签和偏移。重置基点。如下绘制几个水平排列的圆，并设置不同的缩放比例
-2步读数4 4。动画的实现
svg的动画效果是基于动画标签元素实现的:
& lt动画>实现了单一属性的过渡效果，
& lt动画转换>实现变换变换动画效果，
& lt动画情感>。实现路径动画效果。
Svg以灵活的方式编写。样式可以写在标签属性或样式中。动画标签可以通过xlink指定元素，也可以写入动画元素中。下面是动画转换的xlink编写的演示。
-3步阅读5上例中的动画是从A到b的过渡。为了形成一个平滑的循环，必须至少定义三个关键点。动画转换支持越来越灵活的属性设置:
值:多个关键点的值，而不是从和到，例如值= & quot0；1；0
关键时间:对应于数值，每个点的时间点
动画快和慢。离散|线性|步调|样条
关键点:设置运动的贝塞尔控制点，当计算代码为样条曲线时有效
svg动画的更详细介绍
目标
