Drawing a symbol

renderSymbol

import {renderSymbol} from '@zaes/military-symbols';

const {svg, width, height, anchor, octagon, problems} = renderSymbol(code, options);

Field
svg	a complete <svg> element
width, height	its size in pixels, amplifiers included
anchor	the point placed on the map, in pixels from the top left
octagon	the bounding octagon's box, which amplifiers are placed around
problems	everything that could not be drawn as the code asks

Size

size is the bounding octagon's height in pixels (default 50). The standard sizes everything from that octagon (5.3.1): frames run one to one and a half times it, a main icon sits in its middle two fifths. An icon that looks small in its frame is at the standard's size.

enlargeIcons: true enlarges main icons into the room the octagon leaves when one or no modifiers are shown, as 5.3.1.2 allows.

Display options (Table XIV)

Option	Default
frame	true	draw the frame
fill	true	fill the frame with its identity's colour
icon	true	draw the icon
modifiers	true	the sector modifiers; off is the entity-type level display
fillOpacity	1	2525E 5.5 suggests 0.35 for a translucent fill

They combine as Table XIV's rows say: no frame with fill and icon is the icon alone in its identity's colour; no frame and no icon is the fill alone; nothing at all is a location dot.

Colour

Option
colorMode	Table XV's colour range: 'light' (default), 'medium' or 'dark'
unfilled	an unfilled symbol in its identity's Table XVI colour
monochrome	every line in this colour, no fill
frameColor, iconColor, fillColor	override one part's colour
lineWeight	scale every non-text stroke, for a house style
outlineWidth, outlineColor	a halo round the whole symbol, for contrast on a map
condition	operational condition as Table X's slashes ('slash') or Table XI's bars ('bar')
mineWarfare	Appendix H's coloured MEDAL icons ('medal') or the black alternative ('alternative')

SVG, canvas or a data URL

The same drawing, in whatever form the host needs:

import {drawSymbol, symbolCanvas, symbolDataUrl, symbolPngDataUrl} from '@zaes/military-symbols';

drawSymbol(ctx, code, {x: 120, y: 80, size: 40});   // onto any 2D context, its anchor at x, y
const {canvas} = symbolCanvas(code, {size: 40, pixelRatio: 2});   // a canvas just big enough
symbolDataUrl(code).url;                               // the SVG as a data: URL
symbolPngDataUrl(code).url;                            // a PNG, from a page canvas

drawSymbol draws the SVG element by element, with no image decoding, so it is synchronous and works on an OffscreenCanvas in a worker or a Node canvas.

For another library: the image provider

symbolImageProvider() answers {sidc, sizePx} with {src, sizePx}: an SVG data URL whose larger side is sizePx. It is the shape a library that asks for unit symbols, rather than drawing them, takes. It accepts the display options above, so the symbols match the rest of the map:

import {symbolImageProvider} from '@zaes/military-symbols';

const provider = symbolImageProvider({fillOpacity: 0.5});
provider({sidc: '130310000012110000000000000000', sizePx: 32});   // {src: 'data:image/svg+xml,...', sizePx: 32}