Abby Starnes

front-end developer

SVG Image Generation API

Technologies

  • NodeJS

  • Express

  • Heroku

Overview

This is a Node Express application API deployed to Heroku. It allows users to generate randomized SVG Images based on a given seed value. This is an individual project. I submitted it as my final project for cs50x Introduction to Computer Science.

Try It Out

(change the 'seed_value' at the end of the url to generate a new image)

View Code

Creating SVG Image Components

I chose to generate SVG images because they are rescalable (vector), support transparency, and are composed of XML, which makes them easy to modify within the API.

Steps to Create Components:

  1. Hand-draw 4 sets of eyes, mouths and bodies seperately (confine all drawings to same dimension)
  2. Scan/Photograph drawings & upload
  3. Open Image with Adobe Illustrator (place on same-size canvas for every image)
  4. Live Trace Image in 16 colors
  5. Expand
  6. Ungroup
  7. Clean up Image, deleting background & unwanted paths
  8. Export Image as SVG (check include art board)
  9. Open SVG file in text editor. Remove outer SVG header and footer so that only the image paths and styles remain. Change each style class to be unique to the project directory (or else there will be conflicts when you merge the images together.)
SVG lip component SVG lip component SVG lip component SVG lip component

SVG mouth components.

SVG lip component SVG lip component SVG lip component SVG lip component

SVG eye components.

SVG lip component SVG lip component SVG lip component SVG lip component

SVG body components.

Generating SVG Composite Image with Seed Value

The user can input any seed as a get request parameter. I used seedrandom, a seeded random number generator for JS, to choose SVG component parts based on the user's chosen seed.

pickAPart() takes a number 1-10 and a part type (mouth, eye or body) and returns the corresponding part version (eg. 'mouth2.svg'). The route '/creature/:seed' takes any seed value as a get request parameter. It then uses seedrandom to generate 3 numbers based on the given seed. pickAPart() is then called with each number and corresponding part type. The resulting parts are concatenated into one long string. This string is written to a temporary SVG file. Then the request responds, returning the SVG string to the user.

Walk Through Screencast for cs50x