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

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends: 'You Say What You Like, Because They Like What You Say' - http://www.medialens.org/index.php/alerts/alert-archive/alerts-2013/731-you-say-what-you-like-because-they-like-what-you-say.html