Skip to content

Deliberation Log: Visual Identity, Emblem Logo & Optimization

  • Date: October 2026
  • Participants: Project Initiator, AI Sparring Partner

1. Context & Motivation

Following the establishment of the documentation portal design system (ADR-0004), Swayrm lacked a dedicated graphic emblem. The initiator provided the project's foundational emblem artwork: a circular motif featuring four hands in distinct colors (yellow, red, blue, cyan/teal) gently supporting a transparent glass orb, inside of which is an intricate graph network with interconnected colorful nodes and a central white nexus.

2. Technical Challenge: Large Export Size & Optimization

  • Initial Asset State: The initial SVG exported from GIMP was 2.3 MB. Inspection revealed that GIMP had embedded a 1436×1439 uncompressed raster PNG as a base64 data URI within the <image> tag, with physical dimensions (width="19.9444in").
  • Performance Impact: Serving a 2.3 MB SVG in the sticky navigation header on every page load would cause severe network latency, high data usage on mobile devices, and git repository bloat.
  • Vector Tracing vs. Raster Optimization:
  • Vector Tracing: The artwork contains fine details, soft gradients, hand-drawn shading, translucent glass reflections, and subtle light refraction. Converting this to pure SVG Bézier paths via auto-tracing creates thousands of jagged geometric polygons, inflating path complexity without achieving the visual nuance of the original illustration.
  • Palette Quantization & High-DPI Optimization: Resizing to a crisp 512×512 master with 8-bit palette quantization and maximum zlib compression reduces the asset from 2.3 MB to ~76 KB (~101 KB in SVG base64 wrapper) with imperceptible loss of visual detail, achieving a >95% reduction in file size.

3. Integration & Implementation

  • Favicon: Generated a dedicated 64×64 PNG (docs/assets/images/favicon.png, ~3.9 KB) for browser tabs.
  • Header & Drawer Logo: Configured theme.logo: assets/images/logo.svg and theme.favicon: assets/images/favicon.png in mkdocs.yml.
  • Hero Banner Integration: Embedded the emblem in docs/index.md inside .swayrm-hero accompanied by CSS elevation drop-shadow and smooth hover interactions (docs/stylesheets/extra.css).
  • Formalization: Codified in ADR-0005.