cs:svg_icons
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
cs:svg_icons [2020/05/26 01:20] paolo_bolzoni created |
cs:svg_icons [2020/07/21 08:28] (current) paolo_bolzoni m |
||
|---|---|---|---|
| Line 14: | Line 14: | ||
| 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. | 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.2645833333333333 | + | 25.4/96 -> 0.2645833 |
| - | So if you want a 2-pixel thick line you have to select 0.53 (twice the previous number rounded) thickness. Apparently the .dxf format is aware of this as the usual thickness are available. Besides, Qcad allows [[https://qcad.org/en/tutorial-custom-lineweights|arbitrary thicknesses]] for polylines if needed. | + | 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: |
| - | Before the next step you probably want to remove or hide the drawing area rectangle. | + | ^ 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 ===== | ||
| - | Inkscape can open .dxf formats, but it asks for the scaling factor. Use the one 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. | + | 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. |
| - | In Document Properties (File menu, or //Shift + Ctrl + d// allows to set up the correct document size. Resize page to content is a good start. | + | 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). |
| - | Aside to convert to .svg Inkscape is for coloring or other less technical steps. | + | 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 ===== | ||
| - | [[Svgcleaner|https://github.com/RazrFalcon/SVGCleaner]] is a little program to minimize you .svg file. 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 even manually edit the resulting file to adjust strange numbers. | + | [[https://github.com/RazrFalcon/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.1590456049.txt.gz · Last modified: 2020/05/26 01:20 by paolo_bolzoni
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
