Extending circleMarker "icon" formatting - leaflet

Question

I found some genius code. But I do not understand how they designed the marker pin
Is the MarkerPin made from svg in some way or did they just come up with the design out of maths?
I have this svg icon I would like to use. So how would i go about translating that to the code below? I may be stupid and they are completely unrelated to svg.
L.MarkerPin = L.CircleMarker.extend({
_updatePath: function () {
this._renderer._updateMarkerPin(this);
},
_containsPoint: function (p) {
var r = this._radius;
var insideCircle =
p.add([0, r * 2]).distanceTo(this._point) <= r + this._clickTolerance();
var a = this._point,
b = a.subtract([0.58 * r, r]),
c = a.subtract([-0.58 * r, r]);
var insideTriangle = true;
var ap_x = p.x - a.x;
var ap_y = p.y - a.y;
var p_ab = (b.x - a.x) * ap_y - (b.y - a.y) * ap_x > 0;
var p_ac = (c.x - a.x) * ap_y - (c.y - a.y) * ap_x > 0;
var p_bc = (c.x - b.x) * (p.y - b.y) - (c.y - b.y) * (p.x - b.x) > 0;
if (p_ac === p_ab) insideTriangle = false;
if (p_bc !== p_ab) insideTriangle = false;
return insideTriangle || insideCircle;
}
});
Jsfiddle with complete example:
https://jsfiddle.net/n2jf5c4q/

Answer 1

The code you posted is only to check if a point (f.e. a click position) is in the area of the Pin. I think this is made because the creator don't wanted that the click event is fired when it is clicked on the area of a circle.
What you mean is this code:
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p.x - 0.58 * r, p.y - r);
ctx.arc(p.x, p.y - 2 * r, r, -Math.PI * 1.161, Math.PI * 0.161);
ctx.closePath();
This is normal canvas drawing and has nothing to do with svg
Update
I tried a little bit around and i found a way, but this is not supported for all browsers.
You can use Path2D render the svg as canvas path (maybe you have to resize the svg)
window.p = new Path2D("M0-0.1h20.8v20.9H0V-0.1z M0.5,0.4v19.9h19.8V0.4H0.5z M19,14h-3.2l1.6,3.4h-1.7L14,14H6.7l-1.6,3.4H3.3L4.9,14H1.8v-1.6 h3.9l0.8-1.6H4.1V9.1h12.5v1.6h-2.4l0.8,1.6h4V14z M7.4,12.4h5.8l-0.7-1.6H8.2L8.1,11l-0.3,0.6L7.4,12.4z");
L.Canvas.include({
_updateCircle: function (layer) {
if (!this._drawing || layer._empty()) { return; }
var p = layer._point,
ctx = this._ctx,
r = Math.max(Math.round(layer._radius), 1),
s = (Math.max(Math.round(layer._radiusY), 1) || r) / r;
if (s !== 1) {
ctx.save();
ctx.scale(1, s);
}
ctx.beginPath();
ctx.arc(p.x, p.y / s, r, 0, Math.PI * 2, false);
if (s !== 1) {
ctx.restore();
}
var x = p.x-10; // -10 because of ~20 is the img size
var y = p.y-10;
ctx.translate(x,y);
ctx.fill(window.p);
//this._fillStroke(ctx, layer);
},
});
var canvasRenderer = L.canvas();
new L.CircleMarker([51.505, -0.09], {
renderer: canvasRenderer
}).bindPopup('hello').addTo(mymap);