（1）知識點
- （1.1）什么是svg
- （1.2）svg的優(yōu)勢
- （1.3）svg格式（<svg></svg>）
（2）細化
（2.1）什么是svg
- SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
- SVG 用于定義用于網(wǎng)絡的基于矢量的圖形
- SVG 使用 XML 格式定義圖形
- SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失
- SVG 是萬維網(wǎng)聯(lián)盟的標準
（2.2）svg的優(yōu)勢
與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優(yōu)勢在于：
- SVG 圖像可通過文本編輯器來創(chuàng)建和修改
- 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>
