Element Template SVG converter

With Camunda 8 you are now able to attach custom icons to items in Element Templates. SVGs (Scalable Vector Graphics) are ideal since they are vector, rather than raster, diagrams meaning they can scale infinitely in size while retaining their original fidelity. This utility will convert SVG diagrams for use as 18px by 18px task icons. A growing library of converted icons is available (see below) for you to copy and paste into an Element Template file. Or you can use this sample Element Template file to access all of the icons at once. Note, the elements have been associated with User Tasks and can be changed as needed.

Table of Contents

1. Converted SVGs
2. Fun with flags
3. The SVG converter utilities
4. Using Inkscape

Converted SVGs

You can simply copy and paste these ready made snippets into the "icon": { "contents": portion of your Element Template entry. They have been created at a width of 18px. Click on image to be brought to the Element Template SVG snippet. Note, with the introduction of Modeler 5.2 the 18px by 18px icon dimensions are strictly enforced which will result in shrunken icons in some cases.

Camunda Logos

Black	Orange	28px wide	Animated Classic	Classic

Camundamojis

Happy	Neutral	Concerned	Mad

Friends

Extraterrestrial	Blue Robot	Yellow Robot	Green Monster	Orange Monster	Dude	Pirate	Pigeon Hawk

Coffee

Coffee cup	Grey coffee cup	Coffee circle	Yellow coffee circle

Other logos

Github	Slack	Stack Overflow	Twitter	YouTube	LinkedIn	Facebook

For the dogs

Dog food bowl	Teal dog food bowl	Dog bone	Teal dog bone

For the cats

Cat food bowl	Orange dog food bowl	Cat treat	Orange cat treat

Huh?

Question mark	Blue question mark

The rest

An example of its use in an Element Template entry (see contents):

{
	"$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
	"name": "Feed the cat",
	"icon": { "contents": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9.565979' viewBox='0 0 18 9.565979' %3E%3Ccircle r='0.29226804' cx='6.7592783' cy='5.7293816'/%3E%3Cpath d='M 17.902576 6.643299 h 0.0046391753 L 15.810308 1.980928 h -0.0046391753 c 0.0 -0.0046391753,-0.0046391753 -0.013917526,-0.0046391753 -0.018556701 C 15.406701 0.6170103,12.094331 0.0,9.0 0.0 S 2.5932992 0.6170103,2.1989691 1.9623711 c -0.0046391753 0.0046391753,-0.0046391753 0.013917526,-0.0046391753 0.018556701 h -0.0046391753 L 0.0927835 6.643299 h 0.0046391753 c -0.064948454 0.12525773,-0.097422674 0.25979382,-0.097422674 0.39896908 c 0.0 0.75618553,0.9881443 1.3824742,2.931959 1.8695877 c 1.7025774 0.42216498,3.8551545 0.6541237,6.0680413 0.6541237 s 4.3654637 -0.23195876,6.0680413 -0.6541237 c 1.9484537 -0.4824742,2.931959 -1.1134021,2.931959 -1.8695877 C 18.0 6.903093,17.967525 6.7685566,17.902576 6.643299 L 17.902576 6.643299 M 12.32165 6.634021 l 0.42216498 1.3685567 c 0.013917526 0.041752577,-0.027835052 0.07886598,-0.06958763 0.064948454 c -0.93247426 -0.35721648,-1.401031 -1.1690723,-1.563402 -1.5262887 h -0.3618557 l -0.06958763 0.61237115 c -0.0046391753 0.05103093,-0.08350515 0.05103093,-0.08814433 0.0 l -0.06958763 -0.61237115 h -0.61237115 l -0.12525773 1.1551546 c -0.0046391753 0.05103093,-0.08350515 0.05103093,-0.08814433 0.0 l -0.12525773 -1.1551546 h -0.64484537 l -0.185567 1.6979381 c -0.0046391753 0.05103093,-0.08350515 0.05103093,-0.08814433 0.0 l -0.185567 -1.6979381 h -0.5798969 v 1.6283505 c 0.0 0.10206186,-0.08814433 0.18092784,-0.19020618 0.17164949 c -1.164433 -0.11597938,-2.4355671 -1.2386599,-2.4355671 -1.9762886 s 1.271134 -1.8649485,2.4355671 -1.9762886 c 0.10206186 -0.0092783505,0.19020618 0.06958763,0.19020618 0.17164949 v 1.6283505 h 0.5798969 l 0.185567 -1.6979381 c 0.0046391753 -0.05103093,0.08350515 -0.05103093,0.08814433 0.0 l 0.185567 1.6979381 h 0.64484537 l 0.12525773 -1.1551546 c 0.0046391753 -0.05103093,0.08350515 -0.05103093,0.08814433 0.0 l 0.12525773 1.1551546 h 0.61237115 l 0.06958763 -0.61237115 c 0.0046391753 -0.05103093,0.08350515 -0.05103093,0.08814433 0.0 l 0.06958763 0.61237115 h 0.3618557 c 0.1670103 -0.35721648,0.63092786 -1.1690723,1.563402 -1.5262887 c 0.041752577 -0.013917526,0.08350515 0.023195876,0.06958763 0.064948454 l -0.42216498 1.3685567 C 12.265979 6.272165,12.265979 6.4577317,12.32165 6.634021 L 12.32165 6.634021 M 13.022165 2.8716495 c -1.0716496 0.28298968,-2.5005155 0.43608245,-4.022165 0.43608245 s -2.9505155 -0.15309279,-4.022165 -0.43608245 C 3.8922682 2.5886598,3.623196 2.2917526,3.6185567 2.2360826 c 0.0046391753 -0.032474227,0.08814433 -0.13917527,0.34793815 -0.27371135 c 0.20876288 -0.11134021,0.528866 -0.23659794,1.0113401 -0.36649486 c 1.0716496 -0.28298968,2.5005155 -0.43608245,4.022165 -0.43608245 s 2.9505155 0.15309279,4.022165 0.43608245 c 0.48711342 0.12525773,0.80721647 0.25515464,1.0159794 0.36649486 c 0.25979382 0.13453609,0.34329897 0.2412371,0.34793815 0.27371135 C 14.372165 2.2917526,14.107733 2.5886598,13.022165 2.8716495 L 13.022165 2.8716495 z'/%3E%3C/svg%3E"
		},
	"description": "Feed the cat",
	"appliesTo": [
		"bpmn:UserTask"
	],
	"id": "catFoodBowl",
	"documentationRef": "https://docs.camunda.io",
	"elementType": {
		"value": "bpmn:UserTask"
	},
	"properties": [
		{
			"binding": {
				"name": "name",
				"type": "property"
			},
			"type": "String",
			"value": "Feed the cat"
		}
	]
}

Fun with flags

Check out the available flag icons of the world here. Copy and paste individual countries or try them all at once. You can find the original source for the flag SVGs here: https://flagicons.lipis.dev/

The SVG converter utilities

If you want to create your own icons you can use these converters to do so. Bear in mind, the simpler the SVG, the better the chances of success. SVGs using arcane transforms may return odd results until the algorithms can handle them. Also keep in mind the end result will fit into an 18x18 box and an SVG that looks great at 500x500 may not look as great at 18x18 until you zoom in. If you want to convert a single SVG use the RescaleImage class which can be found here:

src/main/java/org/svg/utilities/RescaleImage

It uses a static main method. The six arguments to pass into the main class are:

"SVG input file location" "Modeler Element Template file location" "Icon width in pixels" "Element Template ID" "Element Template Name/Description/etc" "What BPMN elements it will apply to"

If you have a directory of SVG icons to convert you can use the BulkConverter class which can be found here:

src/main/java/org/svg/utilities/BulkConverter

It also uses a static main method. The six arguments to pass into the main class are:

"SVG input directory" "Directory of converted SVG snippets" "Modeler Element Template file location" "Icon width in pixels" "Element Template ID" "Element Template Name/Description/etc" "What BPMN elements it will apply to" "Converted snippet directory" "Converted SVG directory"

The converted snippet and SVG directories are only used if you plan to add to this repository as it makes updating the readme easier. Feel free to use throwaway directories. The Bulk Converter will be refactored for more streamlined functioning in later releases.

Using Inkscape

If an icon is not available here or if the converter has a hard time with a desired SVG, Inkscape can be used to manually update the SVG.

Inkscape is an open source vector graphics editor and it can be found here. Download and install Inkscape. Don't worry, it's available on all platforms. Start Inkscape and open the target SVG using File > Open.

Change the size of the document in the Document Properties panel by going to File > Document Properties or use Ctrl-Shift-D and set the Width and Height properties to 18x18px:

Next, manually resize the entire image by one of two ways. First, however, select everything in the diagram using Ctrl-A. One method is to then simply enter an X of zero, Y of zero, lock aspect ratio and enter a width or height of 18 in the top panel (see image below). Another approach is to select a corner (usually lower right) of the outermost object and while holding the Ctrl key (to lock aspect ratio), resize the image to fit inside the new 18x18px canvas (you may need to zoom in to make it easier). FYI this is an SVG of the flag of Bermuda.

Save your results, ideally in another file to avoid overwriting the source - File > Save As.... Be sure to save as a Plain SVG as saving it as an Inkscape SVG adds superfluous metadata. You may still need to manually edit the SVG file in a text editor to remove extraneous information.

Next, run the SVG through the 'light' URL encoder utility. While you can simply apply URL encoder on the SVG it will also encode whitespace which isn't required and will result in an unreadable SVG in the event you'd like to make manual updates. The updated SVG can be run through a 'light' URL encoding and augmentation (it adds data:image/svg+xml, to the beginning) utility which can be found here:

src/main/java/org/svg/utilities/LightEncodeAndAugmentSVG

Its sole argument is

location and name of updated SVG file

Copy and paste the encoded and augmented SVG (it will be sent to the console) into your Element Template file. Be sure to add it into the

"icon": "contents":

section of the Element Template entry, see:

{
	"$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
	"name": "Bermuda",
	"icon": { "contents": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...

Reset Modeler and it will be shown as part of the Element Template: