（1）知识点

（1.1）什么是svg
（1.2）svg的优势
（1.3）svg格式（<svg></svg>）

（2）细化

（2.1）什么是svg

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

（2.2）svg的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

（3）实践

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>复习html5 svg</title>
    </head>
    
    <body>

        <svg width="140" height="170">
            <title>猫咪</title>
            <desc>使用svg画了一个猫咪</desc>
            <!--脸 
                cx：center x 中心点x轴距离，距离左边框
                cy：center y 中心点y轴距离，距离上边框
                r：半径
                stroke：边框颜色
                fill：填充的颜色
            -->
            <circle cx="70" cy="95" r="50" style="stroke: red; fill: none;" />
            <circle cx="55" cy="80" r="5" style="stroke: black; fill: #339933" />
            <circle cx="85" cy="80" r="5" style="stroke: black; fill: #339933" />
            
            <g id="whiskers">
                <link x1="75" y1="95" x2="135" y2="85" style="stroke: black;" />
                <link x1="75" y1="95" x2="135" y2="105" style="stroke: black;" />
            </g>
            <use xlink:href="#whiskers" transform="scale(-1,1) translate(-140,0)" />
            
            <!-- 耳朵 -->
            <polyline points="108 62, 90 10,70 45, 50 10, 32 62" style="stroke: black; fill: none;" />
            <!-- 嘴 -->
            <polyline points="35 110, 45 120, 95 120, 105 110" style="stroke: black; fill: none;" />
            <!-- 鼻子 -->
            <path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #ffcccc;" />
            <text x="60" y="165" style="font-family:sans-serif; font-size:14pt;">Cat</text>
        </svg>
    </body>

</html>

review html5 01：svg

（1）知识点

（2）细化

（2.1）什么是svg

（2.2）svg的优势

（3）实践