How to add custom svg image via custom renderer?

I would like to add a custom svg icon to my tasks via custom renderer, however I have only this type of svg format:
m256,512 c-141,0 -256,-115 -256,-256 c0,-141 115,-256 256,-256 c141,0 256,115 256,256 c0,141 -115,256 -256,256 z m0,-491 c-129,0 -235,106 -235,235 c0,129 106,235 235,235 c129,0 235,-106 235,-235 c0,-129 -106,-235 -235,-235 z m122,245 l-192,96 c-3,1 -7,1 -10,-1 c-3,-2 -5,-5 -5,-9 l0,-192 c0,-4 2,-7 5,-9 c1,-1 3,-2 5,-2 c2,0 4,1 5,1 l192,96 c4,2 6,6 6,10 c0,4 -2,8 -6,10 z m-186,-89 l0,158

How can I convert it to this-like format?
m {mx},{my} l 0,{e.y1} l {e.x1},0 l 0,-{e.y1} z l {e.x0},{e.y0} l {e.x0},-{e.y0}

Is linking custom PathMap.js the right way to add an icon?

this.modeler = new BpmnModeler({
    container: canvas,
    propertiesPanel: {
        parent: '#js-properties-panel'
    additionalModules: [
                propertiesProvider: [ 'type', require('./bpmnProviders/TasPropertiesProvider') ],
                pathMap: [ 'type', require('./bpmnProviders/PathMap') ]


can you please provide more context? What do you want to achieve? Is there a going to be a custom type of task which will have this icon?

As for formatting your SVG path to the required format you’d have to at least replace the initial move command m 256, 512 to m {mx}, {my}. Otherwise the path would always be rendered at the same position.

As for bootstrapping the application with your custom path map please take a look at this example which bootstraps bpmn-js with custom modules.

thank you for your response.
This and other similar icons would be added to any task in some cases (to the upper right corner), so my question is, whether I am supposed to link my PathMap.js with custom icons added and if yes how to convert the svg format - from some reason the custom icons are much more bigger than the other from PathMap.js. What is the format? Thank you very much!

My CustomRenderer.js contains something like this:

function CustomRenderer(eventBus, styles, pathMap) {, eventBus, styles, pathMap, 1200);

  var originalDrawShape = this.drawShape;
  var computeStyle = styles.computeStyle;

  var drawPath = function(p, d, attrs) {
    attrs = computeStyle(attrs, [ 'no-fill' ], {
      strokeWidth: 2,
      stroke: 'black'
    return p.path(d).attr(attrs);

  this.drawShape = function(visuals, element) {
    var bo, markerEnd;
    var result =, visuals, element);
    bo = getBusinessObject(element);
    markerEnd = bo.get('tas:taskEnd');

    if (markerEnd === true) {
      var pathData = pathMap.getScaledPath('TASK_TYPE_END', {
        xScaleFactor: 1,
        yScaleFactor: 1,
        containerWidth: 21,
        containerHeight: 14,
        position: {
          mx: 3.285,
          my: 0.357

      drawPath(visuals, pathData, {
        strokeWidth: 1

    return result;

I had exactly the same problem. I resized them in Inkscape to desired size. After that I pasted them into my custom PathMap.js. You wouldn’t have SVG icon size parametrized programmatically, but rezising in modeler works jut fine (see below). I also positioned them relatively in Inkscape from top left corner to change position on task canvas.

Thank you so much for the idea with Inkscape. I finally managed to resize my svg and it works.:slight_smile:

Could you please help me, I need to use bpmn-icon-data-input, I do not know how to get its relative SVG path. I have installed Inkscape but need to know how to use it?

Please do not necrobump old topics. Instead link to this thread from new topic