एसवीजी प्रारूप में चित्र। भाग 5. - ड्राफ्ट मानक

" एसवीजी प्रारूप में चित्र। भाग 4 - मसौदा मानक " में, ड्राइंग आयामों का एक उदाहरण दिया गया है। अगली कड़ी में, जावास्क्रिप्ट के उपयोग पर विचार करें और विभिन्न स्वरूपों में ड्राइंग फ़ाइलों की तुलना करें।

हम ड्राइंग का वर्णन करने के लिए jquery.svg.js प्लगइन का उपयोग करेंगे। आप SVG ग्राफिक्स का उपयोग करने के लिए jQuery प्लगइन लेख में प्लगइन के बारे में परिचय पढ़ सकते हैं
प्लगइन का उपयोग करके हल किए जाने वाले कार्यों में से एक ड्राइंग के विवरण को कम करना है। ड्राइंग का वर्णन एक फ़ंक्शन के रूप में होगा और इसमें एसवीजी के समान ऑब्जेक्ट मॉडल होगा।
ड्राइंग विवरण फ़ंक्शन का एक छोटा उदाहरण

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

लाइन विवरण के उपरोक्त उदाहरणों की तुलना करते हुए, हम निष्कर्ष निकालते हैं कि जावास्क्रिप्ट का उपयोग करके हमें कोड में कमी नहीं मिलेगी।
एक विशेष प्लगइन लिखना आवश्यक है। रेखाचित्रों में, शैली 1 (मुख्य रेखा) के साथ रेखाओं की सबसे बड़ी संख्या, शैली 2 (पतली रेखा) वाली पंक्तियों को अक्सर आकार और अन्य जटिल वस्तुओं की संरचना में शामिल किया जाता है। आप शैली 1 के साथ लाइनों के लिए डिफ़ॉल्ट रूप से वर्णन को छोड़ सकते हैं, जहां कोड इस तरह का होगा

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

मैं आकार का वर्णन करने के लिए एक उदाहरण दूंगा
एसवीजी प्रारूप में

 <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 को कंपास-चार्ट से निर्यात करके बनाया गया था। InScape के नवीनतम संस्करण के साथ .SVG और .SVGZ प्रारूप में सभी फाइलें पूरी तरह से खुलती हैं।

विभिन्न स्वरूपों में फ़ाइल आकार की तुलना तालिका

प्रारूप	उदाहरण 1, बाइट	उदाहरण 2, बाइट	सीएसएस शैली फ़ाइल, बाइट्स
.CDW (कम्पास ग्राफ 9)	50 146	१२ 22	-
.DWG (कम्पास ग्राफ 9)	65 751	226 583	-
.DXF (कम्पास ग्राफ 9)	१२ 8१ 8	807 300	-
.SVG	29 110	३०६ ६6 6	-
.SVG कम से कम	-	175 671	-
.SVGZ	5435	55,763	-
.SVGZ कम से कम	-	32784	-
.JS, jquery.svg.js प्लगइन	२३ ० १२	267 897	४ ५ 4 ९
.JS छोटा, jquery.svg.js प्लगइन	15490	179,071	1728
.PNG प्रारूप में रेखापुंज फ़ाइल	51 970	57 384	-

लेख का अद्यतन संस्करण