How to add custom svg image via custom renderer?

Developers Modeler
3

Hello,
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) {
  BpmnRenderer.call(this, 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 = originalDrawShape.call(this, 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;
  };
}