Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

184
Views
SVG Scale to GCode for CNC carve

Any (FabricJS) SVG -> GCode gods out there?

I'm making an SVG using FabricJS in the browser (Chromium based at present), adding other SVG's to it and text, etc - using opentype js to convert the text to path and inserting the path into fabricJS canvas. I'm looking to save for CNC carve via GCode conversion at an exact canvas size of 98mm by 98mm.

No matter what I set my viewbox and width and height to, the GCode converter that I'm using (JSCut) scales huge and I need some help getting that width/height sorted so I can reliably convert SVG>GCode at 98mmX98mm. Can anyone offer any thoughts?

My canvas size is 277.9 square.

Logic behind 277.9 is: 98mm to inches > 3.86inches 72ppi x 3.86inches = 277.9px

The JS Save code is:

var _all = canvas.getObjects();
for(a=0;a<_all.length;a++) {
    var activeObject = _all[a];
    
    if(activeObject.type=="textbox"){
        opentype.load('fonts/'+activeObject.fontFamily+'.ttf', function(err, font) {
            if (err) {
                alert('Font could not be loaded: ' + err);
            } else {
                // Now let's display it on a canvas with id "canvas"
                const ctx = document.getElementById('ami_canvas').getContext('2d');
                const path = font.getPath(activeObject.text, (activeObject.width/2)/2, (activeObject.height + activeObject.top), activeObject.fontSize);
                canvas.remove(activeObject);
                const outlinetextpath = new fabric.Path(path.toPathData(3));
                canvas.insertAt(outlinetextpath,0);
            }
        });
    }
}

groupAll() // <-- Function below
canvas.renderAll();
GetCanvasAtResoution(277.9); // <-- Function below

let svg = canvas.toSVG();

Group function:

function groupAll (){
    var items = canvas.getObjects();
    group = new fabric.Group(items);
    for (var i = 0; i < items.length; i++) {
        canvas.remove(items[i]);
    }
    canvas.add(group);
    canvas.renderAll();
}

GetCanvasAtResolution()

function GetCanvasAtResoution(newWidth) {
    if (canvas.width != newWidth) {
        var scaleMultiplier = newWidth / canvas.width;
        var objects = canvas.getObjects();
        for (var i in objects) {
            objects[i].scaleX = objects[i].scaleX * scaleMultiplier;
            objects[i].scaleY = objects[i].scaleY * scaleMultiplier;
            objects[i].left = objects[i].left * scaleMultiplier;
            objects[i].top = objects[i].top * scaleMultiplier;
            objects[i].setCoords();
        }
        canvas.discardActiveObject();
        canvas.setWidth(canvas.getWidth() * scaleMultiplier);
        canvas.setHeight(canvas.getHeight() * scaleMultiplier);
        canvas.calcOffset();
        canvas.renderAll();
    }           
}

Any help would be greatly appreciated.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!