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. Often an editor is used to open an DXF and export as SVG. Looking through the SVG code it is immediately obvious that there is a lot of excess. An SVG file created in one editor may not always be correctly rendered in another. One happy that browsers started to support the SVG format. Everywhere they write about the disadvantages of using SVG. Perhaps it is necessary to adhere to common rules of the file to display the drawings?

From the experiments and tests have come to these rules when creating a drawing:

•   The use of the object model of the drawing;
•   Use only one unit (the one that the default pikcelyah);
•   Conditionally accept - a pixel is equal to one millimeter (the browser is in pixels, and for us in mm);
•   The scale description of the elements is always 1:1;
•   To display the objects in a different scale using a nested svg drawing;
•   For the unique object ID and ask for the typical Class;
•   ...   

The object model drawing.

Simplified drawing can be described as an XML structure.

<svg id="Detail1" ...>
    <defs id="defsCAD"> ... </defs>
    <svg id="Shtamp" name="Frame drawing" ... >
        ...
    </svg>
    <svg id="View1" ... >
        <g id="layer-0" name="System layer" ...>
            <line class="line-type-1" ... />
            <line class="line-type-1" ... />
            <circle class="line-type-1" ... />
            <path class="line-type-1" ... />
            <rect class="line-type-1" ... />
            <line class="line-type-2" ... />
            <line class="line-type-2" ... />
            <g class="dimL">
                <line class="line-type-2" ... />
                <line class="line-type-2" ... />
                <line class="line-type-2" ... />
                <text ... >...</text> 
            </g>
            ...
        </g>
        <g id="layer-1" name="Layer 1" ...>
            ...
        </g>
    </svg>
    <svg id="View2" ... >
        <line class="line-type-1" ... />
        ...
    </svg>
    <svg id="View3" ... > ... </svg>
</svg>

<svg> - tag is used to describe the drawing itself, and built-in forms, the frame drawing and technical requirements. If you want to use a different scale from 1:1, then implemented using tag properties.

For example the scale 1:4

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

width=«150» height=«162» viewBox="…… 600 648" — magnitude relationship sets the display scale view on the sheet. 

 For example the scale 10:1

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

<defs> - describe here all the primitive repeating elements. Seen one feature when using SVG element Marker - it does not apply the zoom of the tag <svg> which is much easier to work with the scale. (At any scale, in the form of arrows in size must be the same). But on the line item Marker are not affected by the properties vector-effect: non-scaling-stroke;.

<line class="atr1" .../> - in the CSS file to describe the line style of graphics primitives. It is a pity that in Internet Explorer for each scale to indicate their style of line (line width and spacing dotted lines). Typically in a drawing at the same time does not use all the possible scale and sufficient to specify only used scales.

 Example description of line styles for elements of line, circle, path, rect, etc.: 

line, rect, circle, ellipse, path, text {
  vector-effect: non-scaling-stroke;
}
/* main line */
.line-type-1 { fill: none; stroke: blue; stroke-width: 2;
}
/* hairline */
.line-type-2 { fill: none; stroke: black; stroke-width: .7;
}
/* axial */
.line-type-3 { fill: none; stroke: red; stroke-width: .7; stroke-dasharray: 25, 4, 3, 4;
}
/* dashed */
.line-type-4 { fill: none; stroke: black; stroke-width: .7; stroke-dasharray: 7, 4;
}
/* main line for the scale 0.25 */
.line-type-1_025 { fill: none; stroke: blue; stroke-width: 8;
}
/* hairline for the scale 0.25 */
.line-type-2_025 { stroke: black; stroke-width: 2.8;
}

 <g class="dimL">...</g> - elements which describe the dimension of grouping objects.
Example: 

...
<defs id="defsCAD">
<!-- Draw arrows and tick marks -->
    <marker id="dimArrow-1" viewBox="-2 -12 29 24" markerWidth="44" markerHeight="36" orient="auto">
        <path class="line-type-2_025" stroke="black" d="M0,0 L20,-4 16,0 20,4 z M0,-10 L0,10 M0,0 L27,0"/>
    </marker>
    <marker id="dimArrow-2" viewBox="-27 -12 29 24" markerWidth="44" markerHeight="36" orient="auto">
        <path class="line-type-2_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="line-type-2" x1="190" y1="180" x2="190" y2="230"/>
        <line class="line-type-2" x1="310" y1="180" x2="310" y2="230"/>
        <line id="dim1" class="line-type-2" x1="190" y1="230" x2="310" y2="230" marker-start="url(#dimArrow-1)" marker-end="url(#dimArrow-2)"/>
        <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 the area and want to paint it on the edge of the loop, we should pull back on the floor line thickness otherwise the lines will be half thinner. For example code black frames edge drawing.   

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

 Demo of the drawing to an external CSS file 

 google.com/+ВиталийСитник