Drawings in SVG format. Part 5 - Draft Standard

Опубликовано пользователем admin

In "Drawings in SVG format. Part 4 - Draft Standard" is an example of drawing dimensions. In the continuation we consider the use of JavaScript and compare the drawing files in different formats.

For a description of the drawing will use the plugin jquery.svg.js. The introduction of the plug-in can read the article jQuery plugin for the use of SVG graphics
One of the tasks to be solved using the plugin - minimizing the description of the drawing. Drawing Description will be form of a function and have the same object model as in SVG.
Abbreviated example of a function describing the drawing

function drawIntro(svg) {
  svg.configure({viewBox: '0 0 420 297'}, true);  
  var defs = svg.defs();
/* Drawing hatch - Hatch */ 
/* metal */
  var hatch0_45 = svg.pattern(defs, 'hatch0_45', 0, 0, 20, 20, 
      0, 0, 20, 20, {patternUnits: 'userSpaceOnUse'});
    svg.line(hatch0_45, 1, 20, 20, 1, {class_: 'line-type-2'});
	svg.line(hatch0_45, 0, 1, 1, 0, {class_: 'line-type-2'});
/* metal, scale 0,25 */
  var hatch0_45_0_25 = svg.pattern(defs, 'hatch0_45-0_25', 0, 0, 20, 20, 
      0, 0, 20, 20, {patternUnits: 'userSpaceOnUse'});
    svg.line(hatch0_45_0_25, 1, 20, 20, 1, {class_: 'line-type-2-0_25'});
	svg.line(hatch0_45_0_25, 0, 1, 1, 0, {class_: 'line-type-2-0_25'});
/* not metal, scale 0,25 */
  var hatch1_45_0_25 = svg.pattern(defs, 'hatch1_45-0_25', 0, 0, 20, 20, 
      0, 0, 20, 20, {patternUnits: 'userSpaceOnUse'});
    svg.line(hatch1_45_0_25, 0, 20, 20, 0, {class_: 'line-type-2-0_25'});
	svg.line(hatch1_45_0_25, 0, 0, 20, 20, {class_: 'line-type-2-0_25'});
/* Templates drawing arrows and tick marks */
/* left arrow (the arrow inside) */
  var dimp1 = svg.marker(defs, 'dimArrow-1', 0, 0, 8, 6, 'auto', {viewBox: '-2 -12 29 24'});
	svg.path(dimp1, 'M0,0 L20,-4 16,0 20,4 z M0,-10 L0,10 M0,0 L27,0', {stroke: 'black', strokeWidth: 1.4});	
/* right arrow (the arrow on the outside) */
  var dimp2 = svg.marker(defs, 'dimArrow-2', 0, 0, 8, 6, 'auto', {viewBox: '-27 -12 29 24'});
	svg.path(dimp2, 'M0,0 L-20,-4 -16,0 -20,4 z M0,-10 L0,10 M0,0 L-27,0', {stroke: 'black', strokeWidth: 1.4});
/* arrow section line/cross section */
  var viewp3 = svg.marker(defs, 'ViewPoint', 0, 0, 10.6, 8.8, 'auto', {viewBox: '-2 -12 29 24'});
      svg.path(viewp3, 'M3,0 L23,-4 19,0 23,4 z', {stroke: 'black', strokeWidth: 1.4});
 
  svg.title('SVG for CAD');
  var Shtamp = svg.svg( 0, 0, 420, 297, 0, 0, 420, 297);
      svg.title(Shtamp, 'Stamp in the drawing');
      svg.rect(Shtamp, 20, 5, 395, 287, {class_: 'line-type-1'});
      svg.line(Shtamp, 230, 237, 415, 237, {class_: 'line-type-1'});
        ...
 
/* Drawing view - View1 */	
  var View1 = svg.svg( 45, 7, 155, 170, -25, -200, 620, 680);
      svg.title(View1, 'Вид 1');
      svg.line(View1, 0, 325, 500, 325, {class_: 'line-type-1-0_25'});
      svg.line(View1, 0, 225, 0, 325, {class_: 'line-type-1-0_25'});
        ...
 
/* Drawing view - View2 */	
  var View2 = svg.svg( 25, 158, 200, 130, -100, -250, 800, 520);
      svg.title(View2, 'Вид 2');
      svg.circle(View2, 250, 0, 40, {class_: 'line-type-1-0_25'});
      svg.circle(View2, 250, 0, 60, {class_: 'line-type-1-0_25'});
        ...
 
/* Drawing view - View3 */
  var View3 = svg.svg(250, 45, 150, 200, -50, -50, 600, 800);
      svg.title(View3, 'Вид 3');    
      svg.line(View3, 0, 325, 320, 325, {class_: 'line-type-1-0_25'});
      svg.line(View3, 0, 225, 30, 225, {class_: 'line-type-1-0_25'});
        ...
}

When describing line SVG format, instead

<line class="line-type-1" x1="475" y1="325" x2="475" y2="225"/>

line can be written in a different way to minimize

<path class="line-type-1" d="M475,325L475,225"/>

then for plug such trick does not give the win

svg.line(View1,247,237,247,292,{class_:'line-type-1'});
 
svg.path(View1,'M247,237L247,292',{class_:'line-type-1'});

Comparing the examples above describe the line, we arrive at the conclusion that the use of JavaScript, we do not get the reduction in code.
Need to write a specialized plug-in. In the drawings, the largest number of lines of style 1 (main line), 2-line style (thin line) often included in the dimensions and other complex objects. Can the default style for lines 1 omit the description of where the code will be of this type

svg.line(View1,247,237,247,292);

Will give an example to describe the dimension
in SVG format

<g class="DimL">
  <line class="line-type-2-0_25" x1="190" y1="180" x2="190" y2="230"/>
  <line class="line-type-2-0_25" x1="310" y1="180" x2="310" y2="230"/>
  <line class="line-type-2-0_25" x1="190" y1="230" x2="310" y2="230"/>
  <path stroke-width="4" d="M190,230L310,230" marker-start="url(#dimArrow-1)" marker-end="url(#dimArrow-2)"/>
  <text class="styles-3" x="265" y="222" font-size="28" text-anchor="middle">120</text> 
</g>

in the format plugin function

var dimL1 = svg.group(View2);
  svg.line(dimL1, 190, 180, 190, 230, {class_: 'line-type-2-0_25'});
  svg.line(dimL1, 310, 180, 310, 230, {class_: 'line-type-2-0_25'});
  svg.line(dimL1, 190, 230, 310, 230, {class_: 'line-type-2-0_25'});
  svg.path(dimL1, 'M190,230 L310,230', {strokeWidth: 4, markerStart: 'url(#dimArrow-1)', markerEnd: 'url(#dimArrow-2)'});
  svg.text(dimL1, 265, 222, '120', {class_: 'styles-3', fontSize: '28', textAnchor: 'middle'});

to the format function of specialized plug-in

var dimText = [0, 0, '120'];
var dimDrawing = [0, [190,180,'dimArrow-1'],[310,180,'dimArrow-2'],[0,50,1]];
svg.diml(View2, dimDrawing, dimText);

A demo using the plugin jquery.svg.js
The second demo
archive with the test example 1
archive with the test example 2

The first test example created manually in the usual editor, and contains about 300 items, the second export the library of Compass-graphic and contains more than 3,000 items. The files formats .DXF and .DWG created export of Compass-graphic. All files in the formats .SVG and .SVGZ perfectly open the latest version of the editor Inkscape.

Comparative table of the file size in different formats

Format Example of 1, byte Example of 2, byte CSS stylesheet, byte
.CDW (Compass-graphic 9) 50 146 182 778 -
.DWG (Compass-graphic 9) 65 751 226 583 -
.DXF (Compass-graphic 9) 182 817 807 300 -
.SVG 29 110 306 678 -
.SVG minimized - 175 671 -
.SVGZ 5 435 55 763 -
.SVGZ minimized - 32 784 -
.JS, плагин jquery.svg.js 23 012 267 897 4 589
.JS minimized, плагин jquery.svg.js 15 490 179 071 1 728
Bitmap file, format .PNG 51 970 57 384 -

Tags: