Robust SVG Logo Implementation

Current Status: Working

The logo system is fully implemented and working in the monorepo.

Architecture

Source Files

Location: src/brand/{brand}/logos/svg-paths-base/

File	Background Shape	Animation
sd-circle.svg	Circle	S ↔ $D
sd-leaf-dot.svg	Leaf square + gold dot	S ↔ $D
sd-leaf-rect.svg	Leaf rectangle	S ↔ $D
sd-leaf-square.svg	Leaf square	S ↔ $D
ts-circle.svg	Circle	None

SVG Structure (100x100 viewBox)

All SD logos follow this structure:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path id="bg" class="logo-bg" d="..." fill="currentColor"/>
  <g class="logo-text" fill="currentColor">
    <path id="char-S" d="..." aria-label="S"/>
    <path id="char-D" d="..." aria-label="D"/>
    <path id="char-dollar" d="..." aria-label="$"/>
  </g>
  <!-- Optional: accent dot for leaf-dot variant -->
  <circle id="accent" class="logo-secondary" cx="85.8" cy="65.1" r="4.2"/>
</svg>

Animation Approach

The S ↔ $ animation uses a simple overlay technique:

• char-S and char-D are always visible
• char-dollar contains a vertical bar + S path that overlays char-S
• CSS keyframe animation fades char-dollar opacity (0 → 1 → 0)
• Result: S appears to transform into $ and back

CSS Animation:

@keyframes show-dollar {
  0% { opacity: 0; }
  37.5% { opacity: 0; }
  50% { opacity: 1; }
  87.5% { opacity: 1; }
  100% { opacity: 0; }
}

.brand-logo--animate #char-dollar {
  animation: show-dollar 4s ease-in-out infinite;
}

Component Usage

BrandLogo.astro at sites/Template/src/components/brand/BrandLogo.astro

<BrandLogo brand="sd" variant="leafDot" animate />
<BrandLogo brand="sd" variant="circle" />
<BrandLogo brand="ts" />

Props:

• brand: ‘sd’ | ‘ts’ (default: ‘sd’)
• variant: ‘circle’ | ‘leafDot’ (default: ‘leafDot’ for SD)
• animate: boolean (default: false)
• class: additional CSS classes

Color System

Colors are applied via CSS custom properties:

.brand-logo--sd .logo-bg { fill: hsl(var(--primary-8)); }
.brand-logo--sd .logo-text { fill: #ffffff; }
.brand-logo--sd .logo-secondary { fill: hsl(var(--secondary-7)); }

Favicon Generation

Script: sites/Template/scripts/generate-favicon.mjs Command: pnpm favicon:sd or pnpm favicon:ts

Process:

1. Reads brand contract for colors (primary, secondary)
2. Loads circle variant SVG
3. Injects inline color styles (favicons can’t use CSS variables)
4. Hides char-dollar for static favicon (no animation)
5. Generates multiple sizes (16, 32, 64, 180, 512)
6. Copies 64px version to public/favicon.svg

Important: viewBox stays at 100x100, only width/height change for sizing.

Testing

Test page: http://localhost:4321/logo-test

Tests:

• Light/dark background rendering
• Multiple variants (circle, leafDot)
• Animation (S ↔ $)
• Size scaling (32px, 64px, 128px)
• Static vs animated comparison

Key Files

File	Purpose
src/brand/sd/logos/svg-paths-base/*.svg	Source SVG logos
src/brand/sd/index.ts	Brand contract (colors, logo refs)
sites/Template/src/components/brand/BrandLogo.astro	UI component
sites/Template/scripts/generate-favicon.mjs	Favicon generator
src/brand/sd/favicons/	Generated favicons

Historical Note

The working implementation was established in commit 3725ef7 (“fixed: robust logo, for SD and TS!”). The current normalized 100x100 approach was refined from an earlier 512x512 version.