Druplicon Sprite Build Summary

Completion Report

✅ Successfully built SVG sprite with greyscale-preserving color normalization

Statistics

• Total icons: 162 unique druplicons
• Sprite size: 20MB (includes embedded raster images)
• Output files:
  • druplicon-sprite.svg - Single sprite with all icons
  • druplicon-manifest.txt - ID-to-filename mapping
  • SPRITE-USAGE.md - Integration guide
  • demo.html - Interactive demonstration

Technical Implementation

Color Normalization Algorithm

For each SVG fill/stroke color:
1. Parse color (hex, rgb(), named colors)
2. Calculate luminance: L = 0.2126×R + 0.7152×G + 0.0722×B
3. Normalize to 0-1 range: luminance = L / 255
4. Replace: fill="#RRGGBB" → fill="currentColor" opacity="0.XXX"

This preserves the greyscale information in the opacity value while allowing the actual color to be controlled via CSS color property.

Example Transformations

• Black (#000000) → currentColor + opacity=”0.000”
• 50% Grey (#808080) → currentColor + opacity=”0.502”
• White (#FFFFFF) → currentColor + opacity=”1.000”
• Drupal Blue (#0678BE) → currentColor + opacity=”0.347”

File Handling

• SVG files: Parsed and color-normalized with luminance preservation
• Raster files (PNG/JPG/GIF): Embedded as base64 data URIs within <image> elements
• Deduplication: SHA1-based to avoid duplicates

Dark/Light Mode Compatibility

Icons automatically adapt to theme color:

/* Light mode */
.slide { color: #000; }

/* Dark mode */
.slide { color: #fff; }

The greyscale values (opacity) remain constant, but the base color changes, creating perfect theme adaptation.

Usage in Presentations

As Watermark

<svg class="watermark" style="opacity: 0.1;">
  <use href="ca-slides/assets/drupal/druplicon-sprite.svg#druplicon-drupal-hero_drupal-20hero"/>
</svg>

Inline Icon

<svg width="50" height="50">
  <use href="ca-slides/assets/drupal/druplicon-sprite.svg#druplicon-a11y_druplicon-a11y"/>
</svg>

Sample Icons Available

• druplicon-angry-drop_angry - Angry druplicon
• druplicon-a11y_druplicon-a11y - Accessibility variant
• druplicon-drupal-hero_drupal-20hero - Hero variant
• druplicon-druplicon-batman_druplicon-batman - Batman druplicon
• druplicon-druplicon-angel_druplicon-angel - Angel druplicon
• druplicon-composer - Composer logo variant
• druplicon-drupal-europe-2018 - DrupalCon Europe
• druplicon-bootstrap-paragraphs - Bootstrap integration
• … and 154 more!

See druplicon-manifest.txt for the complete list.

Testing

Open demo.html in a browser to see:

• Interactive dark/light mode toggle
• Watermark demonstration
• Sample icon grid
• Real-time theme adaptation

Regeneration

To rebuild the sprite after adding new images:

cd /Users/mgifford/ox.ca
python3 scripts/build_druplicon_sprite.py

The script will:

1. Scan presentations/ca-slides/assets/drupal/originals/
2. Skip duplicates (SHA1 hash comparison)
3. Normalize colors with greyscale preservation
4. Embed raster images
5. Output sprite + manifest

Performance Notes

• File size: 20MB due to embedded rasters
• Optimization: Consider serving rasters separately for production
• Browser support: All modern browsers (SVG <use> with external refs)
• Caching: Sprite can be cached indefinitely (content-addressed by hash)

Next Steps (Optional)

1. Optimize rasters: Convert large PNGs/JPGs to SVG via tracing
2. Split sprite: Separate raster and vector versions
3. Lazy loading: Load sprite on-demand for presentations
4. CDN: Host on fast CDN for presentation performance