Drawings in SVG format. Part 1 - Draft Standard

On the Internet you can find a lot of different information about creating drawings in SVG format. More often some kind of editor is offered and export from DXF format to SVG. Looking through the SVG code, you can immediately see that there is a lot of excess. A SVG file created in one editor cannot always correctly open in another. One is pleased that browsers have started to support SVG format. Everywhere they write about the disadvantages of using SVG. Or maybe you need to follow the same rules for the structure of the file to display drawings?

From experiments and tests I came to the following rules when creating a drawing:
- use of the object model of the drawing;
- use only one unit of measurement (the one that is by default in pixels);
- conditionally accept - one pixel is equal to one millimeter (for the browser it will be in pixels, and for us in mm);
- the scale of the description of the elements is always 1: 1;
- to display objects in a different scale, use the nested svg image;
- for unique objects we set ID and for characteristic Class;
- ...

The object model of the drawing.
Simplified drawing can be described as an XML structure.

<svg id="Detail1" ...> <defs id="defsCAD"> ... </defs> <svg id="Shtamp" ... > ... </svg> <svg id="View1" ... > <line class="atr1" ... /> <line class="atr1" ... /> <circle class="atr1" ... /> <path class="atr1" ... /> <rect class="atr1" ... /> <line class="atr2" ... /> <line class="atr2" ... /> <g class="dimL"> <line class="atr2" ... /> <line class="atr2" ... /> <line class="atr2" ... /> <text ... >...</text> </g> ... </svg> <svg id="View2" ... > <line class="atr1" ... /> ... </svg> <svg id="View3" ... > ... </svg> </svg> 

< svg > - the tag is used to describe the drawing itself and the embedded views, stamp and technical requirements. If you need to use a scale other than 1: 1, then it is implemented using the properties of the tag.
For example, a scale of 1: 4:

 <svg id="View1" x="50" y="7" width="150" height="162" viewBox="-25 -200 600 648"> 

width = " 150 " height = " 162 " viewBox = "... 600648" - the ratio of values ​​sets the scale for displaying the view on the sheet.
')
For example, a scale of 10: 1:

 <svg id="View1" x="50" y="7" width="150" height="162" viewBox="-0.6 -5 15 16.2"> 

< defs > - here we describe all primitive repeating elements. One feature was noticed when using the Marker SVG element - it is not affected by the scale parameters from the < svg > tag, which greatly simplifies working with the scale. (At what scale the species were not drawn, the arrows in size should be the same). But the vector-effect property parameter does not affect the line in the Marker element : non-scaling-stroke; .

< line class = "atr1" ... /> - in the CSS file we describe line styles for graphic primitives. It is a pity that in Internet Explorer for each scale, you must specify your own line style (line thickness and dotted interval). As a rule, in the drawing all possible scales are not used at the same time and it is enough to specify only for the scales used.
An example of the description of line styles for the elements line, circle, path, rect, etc .:

 line, rect, circle, ellipse, path, text { vector-effect: non-scaling-stroke; } /*  */ .lt1 { fill: none; stroke: blue; stroke-width: 2; } /*  */ .lt2 { fill: none; stroke: black; stroke-width: .7; } /*  */ .lt3 { fill: none; stroke: red; stroke-width: .7; stroke-dasharray: 25, 4, 3, 4; } /*  */ .lt4 { fill: none; stroke: black; stroke-width: .7; stroke-dasharray: 7, 4; } /*    0.25 */ .lt1_025 { fill: none; stroke: blue; stroke-width: 8; } /*    0.25 */ .lt2_025 { stroke: black; stroke-width: 2.8; } 

< g class = "dimL"> ... </ g > - elements describing objects as size are grouped.
Example:

 ... <defs id="defsCAD"> <!--     - DimPoint --> <marker id="DimPoint1" viewBox="-2 -12 29 24" markerWidth="44" markerHeight="36" orient="auto"> <path class="lt2_025" stroke="black" d="M0,0 L20,-4 16,0 20,4 z M0,-10 L0,10 M0,0 L27,0"/> </marker> <marker id="DimPoint2" viewBox="-27 -12 29 24" markerWidth="44" markerHeight="36" orient="auto"> <path class="lt2_025" stroke="black" d="M0,0 L-20,-4 -16,0 -20,4 z M0,-10 L0,10 M0,0 L-27,0"/> </marker> </defs> ... <g class="DimL"> <line class="lt2" x1="190" y1="180" x2="190" y2="230"/> <line class="lt2" x1="310" y1="180" x2="310" y2="230"/> <line id="dim1" class="lt2" x1="190" y1="230" x2="310" y2="230" marker-start="url(#DimPoint1)" marker-end="url(#DimPoint2)"/> <text x="265" y="222" font-size="28" text-anchor="middle">120</text> </g> ... 

There is one feature of displaying graphics in SVG. If we set a region and want to draw a contour along its edge, we have to retreat the line thickness to the floor, otherwise the lines will be half thinner. For example, the black border code of the drawing edge.

 <svg id="Shtamp" type="1" x="0" y="0" width="420" height="297" viewBox="0 0 420 297"> ... <rect class="lt2" x="1" y="1" width="418" height="295"/> .... </svg> 

Sample drawing with external CSS file

A drawing file with a .svg extension for download . CSS styles are in the drawing file.

Updated version of the article

Drawings in SVG format. Part 2 - Draft Standard