Drawings in SVG format. Part 5. - Draft Standard

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

To describe the drawing we will use the plugin jquery.svg.js . An introduction to the plugin can be found in the jQuery plugin article for using SVG graphics.
One of the tasks solved using a plugin is to minimize the description of the drawing. The description of the drawing will be in the form of a function and have the same object model as in SVG.
Abbreviated drawing description function example

function drawIntro(svg) { svg.configure({viewBox: '0 0 420 297'}, true); var defs = svg.defs(); /*   - Hatch */ /*  */ 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'}); /* ,  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'}); /* ,  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'}); /*      */ /*   ( ) */ 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}); /*   ( ) */ 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}); /*   / */ 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, ' '); svg.rect(Shtamp, 20, 5, 395, 287, {class_: 'line-type-1'}); svg.line(Shtamp, 230, 237, 415, 237, {class_: 'line-type-1'}); ... /*   - 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'}); ... /*   - 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'}); ... /*   - 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 a line in SVG format instead of

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

you can write the line in another way to minimize

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

then for the plugin such a trick does not win

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

Comparing the above examples of the line description, we come to the conclusion that using JavaScript we will not get a reduction in the code.
It is necessary to write a specialized plugin. In the drawings, the largest number of lines are in style 1 (main line), lines in style 2 (thin line) are more often included in dimensions and other complex objects. It is possible by default for lines with style 1 to omit the description, where the code will be of this type

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

I will give an example to describe the size
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 jquery.svg.js plugin function format

 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'}); 

in the format of the function of a specialized plugin

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

Demo using the jquery.svg.js plugin
Second demo
archive with test example 1
archive with test example 2

The first test case was created manually in the usual editor and contains about 300 elements, the second one was exported by the library from Compass-graph and contains more than 3000 elements. Files of the .DXF and .DWG formats were created by exporting from Compass Graph. All files in formats .SVG and .SVGZ perfectly open the latest version of the editor Inkscape .

Comparative table of file size in different formats

Format	Example 1, byte	Example 2, byte	CSS style file, byte
.CDW (Compass 9)	50,146	182,778	-
.DWG (Compass 9)	65 751	226,583	-
.DXF (Compass 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 plugin	23,012	267 897	4,589
.JS minimized, jquery.svg.js plugin	15,490	179 071	1,728
Raster file in .PNG format	51 970	57 384	-

')
Updated version of the article