SVGでパンダを描く

SVGでパンダを描きます
SVG (Scalable Vector Graphics) は、ベクター形式の画像フォーマットで、拡大縮小しても画質が劣化しません。

口以外の部分は楕円です。口の部分はlineとpathのA(円弧)で構成されています
顔と目玉はマスクされて透明になります。
楕円は傾斜をつけるために、一旦原点(cx='0' cy='0')に書いて回転してから平行移動しています。

panda.svg

<svg viewBox="-20 -20 40 40" xmlns="http://www.w3.org/2000/svg">
<defs>
  <!-- 顔マスク maskは黒いところがマスクされる。一旦白の巨大円を描いて顔をblackにする -->
  <mask id="maskFace">
    <ellipse fill="white" cx='0' cy='0' rx='100' ry='100' transform="translate(0.0, 0.0) rotate(0.0)" />
    <ellipse fill="black" cx='0' cy='0' rx='9.22' ry='7.29' transform="translate(0.0, 0.0) rotate(0.0)" />
  </mask>
  <!-- 目玉マスク -->
  <mask id="maskEye">
    <ellipse fill="white" cx='0' cy='0' rx='100' ry='100' transform="translate(0.0, 0.0) rotate(0.0)" />
    <ellipse fill="black" cx='0' cy='0' rx='0.5' ry='0.5' transform="translate(-3.2, 1.0) rotate(0.0)" />
    <ellipse fill="black" cx='0' cy='0' rx='0.5' ry='0.5' transform="translate(3.2, 1.0) rotate(0.0)" />
  </mask>
</defs>

<g fill='black'>
  <g mask="url(#maskFace)"><!-- 顔でマスクして耳と手を描く -->
    <ellipse cx='0' cy='0' rx='2.805' ry='2.155' transform="translate(-6.0, -5.5) rotate(-26.0)"  />
    <ellipse cx='0' cy='0' rx='2.595' ry='2.34' transform="translate(6.0, -5.5) rotate(-142.0)" />
    <ellipse cx='0' cy='0' rx='2.24' ry='2.235' transform="translate(-7.0, 5.0) rotate(-48.0)" />
    <ellipse cx='0' cy='0' rx='2.645' ry='2.165' transform="translate(7.0, 5.2) rotate(-142.0)" />
  </g>
  <g mask="url(#maskEye)"><!-- 目玉でマスクして目を描く -->
    <ellipse cx='0' cy='0' rx='2.275' ry='1.825' transform="translate(-4.2, 1.0) rotate(-18.0)" />
    <ellipse cx='0' cy='0' rx='2.275' ry='1.825' transform="translate(4.2, 1.3) rotate(27.0)" />
  </g>
  <ellipse cx='0' cy='0' rx='0.82' ry='0.595' transform="translate(0.0, 4.5) rotate(0.0)"/> <!-- 鼻 -->
  <g fill="none" stroke="black" stroke-width="0.2" stroke-linecap="round"> <!--口 -->
    <line x1="0" y1="4.5" x2="0" y2="5.6"/>
    <path d="M 0.09 5.67 A 1 1 0 0 0 1.37 5.67"/>
    <path d="M -1.27 5.67 A 1 1 0 0 0 0.01 5.67"/> 
  </g>
</g>
</svg>