Made an SVG Logo on a Smartphone

2022-09-04 Sun

I had this idea to recreate my PNG logo as an SVG on my phone. Somewhere along the way, I lost the source Illustrator file for the logo so a vector replacement was needed. I’m also planning to level up with some animations for this site and SVG provides this capability. Working on my phone would allow me to work on it whenever I had some free time, wherever I was.

Finding the right app

Thinking Adobe would have this covered, I was inclined to install their Illustrator Draw mobile app but to my dismay, it is not available for US markets 🧐 Once upon a time I was using the free online vector drawing program called Gravit Designer. I thought they might have a mobile version. The desktop version was pretty great but has since been integrated into CorelDraw under a subscription plan: https://gravit.io 🧐 I kept digging and installing apps until I found the one that had all the tools to make my dreams come true: Vector Asset Creator (in Google Play Store) 🎉

Vector Asset Creator

I watched the ~10 minute orientation tutorial video on the Play Store before I installed. From this video, I saw it had all the tools I would need. After install and using it for a while, I found you can open a menu by long-press on any vector point. This menu has a Position feature that allows you to enter x/y position of the vector point. This along with the grid and guides allows granular fine-tuning of point alignment. Given the geometric nature of the logo, I used these features a lot.

The app exports very clean SVG code. There aren’t any of the questionable artifacts I’ve seen from other drawing programs. This may because the simple nature of the design but I was pleasantly surprised. After exporting the source code, I applied typeface anatomy CSS classes. I used another app on my phone to do this: Acode (in Google Play Store). The CSS classes will allow the different typographic elements of the logo to be selected for animation.

.bbid-logo-svg
  .ascender_1
  .bowl_1
  .counter_1
  .ascender_2
  .bowl_2
  .counter_2

And so here it is in all its glory… I made this SVG right on my phone: