Чертежи в SVG формате. Часть 5. — Черновик стандарта (обновляется)

В "Чертежи в SVG формате. Часть 4 — Черновик стандарта (обновляется)" приведён пример рисования размеров. В продолжении рассмотрим использование JavaScript и сравним файлы чертежей в разных форматах.

Для описания чертежа будем использовать плагин jquery.svg.js. Введение о плагине можете прочитать в статье jQuery plugin для использования SVG графики
Одной из решаемых задач использование плагина — минимизация описания чертежа. Описание чертежа будет в виде функции и иметь такую же объектную модель как и в SVG.
Сокращённый пример функции описания чертежа

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

При описании линии в SVG формате вместо

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

можно записать линию в другом виде для минимизации

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

то для плагина такой трюк не даёт выигрыша

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

Сравнив выше приведенные примеры описания линии, придём к выводу что использование JavaScript мы не получим уменьшение кода.
Необходимо написание специализированного плагина. В чертежах наибольшее количество линий стилем 1 (основная линия), линии стилем 2 (тонкая линия) чаще входит в состав размеров и др. сложных объектов. Можно по умолчанию для линий стилем 1 опускать описание, где код будет такого вида

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

Приведу пример для описания размера
в SVG формате

<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> 

в формате функции плагина jquery.svg.js

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

в формате функции специализированного плагина

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

Демонстрационный пример использования плагина jquery.svg.js
Второй демонстрационный пример
архив с тестовым примером 1
архив с тестовым примером 2

Первый тестовый пример создавался вручную в обычном редакторе и содержит около 300 элементов, второй экспортировался библиотекой из Компас-график и содержит более 3000 элементов. Файлы форматов .DXF и .DWG создавались экспортом из Компас-график. Все файлы в форматах .SVG и .SVGZ прекрасно открываются последней версией редактора Inkscape.

Сравнительная таблица размера файла в разных форматах

Формат	Пример 1, байт	Пример 2, байт	файл стилей CSS, байт
.CDW (Компас-график 9)	50 146	182 778	—
.DWG (Компас-график 9)	65 751	226 583	—
.DXF (Компас-график 9)	182 817	807 300	—
.SVG	29 110	306 678	—
.SVG минимизированный	—	175 671	—
.SVGZ	5 435	55 763	—
.SVGZ минимизированный	—	32 784	—
.JS, плагин jquery.svg.js	22 987	267 897	4 589
.JS минимизированный, плагин jquery.svg.js	15 490	179 050	1 728
Растровый файл в формате .PNG	51 970	57 384	—