Drawing diagrams with SVG

I've figured out how to do large large curly brackets, like these in Thomas Sheehan's "Astonishing! Things Make Sense!" (P. 14):

I don't want to use bitmaps, like the picture above, because they don't scale, they're relatively large downloads, and their text isn't searchable. Today I figured out how to draw the curly brackets using SVG (Scalable Vector Graphics) to draw lines. A curly-bracket is two lines and four quarter circles.

Here's what it looks like in an HTML document. It won't render inside a blogspot blog, so you'll have to click there to see.

This is the code that renders the diagram.

    <svg height="700" width="800">
        <path d="M 200 260 a 7 7 0 0 1 7 -7" fill="none" stroke-width="2" stroke="black">
        <path d="M 200 260 l 0 143" stroke-width="2" stroke="black">
        <path d="M 200 403 a 7 7 0 0 1 -7 7" fill="none" stroke-width="2" stroke="black">
        <path d="M 200 417 a 7 7 0 0 0 -7 -7" fill="none" stroke-width="2" stroke="black">
        <path d="M 200 417 l 0 143" stroke-width="2" stroke="black">
        <path d="M 200 560 a 7 7 0 0 0 7 7" fill="none" stroke-width="2" stroke="black">

        <path d="M 420 160 a 7 7 0 0 1 7 -7" fill="none" stroke-width="2" stroke="black">
        <path d="M 420 160 l 0 93" stroke-width="2" stroke="black">
        <path d="M 420 253 a 7 7 0 0 1 -7 7" fill="none" stroke-width="2" stroke="black">
        <path d="M 420 267 a 7 7 0 0 0 -7 -7" fill="none" stroke-width="2" stroke="black">
        <path d="M 420 267 l 0 93" stroke-width="2" stroke="black">
        <path d="M 420 360 a 7 7 0 0 0 7 7" fill="none" stroke-width="2" stroke="black">

        <path d="M 560 95 a 7 7 0 0 1 7 -7" fill="none" stroke-width="2" stroke="black">
        <path d="M 560 95 l 0 43" stroke-width="2" stroke="black">
        <path d="M 560 138 a 7 7 0 0 1 -7 7" fill="none" stroke-width="2" stroke="black">
        <path d="M 560 152 a 7 7 0 0 0 -7 -7" fill="none" stroke-width="2" stroke="black">
        <path d="M 560 152 l 0 43" stroke-width="2" stroke="black">
        <path d="M 560 195 a 7 7 0 0 0 7 7" fill="none" stroke-width="2" stroke="black">

        <path d="M 560 315 a 7 7 0 0 1 7 -7" fill="none" stroke-width="2" stroke="black">
        <path d="M 560 315 l 0 43" stroke-width="2" stroke="black">
        <path d="M 560 358 a 7 7 0 0 1 -7 7" fill="none" stroke-width="2" stroke="black">
        <path d="M 560 372 a 7 7 0 0 0 -7 -7" fill="none" stroke-width="2" stroke="black">
        <path d="M 560 372 l 0 43" stroke-width="2" stroke="black">
        <path d="M 560 415 a 7 7 0 0 0 7 7" fill="none" stroke-width="2" stroke="black">
        <g fill="black" font-size="14" font="Helvetica, sans-serif" stroke="none">
            <text x="70" y="390">EVERY λόγος =</text>
            <text x="70" y="410">σημαντιχός</text>
            <text x="70" y="430">A MEANINGFUL</text>
            <text x="70" y="450">UTTERANCE</text>

            <text x="220" y="240">λόγος ἀποφαντιχός</text>
            <text x="220" y="260">DECLARATIVE SENTENCE</text>
            <text x="220" y="280">I DECLARE P OF S</text>

            <text x="220" y="560">λόγος ἀναποφαντιχός</text>
            <text x="220" y="580">NON-DECLARATIVE SENTENCE</text>
            <text x="220" y="600">I WISH, HOPE, ASK, OR</text>
            <text x="220" y="620">COMMAND SOMETHING</text>

            <text x="450" y="140">AFFIRMATIVE</text>
            <text x="450" y="160">χατάφασις</text>

            <text x="450" y="360">NEGATIVE</text>
            <text x="450" y="380">ἀπόφασις</text>

            <text x="580" y="85">TRUE</text>
            <text x="580" y="105">ἀληθής</text>

            <text x="580" y="205">FALSE</text>
            <text x="580" y="225">ψευδής</text>

            <text x="580" y="305">TRUE</text>
            <text x="580" y="325">ἀληθής</text>

            <text x="580" y="425">FALSE</text>
            <text x="580" y="445">ψευδής</text>
        </g>
    </svg>