从svg诞生的panda

学习前端性能优化时候，有看到说用svg矢量图代替图片也是一个优化点。

所以就顺带学了下svg，脑洞大开，画只萌萌哒熊猫。

svg的语法类似css的行内写法，看了好多svg写的效果，感觉难点不在语法，而是在创造力。

这里贴一个链接，里面有很棒的demo，喜欢的同学可以去研究下https://www.html5tricks.com/tag/svg/。

另外附上我panda的DNA

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <div class="container">
      <svg width=600 height=400 transform="translate(100,0)">
         <!--  右边胳膊 -->
          <rect x=360 y=100 width=40 height=100 stroke="#000" rx=40 ry=30 transform="rotate(30,380 150)"></rect> 
         <!--  右边退 -->
          <rect x=340 y=220 width=40 height=100 stroke="#000" rx=40 ry=30 transform="rotate(-80,360 270)"></rect> 
          <!-- 左边退 -->
          <rect x=200 y=220 width=40 height=100 stroke="#000" rx=40 ry=30 transform="rotate(30,220 270)"></rect> 
          <!-- 肚子 -->
          <ellipse cx=290 cy=200 rx=80 ry=90 stroke="#000" fill="white"></ellipse>
          <!-- 左耳朵 -->
          <circle cx=250 cy=40 r=20 stroke="#000" fill="#000"></circle>
          <!-- 右耳朵 -->
          <circle cx=330 cy=40 r=20 stroke="#000" fill="#000"></circle>
          <!-- 大脑袋 -->
          <ellipse cx=290 cy=90 rx=70 ry=60   stroke="#000" fill="white"></ellipse>
          <!-- 右眼 -->
          <path d="M310 60 C380 80, 310 130, 310 60" stroke="#000" fill="#000"></path>
          <circle cx=322 cy=75 r=4 stroke="#fff" fill="#fff"></circle>
          <!-- 左眼 -->
          <path d="M270 60 C200 80, 270 130, 270 60" stroke="#000" fill="#000"></path>
          <circle cx=259 cy=75 r=4 stroke="#fff" fill="#fff"></circle>
          <!-- 鼻子 -->
          <ellipse cx=290 cy=100 rx=5 ry=10 stroke="#000" fill="#000"></ellipse>
          <!-- 嘴巴 -->
          <ellipse cx=290 cy=125 rx=20 ry=5 stroke="#000" fill="pink"></ellipse>
          <!-- 左胳膊 -->
          <rect x=230 y=120 width=40 height=100 stroke="#000" rx=40 ry=30 transform="rotate(-120,250 170)"></rect>
      </svg>
    </div>
</body>
</html>