logo
TAG digital studios
Software NOT made in Silicon Valley
Icon Image API

The Icon Image API creates a PNG, JPEG, Base64 or just echos SVG from and existing icon SVG definition path string.

I've written my own lightweight SVG parser to separate that function from any 3rd party drawing library. The following example can pull SVG from any data store (including other SVG respository sites), resource file or parse a POST body.

Colors can be specified in a number of ways including the standard web color names. You can also use 3, 4, 6 or 8 digit hex values where the prefixing hash is optional. The last hex value is the alpha chanel assumed to be fully opaque. You can also use JSON object naming in the format rgb(0-255,0-255,0-255) or rgba(0-255,0-255,0-255,0-1). Setting a color value to the explicit value 'empty' will set it to fully transparent which is the same as 0000.

Format

The default resulting format is PNG. You can also set format to JPG, SVG, HTML or Original which will just return the orginal un-transformed SVG path string (mainly used to test). HTML just wraps the SVG version in an HTML page. If you wan to import into some other drawing tool use SVG.

You can also reference the OpenAPI Docs.

Examples

Dynamic Icon Image

https://services.raydreams.com/api/v1/icon/[:iconID]?[size={int}]&[outline={color}]&[fill={color}]

https://images-dev-api.azurewebsites.net/api/v1/icon/376782?size=600&sw=100&origin=false&bkg=black&outline=white&bw=20&fill=limegreen&x=100&a=0&debug=false

OPTION KEY TYPE DESCRIPTION DEFAULT
icon icon string GET use either an icon enumeration ID from the data store OR the ID from Online Web Fonts. POST put the raw SVG path string only in the body as plain text starting with the M command (no quotes) random icon
image size size int The width and height both of the image in pixels 400
fill color fill Hex String | Web Color Name | rgba(rr,gg,bb,aa) The color used to fill the icon. Leave blank to not fill. red
outline color outline Hex String | Web Color Name | rgba(rr,gg,bb,aa) The outline color of the icon FF0000
border color border Hex String | Web Color Name | rgba(rr,gg,bb,aa) The border color FF0000
background color bkg Hex String | Web Color Name | rgba(rr,gg,bb,aa) The color of the background. Leave blank to not fill. rgb(255,255,255)
gradient color grad null | Hex String | Web Color Name | rgba(rr,gg,bb,aa) If specified then the background will be drawn as a linear gradient using the background color and the gradient color. null
scaling x int [25,150] Percentage to scale the icon within the image where 100 is default. 120
border weight bw int [0,300] Percent thickness of the image border where 0 is no border and 100 is default. 0
stroke weight sw int [1,300] Percent thickness of the icon border and 100 is default. 100
rotation angle a int [0,360] Angle in degrees to rotate the icon 45
gradient angle ga int [0,360] Angle in degrees to rotate the gradient if a gradient color was specified where 0 is up going counter clockwise 0
offset offset Point (e.g 40,10) If specified will offset the final icon position from center 0,0
origin dot origin bool Whether to draw a center dot or not false
response format format png | jpg | base64 | svg | html | original Return the image as a PNG or JPEG, a Base64 encoded PNG (wrapped), transformed SVG, HTML wrapped SVG or just the original SVG plain text path string. png
debug debug bool | Hex String | Web Color Name | rgba(rr,gg,bb,aa) If specified will draw debugging lines including curve handles in the specified color defaulting to red false

An error has occurred. This application may no longer respond until reloaded.