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;
}
.line-type-1 { fill: none; stroke: blue; stroke-width: 2;
}
.line-type-2 { fill: none; stroke: black; stroke-width: .7;
}
.line-type-3 { fill: none; stroke: red; stroke-width: .7; stroke-dasharray: 25, 4, 3, 4;
}
.line-type-4 { fill: none; stroke: black; stroke-width: .7; stroke-dasharray: 7, 4;
}
.line-type-1_025 { fill: none; stroke: blue; stroke-width: 8;
}
.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">
<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/+ВиталийСитник