HTML-resources/sample-email-2.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 140">
  <style><![CDATA[
    text {
      dominant-baseline: central;
      font-size: 13px;
      font-family: sans-serif;
    }

    .labels > text {
      text-anchor: end;
      fill: gray;
      font-size: 11px;
    }

    .button > rect {
      fill: url(#button-gradient);
      stroke: #B3B3B3;
    }

    .button > text {
      text-anchor: middle;
    }
  ]]></style>

  <defs>
    <linearGradient id="button-gradient" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="white"/>
      <stop offset="100%" stop-color="#999"/>
    </linearGradient>
  </defs>

  <g transform="translate(5,5)" class="button">
    <rect x="0" y="0" width="40" height="20"/>
    <text x="20" y="10">送信</text>
  </g>

  <g transform="translate(60,5)" class="button">
    <rect x="0" y="0" width="40" height="20"/>
    <text x="20" y="10">保存</text>
  </g>

  <g transform="translate(145,5)" class="button">
    <rect x="0" y="0" width="40" height="20"/>
    <text x="20" y="10">破棄</text>
  </g>

  <text x="12" y="45">宛先：</text>

  <g transform="translate(50,35)">
    <rect x="0" y="0" width="290" height="20" fill="white" stroke="lightgray"/>
    <rect x="0" y="20" width="290" height="80" fill="white" stroke="lightgray"/>

    <text x="7" y="10">bob@example.net, a<tspan dx="-1.5">|</tspan></text>
    <text x="276" y="10" fill="gray">▼</text>

    <g transform="translate(7,30)">
      <text x="0" y="0">adamjosh@example.net</text>
      <text x="0" y="20">art@example.net</text>
      <text x="0" y="40">astronomy@science.example.org</text>
      <text x="0" y="60">astrophy@cute.example</text>
    </g>

    <g transform="translate(285,30)" class="labels">
      <text x="0" y="0">Adam Josh</text>
      <text x="0" y="20">Arthur Dent</text>
    </g>
  </g>
</svg>