CSS styling of SVG glyphs

gistfile1.md

As an example, the Insulator specification image could become:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:cc="http://creativecommons.org/ns#"
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 44.999998 44.999998"
        version="1.1"
        width="0.5in"
        height="0.5in"
>

    <path class="baseline" d="m -0.10593219,39.025419 45.23304619,0" />

    <rect class="bounding-box" width="33.474571" height="33.368641" x="5.7203383" y="5.8050842"/>

    <path class="inside" d="m 14.499997,30.499997 16,0 0,-16 -16,0 0,16 z" />

    <path class="outside" d="m 7.4999973,37.499997 29.9999997,0 0,-29.9999998 -29.9999997,0 0,29.9999998 z" />
</svg>

Something that looks like the specification image is produced by the CSS:

.baseline {
    fill: #cccccc;
    opacity: 1;
    fill-opacity: 1;
    stroke: #b3b3b3;
    stroke-width: 0.49999994;
    stroke-dasharray: 0.99999988, 0.49999994;
    stroke-opacity: 1;
}

.bounding-box{
    opacity:0.5;
    fill:none;
    fill-opacity:1;
    stroke:#999999;
    stroke-width:0.5;
    stroke-miterlimit:4;
    stroke-dasharray:1, 0.5;
    stroke-dashoffset:0;
    stroke-opacity:1"
}

.inside {
    fill: #b3b3b3;
    stroke:#000000;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round
}

.outside {
    fill:none;
    stroke:#000000;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

Something that looks like the glyph image is produced by:

.baseline {
    visibility: hidden;
}

.bounding-box{
    visibility: hidden;
}

.inside {
    fill: none;
    stroke:#000000;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round
}

.outside {
    fill:none;
    stroke:#000000;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

The color can be changed by updating the stoke something like:

.inside{
    fill: none;
    stroke: red;
}

.outside{
    stroke: red;
}

As long as class names are standardised, the same CSS could be applied to any glyph.

Diagrams could be constructed by combining the sections of SVG corresponding to each glyph (each in a separate group with it's own id):

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:cc="http://creativecommons.org/ns#"
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        width="1in"
        height="0.5in"
>    


<g id="glyph-1">
    <path class="baseline" d="m -0.10593219,39.025419 45.23304619,0" />    

    <rect class="bounding-box" width="33.474571" height="33.368641" x="5.7203383" y="5.8050842"/>    

    <path class="inside" d="m 14.499997,30.499997 16,0 0,-16 -16,0 0,16 z" />    

    <path class="outside" d="m 7.4999973,37.499997 29.9999997,0 0,-29.9999998 -29.9999997,0 0,29.9999998 z" />
</g>    

<g id="glyph-2" transform="translate(50,0)">
    <path class="baseline" d="m -0.10593219,39.025419 45.23304619,0" />    

    <rect class="bounding-box" width="33.474571" height="33.368641" x="5.7203383" y="5.8050842"/>    

    <path class="inside" d="m 14.499997,30.499997 16,0 0,-16 -16,0 0,16 z" />    

    <path class="outside" d="m 7.4999973,37.499997 29.9999997,0 0,-29.9999998 -29.9999997,0 0,29.9999998 z" />
</g>    


</svg>

CSS can then be used to change the styling of individual glyphs, e.g.:

#glyph-1  > .inside {
	stroke: blue;
}    

#glyph-1  > .outside {
	stroke: blue;
}    


#glyph-2  > .inside {
	stroke: green;
}    

#glyph-2  > .outside {
	stroke: green;
}