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

इंटरनेट पर आप एसवीजी प्रारूप में चित्र बनाने के बारे में बहुत सारी जानकारी पा सकते हैं। डीएक्सएफ प्रारूप से एसवीजी के लिए अधिक बार किसी प्रकार के संपादक और निर्यात की पेशकश की जाती है। एसवीजी कोड के माध्यम से देखते हुए, आप तुरंत देख सकते हैं कि बहुत अधिक मात्रा में है। एक एसवीजी फ़ाइल एक संपादक में बनाई गई हमेशा दूसरे में सही ढंग से नहीं खुल सकती है। एक बात अच्छी है कि ब्राउज़रों ने एसवीजी प्रारूप का समर्थन करना शुरू कर दिया है। हर जगह वे एसवीजी का उपयोग करने के नुकसान के बारे में लिखते हैं। या शायद आपको चित्र प्रदर्शित करने के लिए फ़ाइल संरचना के समान नियमों का पालन करने की आवश्यकता है?

प्रयोगों और परीक्षणों से, ड्राइंग बनाते समय मैं निम्नलिखित नियमों पर आया:
- ड्राइंग के ऑब्जेक्ट मॉडल का उपयोग;
- माप की केवल एक इकाई (पिक्सेल में डिफ़ॉल्ट रूप से जो एक है) का उपयोग करें;
- सशर्त रूप से स्वीकार करें - एक पिक्सेल एक मिलीमीटर के बराबर है (ब्राउज़र के लिए यह पिक्सेल में होगा, और हमारे लिए मिमी में);
- तत्वों के विवरण का पैमाना हमेशा 1: 1 होता है;
- एक अलग पैमाने पर वस्तुओं को प्रदर्शित करने के लिए, एम्बेडेड svg ड्राइंग का उपयोग करें;
- विशिष्ट वस्तुओं के लिए हम एक विशिष्ट वर्ग के लिए आईडी सेट करते हैं;
- ...

ड्राइंग का ऑब्जेक्ट मॉडल।
सरलीकृत ड्राइंग को एक्सएमएल संरचना के रूप में वर्णित किया जा सकता है।

<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"> 

चौड़ाई = " 150 " ऊंचाई = " 162 " व्यूबॉक्स = "....... 600 648 " - मूल्यों का अनुपात शीट पर दृश्य प्रदर्शित करने के लिए पैमाने निर्धारित करता है।

उदाहरण के लिए, 10: 1 का एक पैमाना

 <svg id="View1" x="50" y="7" width="150" height="162" viewBox="-0.6 -5 15 16.2"> 

< defs > - यहाँ हम सभी आदिम दोहराए जाने वाले तत्वों का वर्णन करते हैं। मार्कर तत्व एसवीजी का उपयोग करते समय एक ख़ासियत देखी गई थी - < svg > टैग से स्केल पैरामीटर उस पर कार्य नहीं करते हैं, जो स्केल के साथ काम करना बहुत सरल करता है। (किस पैमाने पर विचार नहीं किए गए थे, आकार में तीर समान होना चाहिए)। लेकिन मार्कर तत्व में लाइन पर, वेक्टर-प्रभाव संपत्ति का पैरामीटर लागू नहीं होता है : गैर-स्केलिंग-स्ट्रोक; ।

< line class = "atr1" ... /> - CSS फ़ाइल में हम ग्राफिक आदिम के लिए लाइन शैलियों का वर्णन करते हैं। यह एक दया है कि प्रत्येक पैमाने के लिए इंटरनेट एक्सप्लोरर में आपको अपनी स्वयं की लाइन शैली (लाइन मोटाई और डॉट अंतराल) निर्दिष्ट करने की आवश्यकता होती है। एक नियम के रूप में, एक ही समय में ड्राइंग में सभी संभव पैमानों का उपयोग नहीं किया जाता है और यह केवल इस्तेमाल किए गए तराजू के लिए निर्धारित करने के लिए पर्याप्त है।
लाइन, सर्कल, पाथ, रेक्ट आदि तत्वों के लिए रेखा शैलियों के वर्णन का एक उदाहरण:

 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 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> 

बाहरी सीएसएस फ़ाइल के साथ डेमो ड्राइंग

विस्तार के साथ एक ड्राइंग फ़ाइल .svg डाउनलोड के लिए । सीएसएस शैलियों ड्राइंग फ़ाइल में हैं।

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

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