SVG Shield Construction

Documentation | Other Specifications | SVG Shield Construction

A SVG Shield is generally a normal SVG with an additional element defining label placement. Let's take a look how LIBSVG:shield:AUAlphanumeric is constructed:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 46">
    <rect width="64" height="46" rx="4.67" style="fill:#195f35"/>
    <rect id="LABEL" x="3" y="3" width="58" height="40" style="fill:none;stroke:red;stroke-miterlimit:10"/>
</svg>

The critical part is to define rect with id=“LABEL which will be used as a text place holder:

    <rect id="LABEL" x="3" y="3" width="58" height="40" style="fill:none;stroke:red;stroke-miterlimit:10"/>

Upon displaying this SVG in the SVG Editor or a web browser, the symbol looks like this:

However, the DK makes <rect id=“LABEL” … /> invisible. so the shield looks like this:

After applying label text, the final effect is:

The importance of label placement is more obvious on LIBSVG:shield:USInterstate shield: