SVG Recolor

Banner
Variations offered
Selected variation view

Inspiration

The moment our team PM Martin saw the hackathon, we knew this was the moment we'd been waiting to start building our little products. Canva is a tool we love and having the opportunity to start small but with great impact in terms of traffic and users is a unique experience.

At first, we started empathizing with some Canva users among friends & fam to know them a little more. Here's where the inspiration came from since we realized that when you are not a designer, it's sometimes difficult to combine colors within an SVG if you don't like the existing combination. Canva does admit SVG color tuning but no one helps you with the color picking, and it does get hard sometimes!

So we tried to tackle this problem in a creative way that gives the chance to quickly find variations for that SVG you like for your presentation, but the colors simply don't match.

What it does

Users can easily upload any SVG that contains up to 8 colors, where we offer a set of variations considering the input colors, for them to rediscover combinations of that SVG, therefore boosting creativity. These variations are based on color palettes that we pick from our library which are composed of a diverse set ranging from 1 to 10 colors.

You can play with as many palettes as you want and completely change the style of your image by simply scrolling a little bit. There's also a shuffle colors button that shifts how colors are applied to the SVG to get more variations!

How we built it & Challenges we ran into

The first challenge was to onboard into the building for Canva because we'd never done so ourselves, though we must admit that the documentation and kits are super helpful and self-explanatory.

One of the main technical/creative challenges we faced after having this initial skeleton, was how to suggest new colors. And that's when - after experimenting a little bit - we decided to create a database of AI-generated color palettes using Huemint that's uniquely created for this Canva app. Huemint uses machine learning to create unique color schemes for brands, websites & graphics, giving us the gift of uniqueness, you wouldn't get these same colors anywhere else :)

We also let the user modify any of those color palettes to add their magic to the design if they wish to.

Accomplishments that we're proud of

We are proud to have created a simple but compelling tool that uses the best of AI-generated content to provoke divergent options for existing SVGs. It's a simple-to-use tool that helps non-designers achieve better results, and we feel that's very connected to Canva's mission.

What we learned

A lot. We are now confident to create many more apps for Canva. We also trained ourselves in trying to innovate within a fixed amount of time and quickly explore users' needs to tackle a challenge like this.

Although we are all long-time friends and co-workers, having a side project was fun but demanded we learn how to organize and work together on a different situation and even roles. We all coded, interviewed, analyzed, and much more.

What's next for SVG Recolor

We want to see how users react to the products and take this as the first step. This is just one of a set of tools we are going to create to keep improving users' work in Canva, we are for example planning a Presentation Kit app that helps tailor common elements within presentations & a Meme Generator app. We'll try to publish them within Hackathón or immediately afterward.

We love creative work and seeing technology as a means to empower people within creative tasks, from the most common to the most complex ones.

So, some features we imagine soon: