User Tools

Site Tools


cs:svg_icons

go back

What is page about

The .svg format allows to store a picture keeping its vectors information. Here we speak how to make .svg files starting from the cad program Qcad. The process is simple, but there are few subtleties one has to be aware about.

The final objective is to have a .svg file of the original Qcad drawing where each Qcad unit is a Svg pixel.

Qcad

In this page we assume your drawing uses the millimeters as unit of measure for millimeters are the unit Inkscape assumes.

Create a “drawing area” starting from the origin (coordinate 0,0) and going top right. When drawing there is the first consideration to keep track of: Inkscape will scale the drawing assuming 96 pixels for inch. This bizarre number has origin in the typography and has been decided by the World Wide Web Consortium for CSS; for us it means that line thickness must be scaled.

  25.4/96 -> 0.2645833

Qcad line thicknesses are limited by the dxf format and Inkscape only consider the style directly applied to the lines not the layer default. Here is how to get 1, 2, or 3 pixels-wide lines:

Qcad thickness Resulting .svg
layer default 1px
0.53mm 2px
0.80mm 3px
1.06mm 4px

Keep the “drawing area” rectangle to the widest pen you need (e.g., 0.80mm), this will make the next step easier.

Text

Qcad has several ways to align the text from the placing point. But Inkscape understands only Bottom Left.

Inkscape

Inkscape, when opening .dxf files, asks for the scaling factor. Use the value from the CSS of 96 pixels for inch. Immediately save your work as .svg file, otherwise you risk to save as .dxf adding unwanted effect to the Qcad file.

Document Properties (File menu, or Shift + Ctrl + d allows to set up the correct document size. Use resize page to content putting as margin half the wideness of the drawing area line negative (e.g., for 0.80mm, put -1.5pixels).

Inkscape puts the name of the layers in the final .svg file g tags; so it is possible to locate the layers and reorder with a simple text editor. Just move the g tag remembering that the lines are drawn in the order they appear in the file, so the last tag will appear on everything else.

svgcleaner

Svgcleaner is a little program to minimize .svg files. This step is the last thing to do before using the .svg file on the web; the result file is just for display. To edit keeps the previous two. You can manually edit the resulting file to adjust strange numbers.

cs/svg_icons.txt · Last modified: 2020/07/21 08:28 by paolo_bolzoni