Bliss SVG Builder

Appearance

Color & Stroke ​

Color ​

Set the stroke color with the color option (default: black, #000000). The option accepts any CSS color value: hex codes (#dc2626, #f00), named colors (red, tomato), rgb(), and rgba().

Red stroke
Input:
[color=#dc2626]||B313

Per-Character Color ​

Color can be applied at any scope. When set on individual characters within a sentence, it draws attention to specific parts:

One word highlighted
Input:
[color=gray]||B313/B431//[color=#dc2626]|B431;B81//B313

This is useful in teaching materials where you want to focus on a particular word while keeping the rest neutral.

Stroke Width ​

Control line thickness with stroke-width (default 0.5, range 0.1 to 1.5):

Thin: 0.3
Input:
[stroke-width=0.3]||B313
Default: 0.5
Input:
[stroke-width=0.5]||B313
Thick: 1.0
Input:
[stroke-width=1]||B313

Thicker strokes improve visibility at small sizes or on low-contrast displays. Thinner strokes feel lighter and work well at larger sizes. The default 0.5 is a balance for typical use.

For AAC communication boards viewed at arm's length, consider stroke-width=0.8 or higher. For decorative or large-format display, 0.3 may be enough.

Dot Sizing ​

Bliss uses two dot sizes: DOT (full size) and SDOT (small dot). COMMA is built from the DOT family and scales with it. By default the small dot is half the extra width of the full dot, so the two stay visually distinct.

DOT (left) and SDOT (right) at default sizes
Input:
[grid]||DOT:2,10;SDOT:6,10

Dot size is controlled separately from the line stroke-width, with two relative options and two absolute ones.

Relative sizing ​

dot-extra-width sets how much wider a dot is than the line stroke (rendered diameter = stroke-width + value, range 0 to 1). It is a bulk knob: it sizes the full DOT, and the small SDOT follows at half the value, preserving the size relationship.

dot-extra-width=1: DOT grows, SDOT follows at half
Input:
[grid;dot-extra-width=1]||DOT:2,10;SDOT:6,10

To size the small dot on its own, use sdot-extra-width, which overrides the half-default:

sdot-extra-width=0.8: a larger small dot
Input:
[grid;sdot-extra-width=0.8]||SDOT:4,10

Absolute sizing ​

dot-width and sdot-width pin a dot's rendered diameter directly (range 0 to 1.5), independent of stroke-width. This is useful when you need predictable dot metrics regardless of line weight.

dot-width=1.5: absolute diameter
Input:
[grid;dot-width=1.5]||DOT:4,10

When both an absolute and a relative option apply to the same dot, absolute wins (dot-width over dot-extra-width, sdot-width over sdot-extra-width).

Indicator and custom dots ​

Indicators that carry a dot render it at the small SDOT size, so it reads as a fine diacritic rather than an oversized mark, while structural dots inside a glyph keep their full size.

You can register a custom dot size through custom codes, but a custom dot is a new drawing primitive, so it does not serialize portably: toString() emits the bare code name, which only renders in a builder that has the same definition. This matches every custom drawing primitive, not just dots.

Scoping ​

Visual options (color, stroke-width, and the dot-sizing options) can be applied at any scope: global, word, character, or part. Layout options (grid, margin, crop, etc.) are global-only. See the Options System for how scoping and cascade work.

Beyond the named options above, you can pass through arbitrary SVG attributes, inline CSS styles, classes, and IDs. See SVG Pass-Through Attributes for details.

Options Reference ​

See Options Quick Reference for defaults, value ranges, and the complete option list.