SVG基本文法

@keyframes eye-move {
  to {
    transform: translateX(-3px) scale(0.99);
  }
}
.eye {
  animation: eye-move alternate infinite ease-in 1s;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="160" height="160">
<defs>
<symbol id="smile" viewBox="0 0 160 160">
  <rect width="160" height="160" fill="skyblue" x="0" y="0" />
  <rect width="80" height="60" fill="bisque" x="40" y="50" />
  <g class="eye">
    <circle cx="65" cy="75" r="5" fill="black" />
    <circle cx="95" cy="75" r="5" fill="black" />
  </g>
  <line	x1="65" x2="95"	y1="95" y2="95"	stroke="black" stroke-width="5"	stroke-linecap="round"/>
</symbol>
</defs>

<use href="#smile" x="0" y="0" width="80" height="80"></use>
</svg>