Capellic Delivers Scalable Membership Card System for NEA Affiliates Using SVG and Drupal Multisite

The Capellic team supports over 20 NEA affiliate websites through a shared Drupal codebase, allowing feature rollouts to be replicated across sites with minimal duplication. When one affiliate requested a digital version of its physical member ID card, Capellic sought a solution that could serve all affiliates—each with its own branding, color palette, and logo—without requiring per-site customization.

The team devised an approach using scalable vector graphics (SVG) templates combined with HTML’s <canvas> element. Each SVG template contains placeholders for the member’s name, ID number, and affiliate styling. When rendered in the browser, the <canvas> element dynamically applies branding and converts the card into a PNG, ready for download or printing at wallet size.

This client-side rendering strategy replaced a more complex server-side process, resolving issues with varied logo formats and ensuring consistent performance across mobile and desktop devices. It also made the system easier to maintain—future design tweaks or affiliate branding updates automatically propagate to every card generated on the platform.

“We wanted to create something affiliates could enable without developer intervention,” noted Capellic’s Technical Director, Paul Venuti. “Now, adding the ID card feature is essentially as simple as flipping a switch.”

The feature has already been adopted by more than a dozen NEA affiliates. Each affiliate can update its site’s color scheme or logo through the standard UI, with those changes reflected automatically in the generated cards. For Capellic, the result is a durable, maintainable Drupal feature that unites flexibility and brand consistency across a national network of sites.