Skip to content

Instantly share code, notes, and snippets.

@jamesscottbrown
Last active November 30, 2017 18:40
Show Gist options
  • Save jamesscottbrown/9e49ee2f66e0fb8c7166123c3ba50570 to your computer and use it in GitHub Desktop.
Save jamesscottbrown/9e49ee2f66e0fb8c7166123c3ba50570 to your computer and use it in GitHub Desktop.
CSS styling of SVG glyphs

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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment