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