assets/surface-kbd.svg

<!--
  SVG image for a 78-key Microsoft Surface Keyboard
  =================================================

  Created by: Hendrik Erz      <info@zettlr.com>
  License:    CC BY-NC-SA 4.0  <https://creativecommons.org/licenses/by-nc-sa/4.0/>

  Terms of use
  ============

  You are free to:

  * SHARE: Copy and redistribute the material in any medium or format
  * ADAPT: Remix, transform, and built upon the material

  Under the following terms:

  * ATTRIBUTION: You must give appropriate credit, provide
    a link to the license, and indicate if changes were made.
    You may do so in any reasonable manner, but not in any
    way that suggests the licensor endorses you or your use.
  * NON-COMMERCIAL: You may not use the material for commercial
    purposes.
  * SHARE-ALIKE: If you remix, transform, or build upon the
    material, you must distribute your contributions under the
    same license as the original.

  DO NOT REMOVE THIS LICENSE BLOCK.
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 545 220">
  <!--
    Surface keyboards always have 78 keys (at least Gen 4)

    Row 1: 14 keys (incl. Delete)
    Row 2: 14 keys (incl. Backspace)
    Row 3: 14 keys (incl. Tab)
    Row 4: 13 keys (incl. Enter)
    Row 5: 12 keys (incl. Shift)
    Row 6: 11 keys (incl. Arrows)

    All standard keys are addressed via x/y-coords (row:key), one-based index,
    e.g.: key1-1 is accent/tilde, key2-1 is Q (on en-US layout). The special keys
    are addressed via named IDs, that is: arrow-up, caps-lock, shift-right, etc.

    NOTES:

    * You can toggle caps-lock by adding/removing the "on" class on its indicator.
    * You can toggle the Fn key by adding/removing the "on" class on its indicator.
   -->

   <!-- GENERAL STYLES -->
   <style type="text/css">
       /* This animation pulsates a key if it has the class "pulse" */
       @keyframes pulsate-key {
         0% {
           stroke-opcaity: 1;
           stroke-width: 0;
         }

         10% {
           stroke-opacity: 1;
           stroke-width: 1;
         }

         100% {
           stroke-opacity: 0;
           stroke-width: 6;
         }
       }

       .keyboard-surface {
         fill: #8b8b8b;
         stroke: #333333;
       }

       .surface .indicator {
         stroke: none;
         fill: #c6c6cc;
       }

       .surface .indicator.on {
         fill: #aaffaa;
       }

       .surface .indicator.off {
         fill: #c6c6cc;
       }

       /* .keyboard-keys namespacing enables custom theming. */
       .surface.keyboard-keys rect.key {
         fill: #a6a6ac;
         stroke: #181818;
         rx: 1pt;
         ry: 1pt;
       }

       .surface.keyboard-keys rect.key.highlight {
         fill: #aa6666;
       }

       .surface.keyboard-keys rect.key.pulse {
         stroke: #fde1a3;
         animation: pulsate-key 1s infinite; /* Let the key's stroke pulsate */
       }

       .surface.keyboard-keys text {
         fill: #ffffff;
         stroke: none;
         font-family: 'Calibri Light', 'Helvetica Neue', sans-serif;
         font-size: 5pt;
         text-anchor: middle;
         dominant-baseline: middle;
       }

       .surface.keyboard-keys text.function-key-label {
         font-size: 3pt;
         text-anchor: end;
         dominant-baseline: baseline;
       }

       /* Adjust the font size of layer1, layer2, and layer3 key labels */
       .surface.keyboard-keys text.layer1-key-label, .surface.keyboard-keys text.layer2-key-label {
         font-size: 5pt; /* Same */
       }

       .surface.keyboard-keys text.layer3-key-label {
         font-size: 5pt; /* Smaller font-size */
       }

       .surface.keyboard-keys .icon-outline {
         stroke: #ffffff;
         fill: none;
         r: 0.5pt;
       }

       .surface.keyboard-keys .icon-fill {
         stroke: none;
         fill: #ffffff;
       }

       .surface.keyboard-keys .icon-outline-reverse {
         stroke: #a6a6ac;
         fill: none;
       }

       .surface.keyboard-keys .icon-fill-reverse {
         stroke: none;
         fill: #a6a6ac;
       }
   </style>

  <!-- First, draw the keyboard outline -->
  <rect class="keyboard-surface" x="10" y="10" width="525" height="200" rx="2" ry="2" />

  <!-- Namespace the keys for easy styling -->
  <g class="surface keyboard-keys">
    <!-- Row one: Function keys -->
    <g id="escape">
      <rect class="key" x="15" y="15" width="45" height="15" />
      <text x="25" y="22.5" text-anchor="start">Esc</text>
    </g>
    <g id="f1">
      <rect class="key" x="65" y="15" width="30" height="15" />
      <!-- Sun -->
      <circle class="icon-fill" cx="80" cy="22" r="0.5" />
      <!-- Eight points surrounding it -->
      <circle class="icon-fill" cx="80" cy="19" r="0.5" />
      <circle class="icon-fill" cx="82" cy="20" r="0.5" />
      <circle class="icon-fill" cx="83" cy="22" r="0.5" />
      <circle class="icon-fill" cx="82" cy="24" r="0.5" />
      <circle class="icon-fill" cx="80" cy="25" r="0.5" />
      <circle class="icon-fill" cx="78" cy="24" r="0.5" />
      <circle class="icon-fill" cx="77" cy="22" r="0.5" />
      <circle class="icon-fill" cx="78" cy="20" r="0.5" />
      <text class="function-key-label" x="93" y="27">F1</text>
    </g>
    <g id="f2">
      <rect class="key" x="100" y="15" width="30" height="15" />
      <!-- Sun -->
      <circle class="icon-fill" cx="115" cy="22" r="1" stroke="#ffffff" />
      <!-- Eight points surrounding it -->
      <circle class="icon-fill" cx="115" cy="19" r="1" />
      <circle class="icon-fill" cx="117" cy="20" r="1" />
      <circle class="icon-fill" cx="118" cy="22" r="1" />
      <circle class="icon-fill" cx="117" cy="24" r="1" />
      <circle class="icon-fill" cx="115" cy="25" r="1" />
      <circle class="icon-fill" cx="113" cy="24" r="1" />
      <circle class="icon-fill" cx="112" cy="22" r="1" />
      <circle class="icon-fill" cx="113" cy="20" r="1" />
      <text class="function-key-label" x="128" y="27">F2</text>
    </g>
    <g id="f3">
      <rect class="key" x="135" y="15" width="30" height="15" />
      <!-- Play/Pause -->
      <polygon class="icon-outline" points="148.5,22 146,20.5 146,23.5" stroke-width="0.5" />
      <line class="icon-outline" x1="150" y1="20" x2="150" y2="24" stroke-width="0.5" />
      <line class="icon-outline" x1="152" y1="20" x2="152" y2="24" stroke-width="0.5" />
      <text class="function-key-label" x="163" y="27">F3</text>
    </g>
    <g id="f4">
      <rect class="key" x="170" y="15" width="30" height="15" />
      <!-- Mute -->
      <path class="icon-outline" d="M180 21 l2 0 l1 -1 q1 -1 1 0 l0 4 q0 1 -1 0 l-1 -1 l-2 0 Z" stroke-width="0.5" />
      <line class="icon-outline" x1="186" x2="188" y1="21" y2="23" stroke-width="0.5" />
      <line class="icon-outline" x1="186" x2="188" y1="23" y2="21" stroke-width="0.5" />
      <text class="function-key-label" x="198" y="27">F4</text>
    </g>
    <g id="f5">
      <rect class="key" x="205" y="15" width="30" height="15" />
      <!-- Decrease volume -->
      <path class="icon-outline" d="M217 21 l2 0 l1 -1 q1 -1 1 0 l0 4 q0 1 -1 0 l-1 -1 l-2 0 Z" stroke-width="0.5" />
      <path class="icon-outline" d="M222 20 q1 2 0 4" stroke-width="0.5" />
      <text class="function-key-label" x="233" y="27" >F5</text>
    </g>
    <g id="f6">
      <rect class="key" x="240" y="15" width="30" height="15" />
      <!-- Increase volume -->
      <path class="icon-outline" d="M251 21 l2 0 l1 -1 q1 -1 1 0 l0 4 q0 1 -1 0 l-1 -1 l-2 0 Z" stroke-width="0.5" />
      <path class="icon-outline" d="M256 20   q1   2   0 4" stroke-width="0.5" />
      <path class="icon-outline" d="M257 19.5 q1.5 2.5 0 5" stroke-width="0.5" />
      <text class="function-key-label" x="268" y="27">F6</text>
    </g>
    <g id="f7">
      <rect class="key" x="275" y="15" width="30" height="15" />
      <!-- A somewhat bigger rising sun -->
      <line class="icon-outline" x1="288" y1="23.8" x2="292" y2="23.8" stroke-width="1.5" />
      <!-- Five rays -->
      <line class="icon-outline" x1="284" y1="24" x2="287" y2="24" />
      <line class="icon-outline" x1="285.5" y1="19.5" x2="287.5" y2="21.5" />
      <line class="icon-outline" x1="290" y1="18" x2="290" y2="21" />
      <line class="icon-outline" x1="292.5" y1="21.5" x2="294.5" y2="19.5" />
      <line class="icon-outline" x1="293" y1="24" x2="296" y2="24" />
      <text class="function-key-label" x="303" y="27">F7</text>
    </g>
    <g id="f8">
      <rect class="key" x="310" y="15" width="30" height="15" />
      <text x="325" y="22.5">PrtScn</text>
      <text class="function-key-label" x="338" y="27">F8</text>
    </g>
    <g id="f9">
      <rect class="key" x="345" y="15" width="30" height="15" />
      <text x="360" y="22.5" stroke="none" text-anchor="middle">Home</text>
      <text class="function-key-label" x="373" y="27">F9</text>
    </g>
    <g id="f10">
      <rect class="key" x="380" y="15" width="30" height="15" />
      <text x="395" y="22.5" text-anchor="middle">End</text>
      <text class="function-key-label" x="408" y="27">F10</text>
    </g>
    <g id="f11">
      <rect class="key" x="415" y="15" width="30" height="15" />
      <text x="430" y="22.5" text-anchor="middle">PgUp</text>
      <text class="function-key-label" x="443" y="27">F11</text>
    </g>
    <g id="f12">
      <rect class="key" x="450" y="15" width="30" height="15" />
      <text x="465" y="22.5" text-anchor="middle">PgDn</text>
      <text class="function-key-label" x="478" y="27">F12</text>
    </g>
    <g id="delete">
      <rect class="key" x="485" y="15" width="45" height="15" />
      <text x="520" y="22.5" text-anchor="right">Del</text>
    </g>

    <!-- Row two: Numbers and Backspace -->
    <g id="key1-1">
      <rect class="key" x="15" y="35" width="30" height="30" />
      <text class="layer1-key-label" x="30" y="55"></text>
      <text class="layer2-key-label" x="30" y="45"></text>
    </g>
    <g id="key1-2">
      <rect class="key" x="50" y="35" width="30" height="30" />
      <text class="layer1-key-label" x="65" y="55"></text>
      <text class="layer2-key-label" x="65" y="45"></text>
    </g>
    <g id="key1-3">
      <rect class="key" x="85" y="35" width="30" height="30" />
      <text class="layer1-key-label" x="100" y="55"></text>
      <text class="layer2-key-label" x="100" y="45"></text>
    </g>
    <g id="key1-4">
      <rect class="key" x="120" y="35" width="30" height="30" />
      <text class="layer1-key-label" x="135" y="55"></text>
      <text class="layer2-key-label" x="135" y="45"></text>
    </g>
    <g id="key1-5">
      <rect class="key" x="155" y="35" width="30" height="30" />
      <text class="layer1-key-label" x="170" y="55"></text>
      <text class="layer2-key-label" x="170" y="45"></text>
    </g>
    <g id="key1-6">
      <rect class="key" x="190" y="35" width="30" height="30" />
      <text class="layer1-key-label" x="205" y="55"></text>
      <text class="layer2-key-label" x="205" y="45"></text>
    </g>
    <g id="key1-7">
      <rect class="key" x="225" y="35" width="30" height="30" />
      <text class="layer1-key-label" x="240" y="55"></text>
      <text class="layer2-key-label" x="240" y="45"></text>
    </g>
    <g id="key1-8">
      <rect class="key" x="260" y="35" width="30" height="30" />
      <text class="layer1-key-label" x="275" y="55" ></text>
      <text class="layer2-key-label" x="275" y="45" ></text>
    </g>
    <g id="key1-9">
      <rect class="key" x="295" y="35" width="30" height="30" />
      <text class="layer1-key-label" x="310" y="55"></text>
      <text class="layer2-key-label" x="310" y="45"></text>
    </g>
    <g id="key1-10">
      <rect class="key" x="330" y="35" width="30" height="30" />
      <text class="layer1-key-label" x="345" y="55"></text>
      <text class="layer2-key-label" x="345" y="45"></text>
    </g>
    <g id="key1-11">
      <rect class="key" x="365" y="35" width="30" height="30" />
      <text class="layer1-key-label" x="380" y="55"></text>
      <text class="layer2-key-label" x="380" y="45"></text>
    </g>
    <g id="key1-12">
      <rect class="key" x="400" y="35" width="30" height="30" />
      <text class="layer1-key-label" x="415" y="55"></text>
      <text class="layer2-key-label" x="415" y="45"></text>
    </g>
    <g id="key1-13">
      <rect class="key" x="435" y="35" width="30" height="30" />
      <text class="layer1-key-label" x="450" y="55"></text>
      <text class="layer2-key-label" x="450" y="45"></text>
    </g>
    <g id="backspace">
      <rect class="key" x="470" y="35" width="60" height="30" />
      <text x="500" y="50">Backspace</text>
    </g>

    <!-- Row three: Tab -->
    <g id="tab">
      <rect class="key" x="15"  y="70" width="45" height="30" />
      <text x="30" y="85">Tab</text>
    </g>
    <g id="key2-1">
      <rect class="key" x="65"  y="70" width="30" height="30" />
      <text class="layer1-key-label" x="80" y="85"></text>
      <text class="layer3-key-label" x="90" y="95"></text>
    </g>
    <g id="key2-2">
      <rect class="key" x="100" y="70" width="30" height="30" />
      <text class="layer1-key-label" x="115" y="85"></text>
    </g>
    <g id="key2-3">
      <rect class="key" x="135" y="70" width="30" height="30" />
      <text class="layer1-key-label" x="150" y="85"></text>
      <text class="layer3-key-label" x="160" y="95"></text>
    </g>
    <g id="key2-4">
      <rect class="key" x="170" y="70" width="30" height="30" />
      <text class="layer1-key-label" x="185" y="85"></text>
    </g>
    <g id="key2-5">
      <rect class="key" x="205" y="70" width="30" height="30" />
      <text class="layer1-key-label" x="220" y="85"></text>
    </g>
    <g id="key2-6">
      <rect class="key" x="240" y="70" width="30" height="30" />
      <text class="layer1-key-label" x="255" y="85"></text>
    </g>
    <g id="key2-7">
      <rect class="key" x="275" y="70" width="30" height="30" />
      <text class="layer1-key-label" x="290" y="85"></text>
    </g>
    <g id="key2-8">
      <rect class="key" x="310" y="70" width="30" height="30" />
      <text class="layer1-key-label" x="325" y="85"></text>
    </g>
    <g id="key2-9">
      <rect class="key" x="345" y="70" width="30" height="30" />
      <text class="layer1-key-label" x="360" y="85"></text>
    </g>
    <g id="key2-10">
      <rect class="key" x="380" y="70" width="30" height="30" />
      <text class="layer1-key-label" x="395" y="85"></text>
    </g>
    <g id="key2-11">
      <rect class="key" x="415" y="70" width="30" height="30" />
      <text class="layer1-key-label" x="430" y="85"></text>
      <text class="layer2-key-label" x="440" y="95"></text>
    </g>
    <g id="key2-12">
      <rect class="key" x="450" y="70" width="30" height="30" />
      <text class="layer1-key-label" x="465" y="80"></text>
      <text class="layer2-key-label" x="465" y="90"></text>
      <text class="layer3-key-label" x="475" y="90"></text>
    </g>
    <g id="key2-13">
      <rect class="key" x="485" y="70" width="45" height="30" />
      <text class="layer1-key-label" x="508" y="80"></text>
      <text class="layer2-key-label" x="508" y="90"></text>
    </g>

    <!-- Row four: Caps and Enter -->
    <g id="caps-lock">
      <rect class="key" x="15" y="105" width="55" height="30" />
      <circle class="indicator on" id="caps-status" cx="65" cy="110" r="1" />
      <text x="32.5" y="120">Caps</text>
    </g>
    <g id="key3-1">
      <rect class="key" x="75" y="105" width="30" height="30" />
      <text class="layer1-key-label" x="90" y="120"></text>
    </g>
    <g id="key3-2">
      <rect class="key" x="110" y="105" width="30" height="30" />
      <text class="layer1-key-label" x="125" y="120"></text>
    </g>
    <g id="key3-3">
      <rect class="key" x="145" y="105" width="30" height="30" />
      <text class="layer1-key-label" x="160" y="120"></text>
    </g>
    <g id="key3-4">
      <rect class="key" x="180" y="105" width="30" height="30" />
      <text class="layer1-key-label" x="195" y="120"></text>
    </g>
    <g id="key3-5">
      <rect class="key" x="215" y="105" width="30" height="30" />
      <text class="layer1-key-label" x="230" y="120"></text>
    </g>
    <g id="key3-6">
      <rect class="key" x="250" y="105" width="30" height="30" />
      <text class="layer1-key-label" x="265" y="120"></text>
    </g>
    <g id="key3-7">
      <rect class="key" x="285" y="105" width="30" height="30" />
      <text class="layer1-key-label" x="300" y="120"></text>
    </g>
    <g id="key3-8">
      <rect class="key" x="320" y="105" width="30" height="30" />
      <text class="layer1-key-label" x="335" y="120"></text>
    </g>
    <g id="key3-9">
      <rect class="key" x="355" y="105" width="30" height="30" />
      <text class="layer1-key-label" x="370" y="120"></text>
    </g>
    <g id="key3-10">
      <rect class="key" x="390" y="105" width="30" height="30" />
      <text class="layer1-key-label" x="405" y="120"></text>
      <text class="layer2-key-label" x="415" y="130"></text>
    </g>
    <g id="key3-11">
      <rect class="key" x="425" y="105" width="30" height="30" />
      <text class="layer1-key-label" x="440" y="120"></text>
      <text class="layer2-key-label" x="450" y="130"></text>
    </g>
    <g id="enter">
      <rect class="key" x="460" y="105" width="70" height="30" />
      <text x="510" y="120">Enter</text>
    </g>

    <!-- Row five: Both Shifts -->
    <g id="shift-left">
      <rect class="key" x="15"  y="140" width="80" height="30" />
      <text x="32.5" y="155">Shift</text>
    </g>
    <g id="key4-1">
      <rect class="key" x="100" y="140" width="30" height="30" />
      <text class="layer1-key-label" x="115" y="155"></text>
    </g>
    <g id="key4-2">
      <rect class="key" x="135" y="140" width="30" height="30" />
      <text class="layer1-key-label" x="150" y="155"></text>
    </g>
    <g id="key4-3">
      <rect class="key" x="170" y="140" width="30" height="30" />
      <text class="layer1-key-label" x="185" y="155"></text>
    </g>
    <g id="key4-4">
      <rect class="key" x="205" y="140" width="30" height="30" />
      <text class="layer1-key-label" x="220" y="155"></text>
    </g>
    <g id="key4-5">
      <rect class="key" x="240" y="140" width="30" height="30" />
      <text class="layer1-key-label" x="255" y="155"></text>
    </g>
    <g id="key4-6">
      <rect class="key" x="275" y="140" width="30" height="30" />
      <text class="layer1-key-label" x="290" y="155"></text>
    </g>
    <g id="key4-7">
      <rect class="key" x="310" y="140" width="30" height="30" />
      <text class="layer1-key-label" x="325" y="155"></text>
      <text class="layer3-key-label" x="335" y="165"></text>
    </g>
    <g id="key4-8">
      <rect class="key" x="345" y="140" width="30" height="30" />
      <text class="layer1-key-label" x="360" y="160"></text>
      <text class="layer2-key-label" x="360" y="150"></text>
    </g>
    <g id="key4-9">
      <rect class="key" x="380" y="140" width="30" height="30" />
      <text class="layer1-key-label" x="395" y="160"></text>
      <text class="layer2-key-label" x="395" y="150"></text>
    </g>
    <g id="key4-10">
      <rect class="key" x="415" y="140" width="30" height="30" />
      <text class="layer1-key-label" x="430" y="160"></text>
      <text class="layer2-key-label" x="430" y="150"></text>
    </g>
    <g id="shift-right">
      <rect class="key" x="450" y="140" width="80" height="30" />
      <text x="510" y="155">Shift</text>
    </g>

    <!-- Row six: The control section -->
    <g id="control">
      <rect class="key" x="15"  y="175" width="55" height="30" />
      <text x="32.5" y="190">Ctrl</text>
    </g>
    <g id="fn">
      <rect class="key" x="75"  y="175" width="30" height="30" />
      <circle class="indicator on" id="fn-status" cx="100" cy="180" r="1" />
      <text x="90" y="190">Fn</text>
    </g>
    <g id="windows">
      <rect class="key" x="110"  y="175" width="30" height="30" />
      <!-- The Windows logo -->
      <path class="icon-fill" d="M120 186 l10 -1 l0 10 l-10 -1 Z" />
      <line class="icon-outline-reverse" x1="124" x2="124" y1="185" y2="195" stroke-width="0.5" />
      <line class="icon-outline-reverse" x1="120" x2="130" y1="190" y2="190" stroke-width="0.5" />
    </g>
    <g id="alt-left">
      <rect class="key" x="145" y="175" width="30" height="30" />
      <text x="160" y="190">Alt</text>
    </g>
    <g id="space">
      <rect class="key" x="180" y="175" width="175" height="30" />
      <text x="267.5" y="190"></text>
    </g>
    <g id="alt-right">
      <rect class="key" x="360" y="175" width="30" height="30" />
      <text x="375" y="190">Alt</text>
    </g>
    <g id="menu">
      <rect class="key" x="395" y="175" width="30" height="30" />
      <!-- Burgertime! -->
      <rect class="icon-outline" x="402.5" y="182.5" width="15" height="15" />
      <line class="icon-outline" x1="407.5" x2="412.5" y1="187.5" y2="187.5" />
      <line class="icon-outline" x1="407.5" x2="412.5" y1="190" y2="190" />
      <line class="icon-outline" x1="407.5" x2="412.5" y1="192.5" y2="192.5" />
    </g>
    <g id="arrow-left">
      <rect class="key" x="430" y="175" width="30" height="30" />
      <path class="icon-outline" d="M445 192 L443 190 L445 188" fill="none" />
    </g>
    <g id="arrow-up">
      <rect class="key" x="465" y="175" width="30" height="15" />
      <path class="icon-outline" d="M478 183 L480 181 L482 183" fill="none" />
    </g>
    <g id="arrow-down">
      <rect class="key" x="465" y="190" width="30" height="15" />
      <path class="icon-outline" d="M478 196 L480 198 L482 196" fill="none" />
    </g>
    <g id="arrow-right">
      <rect class="key" x="500" y="175" width="30" height="30" />
      <path class="icon-outline" d="M515 188 L517 190 L515 192" fill="none" />
    </g>
  </g> <!-- END keyboard key group -->
</svg>