It all started with a simple sticker. On a business trip to Hamburg, my colleagues and I came across a promotional sticker from the German county of Baden-Württemberg, which humorously boasted, "nett hier, aber waren Sie schon mal in Baden-Württemberg?" ("Nice here, but have you ever been to Baden-Württemberg?").
Have a look at the promotion if you ever taught about moving to or within Germany, Baden-Württemberg is a great destination.
Since my team is based in Stuttgart, this little joke hit home, and we all had a good laugh. But it also sparked an idea—what if I could create similar badges or "stickers" digitally and easily share them in README files, CI/CD pipelines, or anywhere else they might bring a bit of humor or information?
That idea grew into the SVG Badge Generator, a simple yet powerful tool that anyone can use to create custom badges with personalized text, colors, and layouts.
The Concept: A Tool for Everyone
The SVG Badge Generator is designed to be a free and accessible service. It’s hosted on GitHub Pages, ensuring that anyone can use it without cost or the need for a personal account. The service is straightforward: you customize your badge, preview it in real-time, and get the SVG code to use wherever you need it. The goal was to make it as easy as possible to create these badges, without requiring any complicated setup or installation.
However, for those who want a bit more control, the app has some special features. When run locally with a GitHub Personal Access Token (PAT) that has the appropriate scope, you can save and load your badges using GitHub Gists. This feature adds a layer of persistence to your badges, allowing you to easily share or reuse them later.
My Badge Gallery
| the joke | other work link | approved link | nice touch link | future ideas |
|---|---|---|---|---|
 |
 |
 |
 |
... |
Special Features: Gists and Short URLs
One of the standout features of the SVG Badge Generator is its ability to save badge configurations as GitHub Gists. This is only enabled when the tool is run locally with a PAT, making it both secure and optional. By saving a badge as a Gist, you receive a unique UUID that you can later use to reload your configuration.
But the fun doesn’t stop there. I’ve also been using Bitly to create short, memorable URLs that link directly to these SVGs. This makes it incredibly easy to embed badges in Markdown documents, project READMEs, or even CI/CD pipeline statuses. Here’s how it works:
- Generate Your Badge: Customize your badge using the SVG Badge Generator.
- Save It as a Gist: If running locally with a PAT, save the badge and get a UUID.
- Create a Bitly Link: Use Bitly to shorten the URL of your public raw SVG hosted on GitHub. Now, you have a neat, memorable URL that can be shared or embedded wherever you like.
This process not only makes it easier to share your badges but also adds a layer of professionalism to your documentation.
A Tech Test for Something Bigger
While the SVG Badge Generator is a fun and useful tool, it’s also a tech test for a larger project I’m planning. This project has allowed me to experiment with different technologies, workflows, and user interactions, all of which will inform the development of my next big idea. Stay tuned for more on that front—exciting things are coming!
Call for Contributions
The SVG Badge Generator is open to contributions, and I’d love to see what the community can bring to the table. While I’m content with the HTML, DIVs, and CSS approach for the UI, I’m fully aware that there’s room for improvement, especially when it comes to responsiveness and modern design. If you have ideas for enhancing the UI, or if you want to contribute new features or improvements, I encourage you to jump in.
I’ve intentionally kept the project open-ended, so there’s plenty of scope for innovation. And if there’s something you’d like to see but don’t have the time or skills to implement, feel free to open an issue. I’ll prioritize the ones that get the most upvotes.
Conclusion
What started as a joke sticker on a business trip has evolved into a fully-fledged tool that anyone can use to create custom SVG badges. Whether you’re adding a bit of humor to your documentation or displaying important status updates in your CI/CD pipelines, the SVG Badge Generator makes it easy and fun.
I’m excited to see how others use this tool and where the community takes it. If you’re interested in trying it out or contributing, check out the GitHub repository. Let’s build something awesome together!
Top comments (0)