svg smooth line draw pen mousemove how to? - svg

Question

function mouseDown(event) {
isMouseDown = true;
var shape = document.createElementNS(NS, "path");
shape.setAttribute("id", "pen" + penCount);
.
lastPoint = {
x: event.offsetX,
y: event.offsetY
};
stage.append(shape);
++penCount;
}
function mouseMove(event) {
if (isMouseDown) {
var depth = jQuery('#pen' + (penCount - 1)).attr("d");
//// how do i do this part /////////////////
jQuery('#pen' + (penCount - 1)).attr("d", depth + "L " + event.offsetX + " " + event.offsetY + " ");
lastPoint = {
x: event.offsetX,
y: event.offsetY
};
}
}
In canvas, it worked well using QuadraticCurveTo. But in SVG, I want to know how to make a smooth curve. Help me ^^
How should I apply it in the bottom part?
var midPoint = [(lastPoint.x + event.offsetX) / 2, (lastPoint.y + event.offsetY) / 2];
console.log( 'Q' + lastPoint.x + ',' + lastPoint.y + ' ' + midPoint[0] + ',' + midPoint[1]);
jQuery('#pen' + (penCount - 1)).attr("d", depth + "L " + event.offsetX + " " + event.offsetY + " ");
lastPoint = {
x: event.offsetX,
y: event.offsetY
};