How to align superposed SVG layer ?

[Georges760]

Hi, I find your project amazing. I am trying to use it for personal case, but I face an issue that I cannot fix without your help :

after converting TOP copper layer with your js script and adding it into a HTML page, I also convert the TOP silkscreen layer but the resulting SVG is smaller (not all PCB have mark), so there is a resulting offset X,Y between these 2 SVG if I want to supperpose them in HTML floating div...

Is there a way to know these offsets from the output of the gerberToSvg() function ? Maybe an obscure attribute of a sub element of the resulting svg object ?

Thanks for your project and your help on my case.

[mcous]

The offset you're looking for is in the first two elements of the viewBox. You can get from the XML document itself once it's in the page (document.getElementById(SVG_ID).viewBox.baseVal), or you can get it by running gerberToSvg with object set to true. If you do it in object mode, the path to the viewbox is svgObj.svg.viewBox.

var gerberToSvg = require('gerber-to-svg')

var gerberFile = getGerberFileSomehow()
var svgObj = gerberToSvg(gerberFile, {object: true})
var viewBox = svgObj.svg.viewBox
var xOffset = viewBox[0]
var yOffset = viewBox[1]
var svgString = gerberToSvg(svgObj)

[Georges760]

Great, thanks a lot !!! I didn't found it myself...

[Georges760]

I guess the unit of values are mils (inch / 1000), right ? This is very uncommon...

Using SVG viewBox, I still got a lot of missalignements, specially between Coper and SilkScreen layers... I beleive my gerber files have the same origin coordinate between these 2 files, but once converted in SVG, nowhere I can find the common/original origin coordinate in order to supperpose perfectly SVGs...

I tried to play with your others options like "zero", but without success...

Maybe is there a way to keep the information of origin coordinates from gerber files, and use them in the resulting SVG for the alignement...

[mcous]

The viewBox units are in 1000 times the Gerber units. At the very beginning, I used viewBox units that were the same as the Gerber units, but for whatever reason, Firefox would mess up the SVG rendering completely unless I scaled the viewBox (see this FIrefox bug).

Anyway, the key here is that the SVG conversion does not translate the coordinates at all. Assuming the Gerbers were properly generated, (0, 0) in viewBox units of one layer is going to be in the same place, stackup wise, as (0, 0) in viewBox units of another layer.

The viewBox is defined as:

viewBox: [xMin, yMin, width, height]
Copper: [76.2, 98.8, 1930.7, 1917.3]
Silk: [328.3, 334.1, 1433.7, 1413.1]

where (xMin, yMin) corresponds to the bottom left corner of the Gerber image in Gerber coordinates:

(xMin, yMin+height)    (xMin+width, yMin+height)
         +------------------------+
         |      _____o          o |
         |     /          o-o   | |
         | o---     o__________/  |
         +------------------------+
   (xMin, yMin)            (xMin+width, yMin)

All that being said, there is some weirdness because HTML + SVG define (0, 0) as the top left, and Gerber defines (0, 0) as the bottom left, so y translates often need to be flipped. I've got some WIP tutorial files lying around; I'll take a look at them and see if I can clean them up and put them in the wiki.