Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/spatialillusions/milsymbol/llms.txt

Use this file to discover all available pages before exploring further.

milsymbol makes it straightforward to go from a Symbol Identification Code (SIDC) to a rendered military unit symbol. This guide walks you through installing the library, creating your first symbol object, rendering it as SVG or Canvas output, and adding modifiers and style options to customize the result.
1

Install milsymbol

Install milsymbol from the npm registry using your preferred package manager.
npm install milsymbol
Alternatively, you can include it directly in an HTML page via the bundled browser script — see the Installation guide for the script tag and CDN options.
2

Import and create a symbol

Import milsymbol and call new ms.Symbol(sidc, options) to create a symbol object.
import ms from "milsymbol";

// Create a symbol for a friendly infantry platoon
const sym = new ms.Symbol("130310001412110000000000000000");
The first argument is the SIDC — a Symbol Identification Code that encodes the symbol’s affiliation, dimension, status, icon, echelon, and modifiers. milsymbol supports both the 30-character number-based format used by MIL-STD-2525D/E and APP-6 D/E (as above) and the 15-character letter-based format used by older standard versions (e.g. "SFG-UCI----D---"). The format is detected automatically.The second argument is an optional options object containing style settings and text modifiers. Options can also be applied later via sym.setOptions(options).
3

Render the symbol

Call .asSVG() to get an SVG string you can inject into the DOM, or .asCanvas() to get an HTMLCanvasElement ready to append to a page.
import ms from "milsymbol";

const sym = new ms.Symbol("130310001412110000000000000000");

// Get the symbol as an SVG string
const svgString = sym.asSVG();
document.getElementById("symbol-container").innerHTML = svgString;

// — or — get the symbol as an HTMLCanvasElement
const canvasElement = sym.asCanvas();
document.getElementById("symbol-container").appendChild(canvasElement);
Methods can be chained directly onto the constructor call for a more concise form:
import ms from "milsymbol";

// Chained: create and render in a single expression
const canvasElement = new ms.Symbol("130310001412110000000000000000").asCanvas();
.asSVG() returns a plain XML string. .asCanvas() returns an HTMLCanvasElement and requires a browser environment. In Node.js, use .asSVG() or the SVG DOM method .asDOM() instead.
4

Add options and text modifiers

Pass an options object as the second argument to control the symbol’s appearance and attach standard text modifier fields. Options can also be updated at any time with setOptions.
import ms from "milsymbol";

// Set size and add text modifier fields at creation time
const sym = new ms.Symbol("130310001412110000000000000000", {
  size: 35,
  uniqueDesignation: "1PLT",
  quantity: "12",
  direction: 45,           // degrees; adds a movement direction arrow
  higherFormation: "1-7IN",
});

document.getElementById("symbol-container").innerHTML = sym.asSVG();
Options can also be applied or updated after creation:
const sym = new ms.Symbol("130310001412110000000000000000");
sym.setOptions({ size: 35, uniqueDesignation: "1PLT" });
const canvasElement = sym.asCanvas();
Use sym.getAnchor() to get the { x, y } offset for correct placement on a map or canvas, and sym.getSize() to retrieve the rendered symbol’s { width, height } dimensions.

​
Full Working Example

The following example creates a symbol for a friendly infantry platoon using the MIL-STD-2525D/E number-based SIDC "130310001412110000000000000000". It sets a custom size, attaches a unique designation text modifier, and renders the result both as an SVG string and as a Canvas element. 
import ms from "milsymbol";

// Friendly infantry platoon with text modifiers and a direction arrow
const sym = new ms.Symbol("130310001412110000000000000000", {
  size: 35,
  uniqueDesignation: "1PLT",
  quantity: "39",
  direction: 90,
  higherFormation: "1-7IN",
});

// --- SVG output ---
const svgString = sym.asSVG();
// Inject into the page
document.getElementById("svg-output").innerHTML = svgString;

// --- Canvas output ---
const canvas = sym.asCanvas();
document.getElementById("canvas-output").appendChild(canvas);

// --- Placement helpers ---
const anchor = sym.getAnchor();       // { x: Number, y: Number }
const size   = sym.getSize();         // { width: Number, height: Number }

console.log("Anchor offset:", anchor);
console.log("Symbol size:",   size);
For a more complex symbol with additional modifier fields, here is a reproduction of the reference Figure 13 from MIL-STD-2525C: 
import ms from "milsymbol";

const svgString = new ms.Symbol("130315003611010300000000000000", {
  size: 35,
  quantity: "200",
  staffComments: "FOR REINFORCEMENTS",
  additionalInformation: "ADDED SUPPORT FOR JJ",
  direction: (750 * 360) / 6400,   // Convert mils to degrees
  type: "MACHINE GUN",
  dtg: "30140000ZSEP97",
  location: "0900000.0E570306.0N",
}).asSVG();

​
Next Steps

SIDC Codes

Learn how to read and construct letter-based and number-based SIDCs.

Symbol Options

Explore the complete set of style options: fill, frame, color modes, outlines, and more.

Text Modifiers

Reference all standard text modifier fields (unique designation, quantity, DTG, location, etc.).

Symbol Constructor API

Full API reference for ms.Symbol, including all methods and return types.

Build docs developers (and LLMs) love

Get started for freeTalk to us