Bliss SVG Builder

Appearance

Positioning ​

Control where elements appear within your Bliss compositions.

Coordinate Syntax ​

Position shapes using :x,y after the code:

DOT at (0,0)
Input:
[grid]||DOT:0,0
DOT at (4,8)
Input:
[grid]||DOT:4,8
DOT at (8,16)
Input:
[grid]||DOT:8,16

Coordinates are in grid units. See Grid Basics for coordinate system details.

Coordinate Variations ​

CODE        → x=0, y=0 (both default)
CODE:x,y    → explicit position
CODE:x      → y defaults to 0
CODE:,y     → x defaults to 0
C8 (defaults to 0,0)
Input:
[grid]||C8
C8:4,8 (explicit)
Input:
[grid]||C8:4,8

Shape Box vs Character Box ​

Every element has a bounding box. For shapes, the box tightly wraps the ink. A shape placed at :x,y has its ink starting exactly at that position:

Shape box: ink fills the entire box
Input:
[grid]||H:0,8

Characters work differently. Every character occupies a 20-unit tall box, with the ink sitting at a specific position within it. Most character content appears between y=8 and y=16, while indicator ink sits around y=4. The space above and below the ink is not empty padding; it's part of the character's coordinate space, reserved for indicators and descenders:

Character box: spans the full 20 units
Input:
[grid]||B313

When you position a character with :x,y, you're positioning the entire character box, not just the ink. Shapes have their ink at the top of the box, so :x,y places the ink exactly where you'd expect. Characters have their ink offset within the box, so the visible result is shifted accordingly.

Indicator Positioning ​

Indicators (like B81 for action) position themselves automatically:

Base character
Input:
[grid]||B431
With indicator (auto-positioned)
Input:
[grid]||B431;B81

Each glyph has an anchor point defined in its glyph data. The indicator attaches to this anchor point, which defaults to the top-center of the character but can be offset horizontally or vertically per glyph, so indicators aren't always mathematically centered:

Heart, centered anchor
Input:
[grid]||B313;B81
Vertical offset, indicator sits higher
Input:
[grid]||B355;B86
Both offsets, shifted left and up
Input:
[grid]||B419;B81

Manual Indicator Positioning ​

Override anchor-based positioning with explicit coordinates. Since indicators are characters, :x,y positions the entire 20-unit character box. The indicator's ink sits at y=4 within its box, so placing the box at a given y-position shifts the ink accordingly:

Anchor-positioned
Input:
[grid]||B431;B81
B81:2,2 (box at y=2, ink appears at y=6)
Input:
[grid]||B431;B81:2,2

Use manual positioning when:

  • The anchor point doesn't produce the desired result
  • You want non-standard indicator placement
  • Creating custom compound characters

Combining Positioned Elements ​

Build complex characters by positioning multiple elements:

Circle + centered dot
Input:
[grid]||C8:0,8;DOT:4,12
Cross from lines
Input:
[grid]||VL8:4,8;HL8:0,12
Nested circles
Input:
[grid]||C8:0,8;C4:2,10;C2:3,11

Each element is positioned independently. Use the grid to visualize alignment.

Positioning in Compound Characters ​

Compound characters use positioning to combine base characters:

B1103 (understanding)
Input:
[grid]||B1103

The definition B335;B412:4,0 shows:

  • B335 at default position (forward)
  • B412:4,0 shifted right by 4 units (knowledge)

Understanding these compositions helps when creating custom compounds.

Alignment Tips ​

Centering Elements ​

Narrow glyphs can be given a minimum width with min-width, and centered within that width using center:

4-unit circle, no min-width
Input:
[grid]||C4:0,10
min-width=8 (default, space added to the right)
Input:
[grid;min-width=8]||C4:0,10
min-width=8, center (centered)
Input:
[grid;min-width=8;center]||C4:0,10

Vertical Alignment ​

Character content typically occupies y=8 to y=16:

  • y=8 is the "sky line" (top of content)
  • y=16 is the "earth line" (bottom of content)
  • y=12 is vertically centered
Sky (8), center (12), earth (16)
Input:
[grid]||HL8:0,8;HL8:0,12;HL8:0,16

Position via Options ​

As an alternative to :x,y suffix syntax, you can set position using options:

[x=3;y=4]>H       (equivalent to H:3,4)

This is useful when combining position with other part-level options like color:

Positioned via options
Input:
[grid]||C8:0,8;[color=red;x=2;y=10]>DOT

Zero-Sized Anchor (ZSA) ​

ZSA is an invisible element that occupies no space, but occupies a position respected by auto-cropping behavior.

ZSA prevents cropping from the top-right
Input:
[grid;crop=auto]||ZSA:12,0;C4:4,10