---
name: "vector graphics"
description: >-
  This mode is used to edit SVG.
  It has commands that are used to insert frequently used tags.
  If you edit SVG often,
  you will want to add more commands to this mode.
  See the
  <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction">Mozilla SVG introduction</a>.
initiallyActive: false
exclusive: false
commands:
  - name: "start vector graphics"
    description: >-
      Types &lt;svg&gt;.
    functions:
      - name: "type"
        fixedArguments:
          - '<svg version="1.1"'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - 'width="500" height="500"'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - 'xmlns="http://www.w3.org/2000/svg">'
  - name: "finish vector graphics"
    description: >-
      Types &lt;/svg&gt;.
    functions:
      - name: "type"
        fixedArguments:
          - '</svg>'
  - name: "insert rectangle"
    description: >-
      Types &lt;rect/&gt;.
    functions:
      - name: "type"
        fixedArguments:
          - '<!-- rx/y: radius of corners. colors: none, red, rgb(255,0,0), #FF0000 -->'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - '<rect x="10" y="10" width="100" height="100"'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - 'rx="10" ry="10"'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - 'fill="red"'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - 'stroke="black" stroke-width="2" />'
  - name: "insert circle"
    description: >-
      Types &lt;circle/&gt;.
    functions:
      - name: "type"
        fixedArguments:
          - '<!-- colors: none, red, rgb(255,0,0), #FF0000 -->'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - '<circle cx="100" cy="100" r="50"'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - 'fill="green"'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - 'stroke="black" stroke-width="2" />'
  - name: "insert ellipse"
    description: >-
      Types &lt;ellipse/&gt;.
    functions:
      - name: "type"
        fixedArguments:
          - '<!-- colors: none, red, rgb(255,0,0), #FF0000 -->'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - '<ellipse cx="200" cy="200" rx="50" ry="100"'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - 'fill="blue"'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - 'stroke="black" stroke-width="2" />'
  - name: "insert arc"
    description: >-
      Types &lt;path .../&gt;.
    functions:
      - name: "type"
        fixedArguments:
          - '<!-- https://www.nan.fyi/svg-paths/arcs -->'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - '<!-- M x y (start coordinates) -->'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - '<!-- A rx ry (ellipse radius) rotation (clockwise rotation from x axis in degrees) large-arc-flag (larger:1, smaller:0) sweep-flag (clockwise:1, counterclockwise:0) x y (finish coordinates) -->'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - '<path d="M 200 200 A 50 50 0 1 0 300 200"'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - 'fill="none"'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - 'stroke="yellow" stroke-width="2" />'
  - name: "insert text"
    description: >-
      Types &lt;text .../&gt;.
    functions:
      - name: "type"
        fixedArguments:
          - '<!-- anchor (horizontal): start, middle, end. dominant-baseline (vertical): middle, text-top, text-bottom -->'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - '<text x="250" y="250"'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - 'font-size="60"'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - 'text-anchor="middle" dominant-baseline="middle"'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - 'fill="pink">TEXT</text>'
  - name: "insert line"
    description: >-
      Types &lt;line .../&gt;.
    functions:
      - name: "type"
        fixedArguments:
          - '<!-- colors: red, rgb(255,0,0), #FF0000 -->'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - '<line x1="10" x2="50" y1="110" y2="150"'
      - name: "keyPress"
        fixedArguments:
          - "enter"
      - name: "type"
        fixedArguments:
          - 'stroke="purple" stroke-width="5" />'
