Pull to refresh

Чертежи в SVG формате. Часть 1 — Черновик стандарта

Reading time 4 min
Views 20K
В интернете можно найти много разной информации о создании чертежей в формате SVG. Чаще предлагается какой-то редактор и экспорт из формата DXF в SVG. Просматривая код SVG сразу видно что там много лишнего. Созданный в одном редакторе файл SVG не всегда может корректно открыться в другом. Одно радует, что браузеры начали поддерживать SVG формат. Всюду пишут про недостатки использования SVG. А может надо придерживаться единых правил структуры файла для отображения чертежей?

Из экспериментов и тестов пришёл к таким правилам при создании чертёжа:
— использование объектной модели чертежа;
— используем только одну единицу измерения (та что по умолчанию в пикcелях);
— условно принимаем — один пиксель равен одному миллиметру (для браузера будет в пикселях, а для нас в мм);
— масштаб описания элементов всегда 1:1;
— для отображения объектов в другом масштабе используем вложенный svg рисунок;
— для уникальных объектов задаём ID а для характерных Class;
— …

Объектная модель чертежа.
Упрощенно чертёж можно описать в виде XML структуры.
<svg id="Detail1" ...>
    <defs id="defsCAD"> ... </defs>
    <svg id="Shtamp" ... >
        ...
    </svg>
    <svg id="View1" ... >
        <line class="atr1" ... />
        <line class="atr1" ... />
        <circle class="atr1" ... />
        <path class="atr1" ... />
        <rect class="atr1" ... />
        <line class="atr2" ... />
        <line class="atr2" ... />
        <g class="dimL">
            <line class="atr2" ... />
            <line class="atr2" ... />
            <line class="atr2" ... />
            <text ... >...</text> 
        </g>
        ...
    </svg>
    <svg id="View2" ... >
        <line class="atr1" ... />
        ...
    </svg>
    <svg id="View3" ... > ... </svg>
</svg>

<svg> — тег используется для описания самого чертежа и встроенных видов, штампа и техтребований. Если необходимо использовать масштаб отличный от 1:1, то реализуется с помощью свойств тега.
Например масштаб 1:4:
<svg id="View1" x="50" y="7" width="150" height="162" viewBox="-25 -200 600 648">

width=«150» height=«162» viewBox="…… 600 648" — соотношение величин задаёт масштаб отображения вида на листе.

Например масштаб 10:1:
<svg id="View1" x="50" y="7" width="150" height="162" viewBox="-0.6 -5 15 16.2">

<defs> — здесь описываем все примитивные повторяющиеся элементы. Замечена одна особенность при использовании SVG элемента Marker — на него не действуют параметры масштаба из тега <svg> что на много упрощает работу с масштабом. (В каком масштабе виды не рисовались, стрелки в размерах должны быть одинаковые). Но на линии в элемента Marker не действует параметр свойства vector-effect: non-scaling-stroke;.

<line class=«atr1» .../> — в файле CSS описываем стили линий для графических примитивов. Жаль что в Internet Explorer для каждого масштаба необходимо указывать свой стиль линии(толщина линии и интервал пунктиров). Как правило в чертеже одновременно не используются все возможные масштабы и достаточно задать только для используемых масштабов.
Пример описания стилей линий для элементов line, circle, path, rect и др.:
line, rect, circle, ellipse, path, text {
  vector-effect: non-scaling-stroke;
}
/* основная */
.lt1 { fill: none; stroke: blue; stroke-width: 2;
}
/* тонкая */
.lt2 { fill: none; stroke: black; stroke-width: .7;
}
/* осевая */
.lt3 { fill: none; stroke: red; stroke-width: .7; stroke-dasharray: 25, 4, 3, 4;
}
/* штриховая */
.lt4 { fill: none; stroke: black; stroke-width: .7; stroke-dasharray: 7, 4;
}
/* основная для масштаба 0.25 */
.lt1_025 { fill: none; stroke: blue; stroke-width: 8;
}
/* тонкая для масштаба 0.25 */
.lt2_025 { stroke: black; stroke-width: 2.8;
}

<g class=«dimL»>...</g> — элементы описывающие объекты как размер группируем.
Пример:
...
<defs id="defsCAD">
<!-- Рисование стрелок и засечек - DimPoint -->
    <marker id="DimPoint1" viewBox="-2 -12 29 24" markerWidth="44" markerHeight="36" orient="auto">
        <path class="lt2_025" stroke="black" d="M0,0 L20,-4 16,0 20,4 z M0,-10 L0,10 M0,0 L27,0"/>
    </marker>
    <marker id="DimPoint2" viewBox="-27 -12 29 24" markerWidth="44" markerHeight="36" orient="auto">
        <path class="lt2_025" stroke="black" d="M0,0 L-20,-4 -16,0 -20,4 z M0,-10 L0,10 M0,0 L-27,0"/>
    </marker>
</defs>
...
    <g class="DimL">
        <line class="lt2" x1="190" y1="180" x2="190" y2="230"/>
        <line class="lt2" x1="310" y1="180" x2="310" y2="230"/>
        <line id="dim1" class="lt2" x1="190" y1="230" x2="310" y2="230" marker-start="url(#DimPoint1)" marker-end="url(#DimPoint2)"/>
        <text x="265" y="222" font-size="28" text-anchor="middle">120</text> 
    </g>
...

Есть одна особенность отображения графики в SVG. Если мы задали область и хотим по краю её нарисовать контур, то должны отступить на пол толщины линии иначе линии будут на половину тоньше. Например кода чёрной рамочки края чертежа.
<svg id="Shtamp" type="1" x="0" y="0" width="420" height="297" viewBox="0 0 420 297">
    ...
    <rect class="lt2" x="1" y="1" width="418" height="295"/>
   ....
</svg>

Демонстрационный пример чертежа с внешним файлом CSS

Файл чертежа с расширением .svg для скачивания. Стили CSS находятся в файле чертежа.

Обновляемая версия статьи

Чертежи в SVG формате. Часть 2 — Черновик стандарта
Tags:
Hubs:
+27
Comments 21
Comments Comments 21

Articles