If I have an svg file that is not an image, but a collection of definitions, can I refer to it as an external file?

I have a long list of paths that define the shapes for characters. 128 paths, more or less. The paths are defined in a <defs> list, and are referred to later, using a <use> element.

I would like to move the definition of paths to a separate file, in the spirit of moving our <style></style> section to a separate file using <link rel="stylesheet" href="mystyles.css">. Is such a thing possible with an svg file?

Note it’s not an image. Using <img src=...> doesn’t seem appropriate.

. . . 
    <svg xmlns="http://www.w3.org/2000/svg">
        <defs>
            <!-- capital_A -->
            <g id="ascii41" fill-rule="nonzero" transform="translate(0.25,2.90)">
                <path
                    d="M 6.144 10.112 L 3.744 2.832 L 1.328 10.112 L 0 10.112 L 3.568 0 L 3.952 0 L 7.52 10.112 L 6.144 10.112 Z M 5.248 6.384 L 5.52 7.392 L 1.808 7.392 L 2.048 6.384 L 5.248 6.384 Z" />
            </g>
            <!-- capital_B -->
            <g id="ascii42" fill-rule="evenodd" transform="translate(0.70,3.00)">
                <path
                    d="M 2.896 9.968 L 0 9.968 L 0 0 L 2.912 0 Q 3.776 0 4.416 0.176 A 3.608 3.608 0 0 1 4.933 0.359 Q 5.238 0.496 5.472 0.68 A 2.133 2.133 0 0 1 5.925 1.162 A 1.937 1.937 0 0 1 6.088 1.456 . . . Z" />
            </g>
            <!-- capital_C -->
            <g id="ascii43" fill-rule="evenodd" transform="translate(0.60,2.95)">
                <path
                    d="M 6.96 1.952 L 5.936 2.544 L 5.792 2.608 L 5.744 2.496 Q 5.776 2.368 5.728 2.256 Q 5.68 2.144 5.552 1.92 A 3.009 3.009 0 0 0 5.285 1.617 Q 5.028 1.364 4.76 1.248 Q 4.352 1.072 3.904 1.072 . . . Z" />
            </g>
            . . . 
        </defs>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg">
        <g id="group-of-uses">
        </g>
    </svg>

    <script>
. . . 
                //     Insert the new character. 
                let use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
                use.setAttribute('href', `#ascii${asciiCode.toString(16)}`);
                groupOfUses.insertBefore(use, currentUse);
. . .

You need to sign in to view this answers

Related Post