アンパン

anpan.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="anpanman"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100">
  <defs>
    <style>
    .line {
      stroke: #111;
      stroke-width: 1;
      stroke-linecap: round;
      fill: none;
    }
    .face {
      fill: #ea6;
    }
    .nose {
      fill: #f42;
    }
    .cheek {
      fill: #f62;
    }
    .light {
      fill: #fff;
    }
    .eye {
      fill: #111;
    }
    </style>

    <clipPath id="harf">
      <rect x="0" y="0" width="50" height="100" />
    </clipPath>

    <symbol id="anpan" viewBox="0 0 100 100"  clip-path="url(#harf)">
      <!-- 輪郭 -->
      <rect class="face line" x="15" y="15" width="80" height="60" rx="10" ry="10 "/>

      <!-- 目 -->
      <ellipse class="eye" cx="40" cy="36" rx="4" ry="6" />

      <!-- まゆ毛 -->
      <path class="line" d="M 32 32, C 33 20, 43 20, 45 28" />

      <!-- 口 -->
      <path class="line" d="M 30 60 ,C 35 67, 65 67, 70 60" />

      <!-- 頬の色 -->
      <ellipse class="cheek" cx="29" cy="50" rx="11" ry="10" />
      <!-- 頬の線 -->
      <path class="line" d="M 26 40, C 45 40, 45 60, 26 60" />
      <!-- 頬のハイライト -->
      <rect class="light" x="25" y="45" width="3" height="3" />

      <!-- 鼻 -->
      <rect class="nose line" x="39" y="40" width="22" height="20" rx="5" ry="5" />
    </symbol>
  </defs>

  <use href="#anpan" />
  <use href="#anpan" x="-100" style="transform: scale(-1,1);" />
  <rect class="light" x="45" y="45" width="3" height="3" />
</svg>