Использование формата SVG для CAD систем.

[Vitek]

Может кто-то пытался создать OnLine CAD приложение (библиотеку)?
В Компас-график был формат KSF, его судьба как и DXF.
По сылке привожу пример чертежа в формате SVG - http://v.sytnik.lviv.ua/test/test.php
Для увеличения/уменьшения изображения используйте Ctrl +/Ctrl –

[GkmSoft]

Сейчас делаем сохранение в формат PDF (обычный 2D PDF, для 3D PDF у нас уже есть плагин - http://gkmsoft.ru/allcatalog/pdf3dkompas_plugin/ )

На самом деле внутри самого PDF используется векторный формат, который очень близок к SVG.

Так что может сделаем сразу и сохранение в SVG.

А как Вы отображаете SVG файлы в web? Специальные PHP библиотеки используете?

[Vitek]

А как Вы отображаете SVG файлы в web? Специальные PHP библиотеки используете?

Также как и HTML плюс использую стили CSS. Сейчас браузеры начали поддерживать SVG формат без дополнительных утилит. Ещё не полностью, но основной 2D есть с анимацией. Думаю 3D тоже не загорами. Всюду пишут про недостатки использования SVG (наследует недостатки XML). В ходе экспериментов и тестирования выработал правила структуры файла SVG для отображения чертежей в браузере. Чтобы преодолеть недостатки XML, пишу код на браузерном JavaScript, в ближайшее время выложу статью в блоге с примером такого же чертежа. Там используестя библиотека JQuery. Также накидываю черновик экспорта/импорта под Компас-графиком в формат SVG, если кого интерисует такая задача пишите.
Может когото интерисует задача создания Online(Offline) CAD системы без привязки к ОС клиента?

Ниже привожу фрагмент чертежа в формате SVG:
...
<!-- Рисование вида - ViewParam -->
  <svg x="40" y="20" width="300" height="300" viewBox="-50 -50 1150 1150" fill="none">
    <title>Вид 1</title>
    <line class="atr1" x1="0" y1="425" x2="500" y2="425"/>
    <line class="atr1" x1="0" y1="325" x2="0" y2="425"/>
    <line class="atr1" x1="0" y1="325" x2="250" y2="325"/>
    <line class="atr1" x1="140" y1="325" x2="190" y2="0"/>
    <line class="atr1" x1="190" y1="0" x2="310" y2="0"/>   
    <line class="atr1" x1="340" y1="350" x2="190" y2="350"/>
    <line class="atr1" x1="190" y1="350" x2="190" y2="390"/>
    <line class="atr1" x1="190" y1="390" x2="250" y2="390"/>
    <line class="atr1" x1="500" y1="325" x2="500" y2="425"/>
    <line class="atr1" x1="500" y1="325" x2="360" y2="325"/>
    <line class="atr1" x1="310" y1="0" x2="360" y2="325"/>
    <line class="atr1" x1="290" y1="0" x2="290" y2="350"/>
    <line class="atr1" x1="340" y1="425" x2="340" y2="350"/>
    <line class="atr3" x1="250" y1="450" x2="250" y2="-25"/>
    <line class="atr3" x1="50" y1="450" x2="50" y2="300"/>
    <line class="atr3" x1="450" y1="450" x2="450" y2="300"/>
    <line class="atr4" x1="210" y1="0" x2="210" y2="350"/>
    <line class="atr4" x1="160" y1="350" x2="190" y2="350"/>
    <line class="atr4" x1="160" y1="425" x2="160" y2="350"/>
    <line class="atr4" x1="25" y1="425" x2="25" y2="325"/>
    <line class="atr4" x1="75" y1="425" x2="75" y2="325"/>
    <line class="atr1" x1="425" y1="425" x2="425" y2="325"/>
    <line class="atr1" x1="475" y1="425" x2="475" y2="325"/>
   
    <path d="M475,325 L475,425 L500,425 L500,325 Z" fill="url(#hatch1_45)"/>
    <path d="M290,0 L290,350 L340,350 L340,425 L425,425 L425,325 L360,325 L310,0 Z" fill="url(#hatch1_45)"/>
  </svg>
<!-- Рисование вида - ViewParam -->
  <svg x="40" y="105" width="300" height="300" viewBox="-50 -300 1150 900" fill="none">
    <title>Вид 2</title>
    <circle class="atr1" cx="250" cy="0" r="40"/>
   <circle class="atr1" cx="250" cy="0" r="60"/>
   <circle class="atr1" cx="50" cy="0" r="25"/>
   <circle class="atr1" cx="450" cy="0" r="25"/>
   <line class="atr3" x1="50" y1="-30" x2="50" y2="30"/>
   <line class="atr3" x1="450" y1="-30" x2="450" y2="30"/>   
   <line class="atr3" x1="250" y1="-150" x2="250" y2="200"/>
   <line class="atr3" x1="170" y1="180" x2="330" y2="180"/>
   <line class="atr3" x1="-25" y1="0" x2="525" y2="0"/>   
   <line class="atr1" x1="27.5" y1="44.6514" x2="170" y2="116.457"/>
   <line class="atr1" x1="472.5" y1="44.6514" x2="330" y2="116.457"/>
   <line class="atr1" x1="27.5" y1="-44.6514" x2="187" y2="-125.024"/>
   <line class="atr1" x1="472.5" y1="-44.6514" x2="313" y2="-125.024"/>   
   <line class="atr1" x1="170" y1="180" x2="170" y2="116.457"/>
   <line class="atr1" x1="170" y1="180" x2="330" y2="180"/>
   <line class="atr1" x1="330" y1="180" x2="330" y2="116.457"/>
    <line class="atr1" x1="190" y1="180" x2="190" y2="67.0820"/>
    <line class="atr1" x1="310" y1="180" x2="310" y2="67.0820"/>   
   <path class="atr1" d="M187,-125.024 A140,140 0 0 1 313,-125.024"/>   
    <path class="atr1" d="M27.5,44.6514 A50,50 0 0 1 27.5,-44.6514"/>
   <path class="atr1" d="M472.5,44.6514 A50,50 0 0 0 472.5,-44.6514"/>
   <path class="atr1" d="M162.822,67.0820 A110,110 0 1 1 337.178,67.0820"/>
   <path class="atr1" d="M180.459,57.1320 A90,90 0 0 0 319.54,57.1320"/>
   <path class="atr2" d="M140,101.34 C144.696,86.7859 152.303,75.3664 162.822,67.0820
                                      C167.996,63.0066 174.363,58.9944 180.459,57.1320
                             C194.3626,52.8843 213.0561,57.1320 225.5589,67.0820
                             C232.5067,72.6114 241.8569,77.1221 250,77.9937
                             C263.3438,79.4220 275.9399,63.2633 290.0,60
                             C299.5142,57.7918 310.4253,54.6301 319.5409,57.1320
                             C325.7604,58.8390 332.0035,63.0066 337.1780,67.0820
                             C347.6966,75.3664 353.3294,89.2060 360,101.3405"/>
    <path d="M170,180 L170,116.4576 L140,101.3405
             C144.696,86.7859 152.303,75.3664 162.822,67.0820
             C167.996,63.0066 174.363,58.9944 180.459,57.1320
          A90,90 0 0 0 190,67.0820
          L190,180 Z" fill="url(#hatch1_45)"/>
    <path d="M310,180 L310,67.0820 A90,90 0 0 0 319.54,57.1320
             C325.7604,58.8390 332.0035,63.0066 337.1780,67.0820
            C347.6966,75.3664 353.3294,89.2060 360,101.3405
          L330,116.4576 L330,180 Z" fill="url(#hatch1_45)"/>         
    <g class="DimL">
      <line class="atr2" x1="190" y1="180" x2="190" y2="230"/>
      <line class="atr2" x1="310" y1="180" x2="310" y2="230"/>
      <line id="dim1" class="atr2" x1="190" y1="230" x2="310" y2="230" marker-start="url(#DimPoint1)" marker-end="url(#DimPoint2)"/>
      <text x="265" y="225" font-size="7mm" text-anchor="middle">120</text>
    </g>                            
    <g class="DimL">
      <line class="atr2" x1="170" y1="180" x2="170" y2="265"/>
      <line class="atr2" x1="330" y1="180" x2="330" y2="265"/>
      <line id="dim1" class="atr2" x1="170" y1="265" x2="330" y2="265" marker-start="url(#DimPoint1)" marker-end="url(#DimPoint2)"/>
      <text x="225" y="260" font-size="7mm" text-anchor="middle">160</text>
    </g>   
    <g class="DimL">
      <line class="atr2" x1="330" y1="180" x2="560" y2="180"/>
      <line class="atr2" x1="250" y1="-140" x2="560" y2="-140"/>
      <line id="dim1" class="atr2" x1="560" y1="180" x2="560" y2="-140" marker-start="url(#DimPoint1)" marker-end="url(#DimPoint2)"/>
      <text x="555" y="20" font-size="7mm" text-anchor="middle" transform="rotate(-90, 555, 20)">320</text>
    </g>
  </svg>
...

Описание стилей линий в CSS:
...
.atr1 {fill: none; stroke: blue; stroke-width: 2}/*основная */
.atr2 {fill: none; stroke: black; stroke-width: 1}/*тонкая */
.atr3 {fill: none; stroke: red; stroke-width: 1; stroke-dasharray: 60,20,10,20}/*осевая */
.atr4 {fill: none; stroke: black; stroke-width: 1; stroke-dasharray: 30}/*штриховая */
.atr5 {fill: none; stroke: black; stroke-width: 1}/*для линии обрыва */
.atr7 {fill: none; stroke: teal; stroke-width: 4}/*утолщеная */
.atr8 {fill: none; stroke: black; stroke-width: 1; stroke-dasharray: 60,20,10,20,10,20}/*пунктир 2 */
.atr9 {fill: none; stroke: blue; stroke-width: 2; stroke-dasharray: 40}/*штриховая осн. */
.atr10 {fill: none; stroke: blue; stroke-width: 2; stroke-dasharray: 10,20,60,20}/*осевая осн. */
.atr11 {fill: none; stroke: black; stroke-width: 0.7}/*тонкая */
...

[Vitek]

 
На сайте Хабрахабр, опубликовал первые две статьи на тему "Чертежи в SVG формате".
http://habrahabr.ru/post/184958/
http://habrahabr.ru/post/185268/

[Николай]

Не смог посмотреть на habrahabr коды в примерах, "код в SVG формате", в частности, дуг. Не открываются.
Жду, когда можно будет посмотреть экспорт/импорт под Компас-график в формат SVG.

[Sabahs]

Всё открывается.

[Николай]

Спасибо, видимо, что-то с Explorer' ом...

[Vitek]

Какая у Вас версия Explorera? Лучьше пользоваться 10 версией.
Если у Вас Windows XP то ставте Firefox или Chrome последнюю версию.

[GkmSoft]

Кстати, в SP1 для Kompas 14 появилась возможность сохранять чертежи в формат 2D PDF.

Насчет SVG (да и 2D PDF) - может имеет смысл сделать сервис для выкладывания в общий доступ таких чертежей (типа youtube),
с раздачей прав и т.п. ?

[Vitek]

Жду, когда можно будет посмотреть экспорт/импорт под Компас-график в формат SVG.

Для каких целей Вас интересует такая возможность?
Как только допишу плагин на JavaScript, постараюсь альфа версию выпустить.
Задача очень похожа на библиотеку Sabahs (Библиотека нахождения объектов).
Перебераеш все объекты подрят и записуеш в текстовый файл.
Подобную задачу делал ещё под Компас-график 4.х

[Sabahs]

Я пишу в бинарный, компактнее.

[Vitek]

В cлучае описания чертежа в виде функции JavaScript текстовый файл может выглядеть компактнее бинарного. Смотри приклеплённый файл, это не бинарный, а текстовый файл.

[Николай]

Vitek : для последующей работы, как с *.ksf файлом. Получение координат концов отрезков, значений радиусов окружностей и прочих данных и работы с ними. Не такую ли программу вы разрабатывали?

[Vitek]

Это было так давно, ещё под Компас-график 4.х работал с *.ksf

[Vitek]

Создал альфа версию (0.26.1) библиотеки экскорта из Компас-график 2D в SVG
Перечень предусмотреных возможностей:
Тип документа - чертёж стандартный или нестандартного формата.
Тип штампа - только тип 1.
На чертеже могут быть виды и слоя с указанием цвета, для вида можно задать масштаб.
Графические элементы:
- линии,
- дуги,
- окружности,
- точки,
- NURBS, (BEZIER - пока не поддерживается)
- линейный размер (с горизонтальной или вертикальной размерной линией)
- элипс,
- дуга элипса,
- прямоугольник,
- полилиния.

Настройки как для печати:
- чёрный (чёрно-белое)
- установленный для вида (используются цвет вида)
- установленный для слоя (используются цвет слоя)
- установленный для объекта (как обычно отображается в Компас-график)
Можно вывести всё тонкими линиями.

http://v.sytnik.lviv.ua/svglib/svglib.zip - ссылка для скачивания архива с:

Svglib.rtw - библиотека экспорта в SVG
Чертеж.cdw - тестовый чертёж
unnamet.svg - чертёж в SVG формате

[Sabahs]

А ссылка рабочая?

[Vitek]

рабочая, попробуй ещё раз
нет возможности прикрепить файл больше 200Кб

[Sabahs]

Дома попробую, сейчас всё равно не на чем проверять, 64-разрядный Компас.

[Vitek]

библиотека должна работать в Компас-график 9 и выше

[Николай]

Конвертировалась только рамка с угловым штампом. Линии не отобразились... Компас 9.