Fritzing SVG dimension rules


I’m struggling to create svg for new parts. Some of the issues I face are scaling problem, pin alignment on the grid, dimension issues, …
I code svg as an xml file with an IDE using inches or metric system.

So far I didn’t found any information on how to deal with dimensions, positioning, scaling, … in Fritzing ?

Do someone knows where is that info or how to do ?

I’ve got vids that tell you how to draw stuff, but it doesn’t help if you go the XML code way.

My guess is get a svg out of FZ and see how they do it. Just edit part, and File/Show in folder, for that view.
Otherwise upload that svg here with the 7th button above.

Helpful Info:

• SVG’s are based on XML
• XML native default units are PX (pixels)
• XML units can be coded for all units
• Results of the SVG (and XML) depend on the DPI of your display and Rendering App. Typical are: 72 DPI, 90 DPI, 96 DPI…
• Settings for correct result requires some homework

• With:
• knowledge
• one resulting output
• DPI known (or guessed). Remember, DPI=Dots-Per-INCH. Which is the same as saying, ‘Pixels-Per-Inch’
The scaling is calculated then coded into the XML

• a Rectangle in SVG with dim’s of 100mm (3.937in)
• for 72 DPI, the Pixel setting is:
(3.937in)(72px/in) = 283px

• for 90 DPI, the pixel setting is:
(3.937in)(90px/in) = 354px

Example, for Metric(mm) with syntax as noted above:
(283px)(in/72px)(25.4mm/in) = 100mm

Now, armed with info, Make a 46x48mm Rectangle for a PCB SVG in the XML with Layers/etc for a Fritzing PCB.

  • If you do the calc’s to solve the Fritzings ‘Pixels/inch’, you 'll see it’s 90DPI (for older Fritzing, don’t know about new version, i don’t use it).
    X = (25.4mm/in)(163px)(1/46mm) = ?

• Below Fritzing shows Width=46mm, Height=48mm
• XML shows 163 x 170 px (rounded)

The attributes on the initial wrapper svg element actually set the units and scaling to use for the file.

<?xml version="1.0" encoding="UTF-8"?>
  viewBox="0 0 1000 2000"

In the above, the width and height attribute values specify the physical world dimensions and units for the file contents. the viewBox shows the matching internal pixels used to cover that area. So for this example, the image is 1 inch by 2 inches, with 1000 pixels per inch. Or 1 pixel = 1 mil. In the above, the x and y attributes are optional. The default is 0,0. For Fritzing, they must be 0, 0, and so must the first 2 values for the viewBox.

Most of the svg drawing tools default to using something close to video screen units. Like 72, 90, or 96 pixels per inch. Different versions of the the same program can use different relationships. Some will use “px” for the units, so the relation becomes 1 to 1. That does not work well for Fritzing, because it then has to guess what the relation is between px and real world units, to be able to match up with things that have real dimensions. Different programs have different ways to specify the units to use. With varying levels of difficulty. Most will honour the units that are already in a file when it is opened.

For an existing svg file, you can determine the scaling easily. Take the last number in the viewBox, divide by the height will give the number of pixel per the unit on the height. Which should be the same as (very close to) the second last number divided by the width.

When generating my own xml/svg, I go with mils. 1000 px per inch. When the units for the part are specified in mm, and I do not have a GOOD reason to convert, I go with 100 px per mm. Those are just for convenience, because it becomes easy to calculate most of the coordinates, stroke, font sizes, etc. Anything in the images that corresponds to physical world dimensions.

If your part uses a filled shape, without a stroke, as a background over the whole area for the part, it needs to have a minimum coordinate of (0,0), and the viewBox extent will match the maximum coordinate in the shape. If the outer edge is using lines with a stroke instead, the minimum line coordinate needs to be 0.5 * the stroke width, and viewBox extent will be the maximum coordinate + 0.5 * times the stroke width. Of the specific svg elements at the edge of the image. The stroke width extends half its size each side of the specified coordinates, and that needs to be included in the viewBox extents, or the image gets trimmed on viewing. That includes stroke effects, like rounded ends on the lines. You need to watch text that gets close to the edges. It is very easy to get it truncated on viewing. It happens on Fritzing svg exports regularly, when labels are above or the the right of the top and right parts in the drawing.

When working with xml directly, I often manipulate the viewBox, height and width values. Adjusting them can zoom and pan the image to check details in the viewer program. Just be sure to reset them before using to create a Fritzing part. One simple trick, is to (temporarily) multiply the width and height by 10 or 100. That gives a 10 or 100 zoom on the image, which helps when the whole image is really less than an inch. The viewBox values specify the starting coordinate and extent (relative width and height) to display in whatever window is being used to view the image. Changing the first 2 pans the image, the second 2 zoom. Try to keep the aspect ratio (width/height) somewhat close to reality, or the view may not be what you expect.