Drawings in SVG format. Part 2 - Draft Standard

In "Drawings in SVG format. Part 1 - Draft Standard" is an example of the object model of the drawing, reference scale and line styles. In the sequel we consider drawing simple graphics from CAD systems.

Simple graphics.
In CAD ​​systems use the following simple graphic objects:

The point (marker)

Template and the styles we draw a point in defs of the figure.

<marker id="Point0" viewBox="-10 -10 20 20" markerWidth="5" markerHeight="5">
     <path d="M-3,0 L0,-3 3,0 0,3 z" stroke="red" fill="none"/>
</marker>

We derive a point in the drawing with the tag path. In the property stroke-width ask the inverse scale view if the view scale 1:4, then the dot indicates the scale of 4:1.

<path stroke-width="4" d="M50,35" marker-end="url(#Point0)"/>

Line

In the CSS file describes the types of lines.

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;}
...

And in the drawing using the tag line on awarding the class type of line.

<line class="line-type-1" x1="0" y1="0" x2="500" y2="0"/>

Tag line property is set vector-effect with a value non-scaling-stroke. At any given scale lines are drawn with a uniform thickness.
Line can be written in a different way to minimize code.

<path class="line-type-1" d="M0,0L500,0"/>

Circle

Types of lines for use as a tag line of the CSS file.
In the drawing, use the tag circle on awarding the class type of the line.

<circle class="line-type-1" cx="165" cy="25" r="125"/>

Ellipse

Types of lines for use as a tag line of the CSS file.
In the drawing, use the tag ellipse on awarding the class type of the line.

<ellipse class="line-type-3" cx="120" cy="280" rx="100" ry="50"/>

The arc and the arc of the ellipse

Types of lines for use as a tag line of the CSS file.
And in the drawing using the tag path on awarding the class type of the line. In the property d sets parameters of the arc.

<path class="line-type-2" d="M50,50 A140,140 0 0 1 200,350"/>	
<path class="line-type-3" d="M20,150 A20,40 0 0 1 130,50"/>

Rectangle

Types of lines for use as a tag line of the CSS file.
And in the drawing using the tag rect on awarding the class type of the line.

<rect class="line-type-1" x="20" y="5" width="395" height="287"/>

Polyline

Types of lines for use as a tag line of the CSS file.
And in the drawing using the tag polyline on awarding the class type of the line.

<polyline class="line-type-7" points="20,250 50,250 60,300 80,120 120,140 200,180"/>

NURBS curve

Types of lines for use as a tag line of the CSS file.
And in the drawing using the tag path on awarding the class type of the line.

<path class="line-type-2" d="M140,201.34 C144.696,186.7859 152.303,175.3664 162.822,167.0820
    C167.996,163.0066 174.363,158.9944 180.459,157.132
    C194.3626,152.8843 213.0561,157.132 225.5589,167.082
    C232.5067,172.6114 241.8569,177.1221 250,177.9937
    C263.3438,179.4220 275.9399,163.2633 290.0,160
    C299.5142,157.7918 310.4253,154.6301 319.5409,157.132
    C325.7604,158.8390 332.0035,163.0066 337.1780,167.082
    C347.6966,175.3664 353.3294,189.206 360,201.3405"/>

Demo of the drawing

Tags: 

1 Comment