Чертежи в 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.

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

Автор: viklviv

Источник