now try to align that all database through grid somehow by using their distinct class names and IDs. outshow full in one html code.


```
        const svgCharacters = {
    A: `<svg class="svgAz" id="A"><text>A</text></svg>`,
    B: `<svg class="svgAz" id="B"><text>B</text></svg>`,
    C: `<svg class="svgAz" id="C"><text>C</text></svg>`,
    D: `<svg class="svgAz" id="D"><text>D</text></svg>`,
    E: `<svg class="svgAz" id="E"><text>E</text></svg>`,
    F: `<svg class="svgAz" id="F"><text>F</text></svg>`,
    G: `<svg class="svgAz" id="G"><text>G</text></svg>`,
    H: `<svg class="svgAz" id="H"><text>H</text></svg>`,
    I: `<svg class="svgAz" id="I"><text>I</text></svg>`,
    J: `<svg class="svgAz" id="J"><text>J</text></svg>`,
    K: `<svg class="svgAz" id="K"><text>K</text></svg>`,
    L: `<svg class="svgAz" id="L"><text>L</text></svg>`,
    M: `<svg class="svgAz" id="M"><text>M</text></svg>`,
    N: `<svg class="svgAz" id="N"><text>N</text></svg>`,
    O: `<svg class="svgAz" id="O"><text>O</text></svg>`,
    P: `<svg class="svgAz" id="P"><text>P</text></svg>`,
    Q: `<svg class="svgAz" id="Q"><text>Q</text></svg>`,
    R: `<svg class="svgAz" id="R"><text>R</text></svg>`,
    S: `<svg class="svgAz" id="S"><text>S</text></svg>`,
    T: `<svg class="svgAz" id="T"><text>T</text></svg>`,
    U: `<svg class="svgAz" id="U"><text>U</text></svg>`,
    V: `<svg class="svgAz" id="V"><text>V</text></svg>`,
    W: `<svg class="svgAz" id="W"><text>W</text></svg>`,
    X: `<svg class="svgAz" id="X"><text>X</text></svg>`,
    Y: `<svg class="svgAz" id="Y"><text>Y</text></svg>`,
    Z: `<svg class="svgAz" id="Z"><text>Z</text></svg>`,
    
    a: `<svg class="svgAz" id="a"><text>a</text></svg>`,
    b: `<svg class="svgAz" id="b"><text>b</text></svg>`,
    c: `<svg class="svgAz" id="c"><text>c</text></svg>`,
    d: `<svg class="svgAz" id="d"><text>d</text></svg>`,
    e: `<svg class="svgAz" id="e"><text>e</text></svg>`,
    f: `<svg class="svgAz" id="f"><text>f</text></svg>`,
    g: `<svg class="svgAz" id="g"><text>g</text></svg>`,
    h: `<svg class="svgAz" id="h"><text>h</text></svg>`,
    i: `<svg class="svgAz" id="i"><text>i</text></svg>`,
    j: `<svg class="svgAz" id="j"><text>j</text></svg>`,
    k: `<svg class="svgAz" id="k"><text>k</text></svg>`,
    l: `<svg class="svgAz" id="l"><text>l</text></svg>`,
    m: `<svg class="svgAz" id="m"><text>m</text></svg>`,
    n: `<svg class="svgAz" id="n"><text>n</text></svg>`,
    o: `<svg class="svgAz" id="o"><text>o</text></svg>`,
    p: `<svg class="svgAz" id="p"><text>p</text></svg>`,
    q: `<svg class="svgAz" id="q"><text>q</text></svg>`,
    r: `<svg class="svgAz" id="r"><text>r</text></svg>`,
    s: `<svg class="svgAz" id="s"><text>s</text></svg>`,
    t: `<svg class="svgAz" id="t"><text>t</text></svg>`,
    u: `<svg class="svgAz" id="u"><text>u</text></svg>`,
    v: `<svg class="svgAz" id="v"><text>v</text></svg>`,
    w: `<svg class="svgAz" id="w"><text>w</text></svg>`,
    x: `<svg class="svgAz" id="x"><text>x</text></svg>`,
    y: `<svg class="svgAz" id="y"><text>y</text></svg>`,
    z: `<svg class="svgAz" id="z"><text>z</text></svg>`,
    
    '0': `<svg class="svg09" id="0"><text>0</text></svg>`,
    '1': `<svg class="svg09" id="1"><text>1</text></svg>`,
    '2': `<svg class="svg09" id="2"><text>2</text></svg>`,
    '3': `<svg class="svg09" id="3"><text>3</text></svg>`,
    '4': `<svg class="svg09" id="4"><text>4</text></svg>`,
    '5': `<svg class="svg09" id="5"><text>5</text></svg>`,
    '6': `<svg class="svg09" id="6"><text>6</text></svg>`,
    '7': `<svg class="svg09" id="7"><text>7</text></svg>`,
    '8': `<svg class="svg09" id="8"><text>8</text></svg>`,
    '9': `<svg class="svg09" id="9"><text>9</text></svg>`,

```

you comprehend one thing: svg 18px text should be x=8 y=9