Scalable Vector Graphics are used to create countersheets and maps

Graphics

The first step is to create the SVG text as the source for the image data with a <svg> element. This element will have a <g> element to define a graphic with a <rect>;

svgText += "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='" + scale + "' height='" + scale + "'>";
svgText += "<g transform='scale(0." + scale + ")'>";
svgText += '<rect x="0" y="0" width="100" height="100" style="fill:white;stroke:black" />';
svgText += "</svg>";

scale:

The second step is to add a fill color for the unit force by setting the fillColor and strokeColor.


svgText += '<rect x="0" y="0" width="100" height="100" style="fill:' + fillColor + ';stroke:' + strokeColor + ';stroke-width:' + strokeWidth + ';opacity:' + strokeOpacity + '" />';

The third step is to add a drawing template for the unit type.

svgText += '<rect x="0" y="0" width="100" height="100" style="fill:' + fillColor + ';stroke:' + strokeColor + ';stroke-width:' + strokeWidth + ';opacity:' + strokeOpacity + '" />'; function getUnitTypetemplate(unitType) {
var template = '<g id="blank"></g>';
if ( unitType == 'Infantry' ) {
template = '<line x1="25" y1="32" x2="60" y2="32" style="stroke:black;stroke-width:1;" /><line x1="25" y1="60" x2="60" y2="60" style="stroke:black;stroke-width:1;" /><line x1="25" y1="32" x2="25" y2="60" style="stroke:black;stroke-width:1;" /><line x1="60" y1="32" x2="60" y2="60" style="stroke:black;stroke-width:1;" /><line x1="25" y1="32" x2="60" y2="60" style="stroke:black;stroke-width:1;" /><line x1="25" y1="60" x2="60" y2="32" style="stroke:black;stroke-width:1;" />';
}
if ( unitType == 'Cavalry' ) {
template = '<line x1="25" y1="32" x2="60" y2="32" style="stroke:black;stroke-width:1;" /><line x1="25" y1="60" x2="60" y2="60" style="stroke:black;stroke-width:1;" /><line x1="25" y1="32" x2="25" y2="60" style="stroke:black;stroke-width:1;" /><line x1="60" y1="32" x2="60" y2="60" style="stroke:black;stroke-width:1;" /><line x1="25" y1="60" x2="60" y2="32" style="stroke:black;stroke-width:1;" />';
}
if ( unitType == 'Armor' ) {
template = '<line x1="25" y1="32" x2="60" y2="32" style="stroke:black;stroke-width:1;" /><line x1="25" y1="60" x2="60" y2="60" style="stroke:black;stroke-width:1;" /><line x1="25" y1="32" x2="25" y2="60" style="stroke:black;stroke-width:1;" /><line x1="60" y1="32" x2="60" y2="60" style="stroke:black;stroke-width:1;" /><path d="M 35,40 C 26,40 26,52 35,52" stroke="black" stroke-width="1" fill="none" /><path d="M 50,40 C 59,40 59,52 50,52" stroke="black" stroke-width="1" fill="none" /><line x1="35" y1="40" x2="50" y2="40" style="stroke:black;stroke-width:1;" /><line x1="35" y1="52" x2="50" y2="52" style="stroke:black;stroke-width:1;" />';
}
if ( unitType == 'Artillery' ) {
template = '<line x1="25" y1="32" x2="60" y2="32" style="stroke:black;stroke-width:1;" /><line x1="25" y1="60" x2="60" y2="60" style="stroke:black;stroke-width:1;" /><line x1="25" y1="32" x2="25" y2="60" style="stroke:black;stroke-width:1;" /><line x1="60" y1="32" x2="60" y2="60" style="stroke:black;stroke-width:1;" />><circle cx="42" cy="45" r="5" style="stroke:black;fill:black;stroke-width:1;" />';
}
return template;
}

type:

The fourth step is to add a strength and movement values, display name and unit size.


svgText += '<text x="42" y="30" fill="black" text-anchor="middle" style="font-family: Arial; font-size: 18;font-weight: normal;">XX</text>';
svgText += '<text x="43" y="90" fill="black" text-anchor="middle" style="font-family: Arial; font-size: 36;font-weight: bold;">';
svgText += unitStrength.toString();
svgText += '-';
svgText += unitMaxMove.toString();
svgText += '</text>';
svgText += '<text x="80" y="42" fill="black" text-anchor="middle" style="font-family: Arial; font-size: 22;font-weight: normal;" transform="rotate(270 80,42)">'
svgText += displayName;
svgText += '</text>';

 

strength: movement: