FOIT-Free Vector Branding & DT-1 SVG Path Compilation

Embedding <text> nodes with external @font-face rules inside standalone SVG favicons triggers Flash of Invisible Text (FOIT) and broken fallback glyphs in sandboxed browser contexts [And18] [DML18]. Compiling brand monograms and our DT-1 H-Bridge emblem into self-contained vector primitives at build time guarantees deterministic rendering across tabs, PWA icons, and email headers [BC15].

Why Do SVG Text Nodes Cause FOIT in Favicons and Sandboxed Contexts?

When browsers load an SVG via <link rel="icon"> or <img>, strict security sandboxes block external network requests, preventing @font-face rules from fetching remote WOFF2 files [And18] [DML18]. Even inline Base64 font payloads trigger asynchronous decoding delays during synchronous tab rasterization, producing blank favicons or misaligned system serif fallbacks [BC15].

In Chromium’s image decoding pipeline, tab favicons are rasterized synchronously on the first frame before asynchronous font streams resolve [DML18]. Converting typography and geometric emblems into explicit <path> and <polygon> coordinates eliminates runtime font resolution altogether [BC15] [And18].

By shipping pure geometric primitives without @font-face stylesheets or embedded WOFF2 buffers, the favicon payload drops to roughly $0.4\text{ KB}$ and renders deterministically on Frame 0 across every desktop and mobile browser engine.

How Do We Compile Glyphs and the DT-1 H-Bridge Logo into Vector Paths?

We eliminate runtime font dependencies by compiling TrueType glyph contours (cmap, hmtx, loca, glyf) into cubic and quadratic Bezier <path> outlines or synthesizing our pure geometric DT-1 H-Bridge <polygon> emblem in src/commons/server/branding-assets.ts [And18] [BC15]. A SHA-256 content-addressed Puppeteer pipeline then rasterizes deterministic PNG derivatives only when source templates change.

Instead of shipping a 19 KB Base64 font inside favicon.svg, we first built an on-the-fly WOFF1 TrueType outline compiler before unifying on the borderless plain-color DT-1 H-Bridge geometry in src/pages/_internal/icon.astro and src/pages/_internal/og.astro: a Soft Sage rounded square (rx="22", #469b84), two slanted white pillars (18,78 30,22 44,22 32,78 and 56,78 68,22 82,22 70,78), and a recessed #cae8df crossbar (30,58 34,42 70,42 66,58).

When rasterizing PNG icons in src/commons/server/branding-assets.ts, we inject transparent viewport overrides via style.textContent rather than innerHTML to satisfy our strict zero-innerHTML gate:

// src/commons/server/branding-assets.ts
await page.evaluateOnNewDocument(() => {
  const style = document.createElement('style');
  style.textContent = 'html, body { background: transparent !important; }';
  document.head.appendChild(style);
});

const fullUrl = `http://127.0.0.1:${port}${urlPath}`;
await page.goto(fullUrl, { waitUntil: 'networkidle0' });
await page.evaluateHandle(() => document.fonts.ready);

const buffer = (await page.screenshot({ omitBackground: true })) as Buffer;

Unifying Brand Geometry Across React Email and Institution Logos

To maintain visual parity beyond browser tabs, src/commons/server/email/EmailShell.tsx replaces legacy CSS text badges with our pre-rendered icon-192x192.png H-Bridge asset across all transactional and campaign email headers. Simultaneously, src/pages/about.astro and src/components/InstitutionLogo.astro harmonize academic and industry marks on a normalized 100x100 coordinate grid using adaptive Nordic pastel tokens [And18] [BC15].

Email clients frequently strip custom webfonts and CSS gradients, so src/commons/server/email/EmailShell.tsx embeds the deterministic 40x40 rasterized DT-1 badge directly alongside the header lockup—integrating seamlessly with our Newsletter-as-Code React Email and Listmonk Pipeline, Zero-Artifact Content-Addressable Build Caching, Ten-Domain Color Spectrum, Zero-innerHTML Preact Architecture, and Three-Band Adaptive SVG Governance.

On src/pages/about.astro, src/components/InstitutionLogo.astro pairs the self-hosted H-Bridge geometry (color-mix(in srgb, var(--color-brand-primary) 28%, white)) with optically centered institution marks (--color-inst-*), while EmailShell.tsx renders the shared rasterized asset:

// src/commons/server/email/EmailShell.tsx
<table role="presentation" cellPadding="0" cellSpacing="0" border={0}>
  <tbody>
    <tr>
      <td style={emailStyles.headerBadgeCell}>
        <Img
          src="https://hackenberg.tech/icon-192x192.png"
          width="40"
          height="40"
          alt="Dr. Georg Hackenberg"
          style={emailStyles.brandBadge}
        />
      </td>
    </tr>
  </tbody>
</table>