Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/camunda-community-hub/element-template-svg-converter

A library of converted SVGs for use in Element Templates along with converters to create your own custom icons
https://github.com/camunda-community-hub/element-template-svg-converter

camunda camunda-8 svg-icons

Last synced: about 1 month ago
JSON representation

A library of converted SVGs for use in Element Templates along with converters to create your own custom icons

Host: GitHub
URL: https://github.com/camunda-community-hub/element-template-svg-converter
Owner: camunda-community-hub
Created: 2022-08-31T14:23:51.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2023-12-15T20:24:36.000Z (about 1 year ago)
Last Synced: 2024-04-16T19:14:49.454Z (9 months ago)
Topics: camunda, camunda-8, svg-icons
Language: Java
Homepage:
Size: 3.64 MB
Stars: 9
Watchers: 5
Forks: 1
Open Issues: 2
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

[![Community Extension](https://img.shields.io/badge/Community%20Extension-An%20open%20source%20community%20maintained%20project-FF4700)](https://github.com/camunda-community-hub/community)
[![](https://img.shields.io/badge/Lifecycle-Incubating-blue)](https://github.com/Camunda-Community-Hub/community/blob/main/extension-lifecycle.md#incubating-)
![Compatible with: Camunda Platform 8](https://img.shields.io/badge/Compatible%20with-Camunda%20Platform%208-0072Ce)

# 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](./element-template-sample/elementTemplates.json) 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](#convertedSVGs)
2. [Fun with flags](#funWithFlags)
3. [The SVG converter utilities](#svgConverter)
4. [Using Inkscape](#usingInkscape)

## 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

BlackOrange28px wideAnimated ClassicClassic

Camundamojis

HappyNeutralConcernedMad

Friends

ExtraterrestrialBlue RobotYellow RobotGreen MonsterOrange MonsterDudePiratePigeon Hawk

Coffee

Coffee cupGrey coffee cupCoffee circleYellow coffee circle

Other logos

GithubSlackStack OverflowTwitterYouTubeLinkedInFacebook

For the dogs

Dog food bowlTeal dog food bowlDog boneTeal dog bone

For the cats

Cat food bowlOrange dog food bowlCat treatOrange cat treat

Huh?

Question markBlue 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](https://inkscape.org/). 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: