Logogami

Diagram

Inspiration

Pain Point

Brand and logo asset management. Unless an organization had a dedicated marketing design team in complete control of all branded materials, it's difficult to keep the correct logo asset in everybody's hand.

Solution

Dynamic, efficient SVG in the cloud.

SVG can now be rendered consistently and reliably across all uses. It's now more portable than EPS, and more practical than any raster format. We've come up with a dynamic and management SVG logo spec, taking full advantage of re-using Symbols with CSS variables, that allows storing multiple variations and themed versions of a logo in one optimized SVG file.

By dynamically managing this SVG logo from MongoDB and centralizing in the Cloud, this one logo is delivered anywhere it is needed. Dynamic means the owner is in control in real time. Dark, Pride, and Holiday themed variations of the logo can be efficiently included and set as the primary facing logo as wanted.

What it does

The Logogami app allows a user to login using MongoDB App Services and manage their logos. Logo data is stored in MongoDB. It is processed using the Logogami SVG spec to a single SVG file, which is hosted on Cloud CDN or accessed directly on a Brand Guide webpage.

How we built it

MongoDB Atlas is the data backend, with App Services for user identity. The app frontend is coded in SvelteKit. The app is hosted on Google Cloud Run, with Docker and related CD tools. Cloud CDN is used to deliver final assets.

Challenges we ran into

There are two basic technical limitations holding back full use case potential:

Problem: E-mails still have bad SVG support. Logogami is perfect for creating email signatures, but email clients don't like SVGs. Solution: Also has dynamically generated raster version of the logo for email signatures.

Problem: Cross-domain blocking of svg use tags prevent using directly from CDN. Solution: Download the SVG locally. A code snippet to javascript fetch() the logogami SVG directly from the CDN and put it inline.