full octahedral group - SVG store

svg_string_store = """<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="860" height="1282" viewBox="-30 -30 860 1282">

    <defs>

        <marker id="backward" markerWidth="4" markerHeight="3" refX="3.9" refY="1.5" orient="auto">
            <polygon points="4 0, 0 1.5, 4 3" style="fill: red;"/>
        </marker>
        <marker id="foreward" markerWidth="4" markerHeight="3" refX=".1" refY="1.5" orient="auto">
            <polygon points="0 0, 4 1.5, 0 3" style="fill: red;"/>
        </marker>

        <path id="A" d="m 37.633197,882.03033 0,0.64698 -5.3833,0 0,-0.64698 1.855468,-0.32959 5.578614,-15.52734 2.319335,0 5.798339,15.52734 2.075196,0.32959 0,0.64698 -6.921387,0 0,-0.64698 2.197266,-0.32959 -1.623536,-4.72412 -6.445311,0 -1.647949,4.72412 2.197265,0.32959 z m 2.624512,-14.09912 -2.807617,7.94678 5.700682,0 -2.893065,-7.94678 z" />
        <path id="B" d="m 44.67055,870.1712 q 0,-0.72021 -0.219726,-1.25732 -0.20752,-0.53711 -0.683594,-0.89112 -0.476074,-0.36621 -1.23291,-0.53711 -0.756836,-0.1831 -1.855469,-0.1831 l -2.526856,0 0,6.18896 2.67334,0 q 1.135255,0 1.879883,-0.23193 0.74463,-0.24414 1.171875,-0.67139 0.439453,-0.43945 0.610352,-1.0498 0.183105,-0.61035 0.183105,-1.36719 z m 1.23291,7.73926 q 0,-0.85449 -0.280761,-1.47705 -0.268555,-0.62256 -0.854493,-1.02539 -0.57373,-0.41504 -1.489257,-0.61035 -0.915528,-0.20752 -2.197266,-0.20752 l -2.929688,0 0,6.88476 q 0.561524,0.0244 1.171875,0.0366 0.524903,0.0244 1.159668,0.0366 0.634766,0 1.257325,0 1.147461,0 1.940918,-0.25634 0.793457,-0.25635 1.281738,-0.72022 0.500488,-0.47607 0.720215,-1.14746 0.219726,-0.67139 0.219726,-1.51367 z m -12.207031,4.66309 0,-0.64698 2.099609,-0.32959 0,-14.42871 -2.099609,-0.31738 0,-0.64697 7.48291,0 q 1.721192,0 2.868653,0.26855 1.14746,0.25635 1.843261,0.75684 0.695801,0.50049 0.98877,1.2207 0.292969,0.70801 0.292969,1.59912 0,0.76904 -0.256348,1.40381 -0.244141,0.63477 -0.695801,1.12305 -0.439453,0.47607 -1.062012,0.80566 -0.622558,0.31738 -1.35498,0.47608 1.062012,0.10986 1.916504,0.42724 0.866699,0.31738 1.464844,0.83008 0.598144,0.50049 0.915527,1.19629 0.32959,0.6958 0.32959,1.55029 0,1.06201 -0.366211,1.95313 -0.354004,0.8789 -1.123047,1.51367 -0.769043,0.62256 -1.977539,0.97656 -1.208496,0.3418 -2.917481,0.3418 -1.367187,0 -2.722168,-0.0366 -1.35498,-0.0366 -2.502441,-0.0366 l -3.125,0 z" />
        <path id="C" d="m 42.351215,882.82379 q -2.001953,0 -3.576659,-0.56153 -1.5625,-0.56152 -2.648927,-1.62353 -1.074219,-1.062 -1.635742,-2.58789 -0.561523,-1.53809 -0.561523,-3.4668 0,-2.19727 0.561523,-3.80859 0.57373,-1.61132 1.647949,-2.66114 1.086426,-1.06201 2.661133,-1.5747 1.574707,-0.5127 3.601074,-0.5127 0.842285,0 1.586914,0.061 0.744629,0.0488 1.416016,0.13427 0.683594,0.0855 1.293945,0.19533 0.610352,0.10986 1.184082,0.23193 l 0.07324,3.57665 -0.805664,0 -0.366211,-2.12401 q -0.854492,-0.52491 -1.989746,-0.80567 -1.123046,-0.29297 -2.294921,-0.29297 -1.428223,0 -2.55127,0.39063 -1.11084,0.39062 -1.879883,1.28174 -0.769043,0.8789 -1.184082,2.33154 -0.402832,1.44043 -0.402832,3.55225 0,1.85546 0.402832,3.23486 0.402832,1.36719 1.159668,2.28271 0.756836,0.90332 1.843262,1.35497 1.098633,0.45166 2.490234,0.45166 0.756836,0 1.44043,-0.0976 0.695801,-0.0977 1.281738,-0.26856 0.598145,-0.17089 1.062012,-0.39062 0.476074,-0.23193 0.793457,-0.47608 l 0.45166,-2.4414 0.793457,0 -0.07324,3.84521 q -0.512695,0.14649 -1.171875,0.29297 -0.65918,0.13428 -1.403809,0.24414 -0.744629,0.10987 -1.5625,0.1709 -0.817871,0.061 -1.635742,0.061 z" />

    </defs>

    {rectangles}

    <!-- left formulas for the permutations -->
    <g transform="translate(124.5, 1030) scale(24, 24)">
        <rect x="0" y="0" width="3" height="8" fill="#{bottombeige}"/>
        <rect x="0" y="1" width="3" height="2" fill="#{topbeige}"/>
        <rect x="0" y="4" width="3" height="1" fill="#{topbeige}"/>
        <rect x="0" y="7" width="3" height="1" fill="#{topbeige}"/>
        <g stroke="#999" stroke-width="3">
            <path stroke-dasharray=".03, .97" d="M1.5,0v9"/>
            <path stroke-dasharray=".1, 3.9" d="M1.5,-.05v9"/>
        </g>
        <rect x="0" y="0" width="3" height="8" stroke="#999" stroke-width=".1" fill="none"/>
    </g>
    <g transform="translate(51, 1008)">
        {pf}
    </g>


    <!-- small indices over the left matrix of permutations -->
    <g font-size="8px" transform="translate(222.5, 1018)">
        <text x="0" y="0">0</text><text x="15" y="0">1</text><text x="30" y="0">2</text><text x="45" y="0">3</text><text x="67" y="0">4</text><text x="82" y="0">5</text><text x="97" y="0">6</text><text x="112" y="0">7</text>
    </g>

    <!-- left matrix of permutations -->
    <g style="text-anchor: middle;" font-family="sans-serif" font-size="16px" transform="translate(225, 1048)">
        {pm}
    </g>

    <!-- right formulas for the inverse permutations -->
    <g transform="translate(402, 1030) scale(24, 24)">
        <rect x="0" y="0" width="3" height="8" fill="#{bottombeige}"/>
        <rect x="0" y="1" width="3" height="2" fill="#{topbeige}"/>
        <rect x="0" y="4" width="3" height="1" fill="#{topbeige}"/>
        <rect x="0" y="7" width="3" height="1" fill="#{topbeige}"/>
        <g stroke="#999" stroke-width="3">
            <path stroke-dasharray=".03, .97" d="M1.5,0v9"/>
            <path stroke-dasharray=".1, 3.9" d="M1.5,-.05v9"/>
        </g>
        <rect x="0" y="0" width="3" height="8" stroke="#999" stroke-width=".1" fill="none"/>
    </g>
    <g transform="translate(328.5, 1008)">
        {ipf}
    </g>

    <!-- right matrix of inverse permutations -->
    <g transform="translate(500, 1030) scale(24, 24)">
        <path fill="#ddd" d="m0,0h8v8H0"/>
        <path fill="#888" d="M1,0h2v1h-2M4,0h1v1h-1M7,0h1v1h-1M0,1h1v2h-1M3,1h1v2h-1M5,1h2v2h-2M1,3h2v1h-2M4,3h1v1h-1M7,3h1v1h-1M0,4h1v1h-1M3,4h1v1h-1M5,4h2v1h-2M1,5h2v2h-2M4,5h1v2h-1M7,5h1v2h-1M0,7h1v1h-1M3,7h1v1h-1M5,7h2v1h-2"/>
        <rect x="0" y="0" width="8" height="8" stroke="black" stroke-width=".1" fill="none"/>
        <g stroke="black" stroke-width="8">
            <path stroke-dasharray=".03, .97" d="M0,4h9M4,0v9"/>
            <path stroke-dasharray=".1, 3.9" d="M-.05,4h9M4,-.05v9"/>
        </g>
    </g>
    <g style="text-anchor: middle;" font-family="sans-serif" font-size="16px" transform="translate(512, 1048)">
        {ipm}
    </g>

</svg>"""


formula_svg_store = """<g>
    <g transform="translate(68, -830)">
        {letters}
    </g>
    {negators}
</g>"""


rectangle_svg_store = """<!-- RECTANGLE  -->
<g transform="translate({rectx}, {recty})">

    <!-- background rectangle -->
    <rect width="200" height="400" style="fill: #{beige}; stroke: #999; stroke-width:1.5;" />


    <!-- binary matrix of the permutation -->
    <g transform="translate(10, 126) scale(8, 8)">
        <path fill="white" d="m0,0h8v3H0"/>
        <path fill="red" d="{pmat}"/>
        <rect x="0" y="0" width="8" height="3" stroke="black" stroke-width=".1" fill="none"/>
        <path stroke-dasharray=".03, .97" d="M4,0v3" stroke="black" stroke-width="8"/>
        <g stroke="black" stroke-width="3">
            <path stroke-dasharray=".03, .97" d="M0,1.5h8"/>
            <path stroke-dasharray=".1, 3.9" d="M-.05,1.5h8"/>
        </g>
    </g>

    <!-- binary matrix of the inverse permutation -->
    <g transform="translate(10, 286) scale(8, 8)">
        <path fill="white" d="m0,0h8v3H0"/>
        <path fill="red" d="{ipmat}"/>
        <rect x="0" y="0" width="8" height="3" stroke="black" stroke-width=".1" fill="none"/>
        <path stroke-dasharray=".03, .97" d="M4,0v3" stroke="black" stroke-width="8"/>
        <g stroke="black" stroke-width="3">
            <path stroke-dasharray=".03, .97" d="M0,1.5h8"/>
            <path stroke-dasharray=".1, 3.9" d="M-.05,1.5h8"/>
        </g>
    </g>


    <!-- arrow cube -->
    <g transform="translate(85, 63) scale(38, 38)">
        <g style="stroke: black; stroke-width:.01px;">
            <line x1="0" y1="3" x2="0" y2="1"/><line x1="0.6" y1="2.2" x2="0.6" y2="0.2"/><line x1="2" y1="3" x2="2" y2="1"/><line x1="2.6" y1="2.2" x2="2.6" y2="0.2"/><line x1="0" y1="3" x2="0.6" y2="2.2"/><line x1="0" y1="1" x2="0.6" y2="0.2"/><line x1="2" y1="3" x2="2.6" y2="2.2"/><line x1="2" y1="1" x2="2.6" y2="0.2"/><line x1="0" y1="3" x2="2" y2="3"/><line x1="0" y1="1" x2="2" y2="1"/><line x1="0.6" y1="2.2" x2="2.6" y2="2.2"/><line x1="0.6" y1="0.2" x2="2.6" y2="0.2"/>
        </g>
        <g style="stroke: red; stroke-width: .09px;">
            {arrows}
        </g>
        <g style="fill: black;">
            <circle cx="0" cy="3" r=".08"/><circle cx="0" cy="1" r=".08"/><circle cx="0.6" cy="2.2" r=".08"/><circle cx="0.6" cy="0.2" r=".08"/><circle cx="2" cy="3" r=".08"/><circle cx="2" cy="1" r=".08"/><circle cx="2.6" cy="2.2" r=".08"/><circle cx="2.6" cy="0.2" r=".08"/>
        </g>
    </g>


    <!-- number cube -->
    <g style="stroke:#000; stroke-width:.03px;" transform="translate(90, 238) scale(30, 30)">
        <g>
            <line x1="0" y1="3" x2="0" y2="1"/><line x1="1" y1="2" x2="1" y2="0"/><line x1="2" y1="3" x2="2" y2="1"/><line x1="3" y1="2" x2="3" y2="0"/><line x1="0" y1="3" x2="1" y2="2"/><line x1="0" y1="1" x2="1" y2="0"/><line x1="2" y1="3" x2="3" y2="2"/><line x1="2" y1="1" x2="3" y2="0"/><line x1="0" y1="3" x2="2" y2="3"/><line x1="0" y1="1" x2="2" y2="1"/><line x1="1" y1="2" x2="3" y2="2"/><line x1="1" y1="0" x2="3" y2="0"/>
        </g>
        <g style="fill: #{bottomgray}">
            <circle cx="0" cy="3" r=".4"/><circle cx="1" cy="0" r=".4"/><circle cx="2" cy="1" r=".4"/><circle cx="3" cy="2" r=".4"/>
        </g>
        <g style="fill: #{topgray}">
            <circle cx="0" cy="1" r=".4"/><circle cx="1" cy="2" r=".4"/><circle cx="2" cy="3" r=".4"/><circle cx="3" cy="0" r=".4"/>
        </g>
    </g>


    <!-- text -->
    <g style="text-anchor: middle;" font-family="sans-serif">

        <!-- small indices of the permutation -->
        <g font-size="8px" transform="translate(71, 22)">
            <text x="0" y="0">0</text><text x="15" y="0">1</text><text x="30" y="0">2</text><text x="45" y="0">3</text><text x="67" y="0">4</text><text x="82" y="0">5</text><text x="97" y="0">6</text><text x="112" y="0">7</text>
        </g>

        <!-- horizontal permutation -->
        <g font-size="16px" transform="translate(71, 42)">
            {pvect}
        </g>

        <!-- horizontal inverse permutation -->
        <g transform="translate(4, 359) scale(24)">
            <rect x="0" y="0" width="8" height="1" fill="#{bottomgray}"/>
            <rect x="1" y="0" width="2" height="1" fill="#{topgray}"/>
            <rect x="4" y="0" width="1" height="1" fill="#{topgray}"/>
            <rect x="7" y="0" width="1" height="1" fill="#{topgray}"/>
            <g stroke="black" stroke-width="1">
                <path stroke-dasharray=".03, .97" d="M0,.5h9"/>
                <path stroke-dasharray=".1, 3.9" d="M-.05,.5h9"/>
            </g>
            <rect x="0" y="0" width="8" height="1" stroke="black" stroke-width=".1" fill="none"/>
        </g>
        <g font-size="16px" transform="translate(16, 377)">
            {ipvect}
        </g>

        <!-- indices of the arrow cube -->
        <g font-size="10px" transform="translate(91, 190)">
            <text x="0" y="0">0</text>
            <text x="0" y="-76">1</text>
            <text x="76" y="0">4</text>
            <text x="76" y="-76">5</text>
            <g transform="translate(23.5, -31)">
                <text x="0" y="0">2</text>
                <text x="0" y="-76">3</text>
                <text x="76" y="0">6</text>
                <text x="76" y="-76">7</text>
            </g>
        </g>

        <!-- permuted cube numbers -->
        <g font-size="16px" transform="translate(90, 244)">
            {cubenums}
        </g>

    </g>

    <!-- formula for the permutation -->
    <g transform="translate(-39, 47) scale(.6)">
        {pform}
    </g>

    <!-- formula for the inverse permutation -->
    <g transform="translate(-90, 191)">
        {ipform}
    </g>

    <!-- circle with permutation ID -->
    <g transform="translate(34, 29)">
        {idcircle}
    </g>

</g>"""