viklviv July 1, 2013 at 20:17

Drawings in SVG format. Part 2. - Standard draft

In “ Drawings in SVG format. Part 1 - Draft of the standard (updated) ”, an example of the object model of the drawing, setting the scale and line styles is given. In the sequel, we will consider drawing simple graphic objects from CAD systems.

Simple graphic objects.
The following simple graphic objects are used in CAD systems:
Point (marker)

code in SVG format

The template and display styles of the point we draw in the defs part of the drawing.

We draw a point in the drawing using the path tag . In the stroke-width property we set the inverse scale of the view, if the view scale is 1: 4, then for the point we specify the 4: 1 scale.

Line

code in SVG format

In the CSS file we describe the types of lines.

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

And in the drawing we use the line tag with the assignment to it of the line type class.

The line- tag property has the vector-effect property set to non-scaling-stroke . At any given scale for the view, the lines will be drawn with the same thickness.

Circle

code in SVG format

Line types are used as for the line tag from the CSS file.
And in the drawing we use the circle tag with the assignment of a line type class to it.

Ellipse

code in SVG format

Line types are used as for the line tag from the CSS file.
And in the drawing we use the ellipse tag with the assignment of a line type class to it.

Arc and ellipse arc

code in SVG format

Line types are used as for the line tag from the CSS file.
And in the drawing we use the path tag with the assignment of a line type class to it. In property d we set the parameters of the arc.

Rectangle

code in SVG format

Line types are used as for the line tag from the CSS file.
And in the drawing we use the rect tag with the assignment of a line type class to it.

Broken line

code in SVG format

Line types are used as for the line tag from the CSS file.
And in the drawing we use the rect tag with the assignment of a line type class to it.

NURBS curve (spline) -

code in SVG format

Line types are used as for the line tag from the CSS file.
And in the drawing we use the path tag with the assignment of a line type class to it.

Sample drawing An

updated version of the article

Drawings in SVG format. Part 3 - Standard Draft

Tags:

Drawings in SVG format. Part 2. - Standard draft

Also popular now: