kb-qwerty.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="784" height="254" version="1.1" viewBox="-1 -1 390 130" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css"><![CDATA[
text { font-size: 14px; text-anchor: middle; font-family: monospace; }
.mod { font-weight: bold; }
.c0 { transform: translate(15px, 0); }
.c1 { transform: translate(47px, 0); }
.c2 { transform: translate(79px, 0); }
.c3 { transform: translate(111px, 0); }
.c4 { transform: translate(143px, 0); }
.c5 { transform: translate(175px, 0); }
.r0 { transform: translate(0, 18px); }
.r1 { transform: translate(0, 50px); }
.r2 { transform: translate(0, 82px); }
.r3 { transform: translate(0, 114px); }
.tiny { font-size: 8px; }
.tiny text { font-size: 8px; }

g.kb > g > g > text:nth-child(1) {
  font-size: 10px;
  transform: translate(-2px, -6px);
  text-anchor: end;
}
g.kb > g > g > text:nth-child(2) {
  font-size: 10px;
  transform: translate(2px, -6px);
  text-anchor: start;
  fill: #225500;
}
g.kb > g > g > text:nth-child(3) {
  font-size: 10px;
  fill: #004488;
  transform: translate(0px, 6px);
}
.shift {
  fill: #225500;
}
.altgr {
  fill: #004488;
}

]]></style>
  <g id="key">
    <rect width="29" height="28" ry="5" x="0.5" y="1.5" fill="#454C54" stroke="#454C54" stroke-width="1px"/>
    <rect width="29" height="28" ry="5" x="0.5" fill="#E6EAEF" stroke="#454C54" stroke-width="1px"/>
  </g>
  <g id="6x1">
    <use href="#key" x="0"  y="0"/>
    <use href="#key" x="32" y="0"/>
    <use href="#key" x="64" y="0"/>
    <use href="#key" x="96"  y="0"/>
    <use href="#key" x="128" y="0"/>
    <use href="#key" x="160" y="0"/>
  </g>
  <g id="left">
    <use href="#6x1" x="0" y="0"/>
    <use href="#6x1" x="0" y="32"/>
    <use href="#6x1" x="0" y="64"/>
    <use href="#key" x="128" y="96"/>
    <use href="#key" x="160" y="96"/>
  </g>
  <g id="right">
    <use href="#6x1" x="0" y="0"/>
    <use href="#6x1" x="0" y="32"/>
    <use href="#6x1" x="0" y="64"/>
    <use href="#key" x="0" y="96"/>
    <use href="#key" x="32" y="96"/>
  </g>
</defs>

<g class="kb" id="left-keyboard">
  <use href="#left"/>
  <g class="r0">
    <text class="c0 tiny">Tab</text>
    <g class="c1">
      <text>q</text>
      <text>Q</text>
      <text>!</text>
    </g>
    <g class="c2">
      <text>w</text>
      <text>W</text>
      <text>[</text>
    </g>
    <g class="c3">
      <text>e</text>
      <text>E</text>
      <text>+</text>
    </g>
    <g class="c4">
      <text>r</text>
      <text>R</text>
      <text>#</text>
    </g>
    <g class="c5">
      <text>t</text>
      <text>T</text>
      <text>]</text>
    </g>
  </g>
  <g class="r1">
    <text class="c0 tiny">BkSp</text>
    <g class="c1">
      <text>a</text>
      <text>A</text>
      <text>*</text>
    </g>
    <g class="c2">
      <text>s</text>
      <text>S</text>
      <text>(</text>
    </g>
    <g class="c3">
      <text>d</text>
      <text>D</text>
      <text>-</text>
    </g>
    <g class="c4">
      <text>f</text>
      <text>F</text>
      <text>=</text>
    </g>
    <g class="c5">
      <text>g</text>
      <text>G</text>
      <text>)</text>
    </g>
  </g>
  <g class="r2">
    <text class="c0 tiny">Multi</text>
    <g class="c1">
      <text>z</text>
      <text>Z</text>
      <text>&amp;</text>
    </g>
    <g class="c2">
      <text>x</text>
      <text>X</text>
      <text>{</text>
    </g>
    <g class="c3">
      <text>c</text>
      <text>C</text>
      <text>$</text>
    </g>
    <g class="c4">
      <text>v</text>
      <text>V</text>
      <text>_</text>
    </g>
    <g class="c5">
      <text>b</text>
      <text>B</text>
      <text>}</text>
    </g>
  </g>
  <g class="r3">
    <text class="c4 tiny mod">Esc</text>
    <text class="c5 tiny">Space</text>
  </g>
</g>

<g class="kb" id="right-keyboard" transform="translate(195, 0)">
  <use href="#right"/>
  <g class="r0">
    <g class="c0">
      <text>y</text>
      <text>Y</text>
      <text>^</text>
    </g>
    <g class="c1">
      <text>u</text>
      <text>U</text>
      <text>7</text>
    </g>
    <g class="c2">
      <text>i</text>
      <text>I</text>
      <text>8</text>
    </g>
    <g class="c3">
      <text>o</text>
      <text>O</text>
      <text>9</text>
    </g>
    <g class="c4">
      <text>p</text>
      <text>P</text>
      <text>.</text>
    </g>
    <text class="c5 tiny">Enter</text>
  </g>
  <g class="r1">
    <g class="c0">
      <text>h</text>
      <text>H</text>
      <text>~</text>
    </g>
    <g class="c1">
      <text>j</text>
      <text>J</text>
      <text>4</text>
    </g>
    <g class="c2">
      <text>k</text>
      <text>K</text>
      <text>5</text>
    </g>
    <g class="c3">
      <text>l</text>
      <text>L</text>
      <text>6</text>
    </g>
    <g class="c4">
      <text>;</text>
      <text>:</text>
      <text>0</text>
    </g>
    <g class="c5">
      <text>'</text>
      <text>"</text>
      <text>`</text>
    </g>
  </g>
  <g class="r2">
    <g class="c0">
      <text>n</text>
      <text>N</text>
      <text>%</text>
    </g>
    <g class="c1">
      <text>m</text>
      <text>M</text>
      <text>1</text>
    </g>
    <g class="c2">
      <text>,</text>
      <text>&lt;</text>
      <text>2</text>
    </g>
    <g class="c3">
      <text>.</text>
      <text>&gt;</text>
      <text>3</text>
    </g>
    <g class="c4">
      <text>/</text>
      <text>?</text>
      <text>/</text>
    </g>
    <g class="c5">
      <text>\</text>
      <text>|</text>
      <text>@</text>
    </g>
  </g>
  <g class="r3">
    <text class="c0 tiny shift mod">Shift</text>
    <text class="c1 tiny altgr mod">AltGr</text>
  </g>
  </g>
</svg>