कैसे svg प्रतीकों को बनाने के लिए जिसमें परिवर्तनीय रंग, स्ट्रोक रंग और स्ट्रोक चौड़ाई है?

Question

मैं Inkscape का उपयोग करके Qgis के लिए कुछ svg प्रतीक बनाना चाहता हूँ, उन प्रतीकों में प्रश्न में वर्णित विशेषताओं का होना आवश्यक है। पिछले दो दिनों से, मैं Sourcepole द्वारा निर्देश के रूप में प्रयोग कर रहा हूं और कुछ प्रतीकों की नकल करके आया हूं जो कि क्यूगिस के साथ बंडल किए गए हैं जो बिना किसी सफलता के वांछित गुण हैं।

अंत में मैंने प्रतीक के सबसे सरल रूप के साथ प्रयोग किया: मैंने एक svg बनाया जिसमें केवल Inkscape का एक चक्र होता है और इसे संशोधित करने का प्रयास किया जाता है।

मूल फ़ाइल ( Circle.svg ) में यह रेखा है:

<path
   sodipodi:type="arc"
   style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.01988637;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"

मैंने इसे संशोधित किया:

<path
   sodipodi:type="arc"
   style="fill:param(fill) #ffffff;fill-opacity:1;stroke:param(outline) #000000;stroke-width:param(stroke-width) 1.01988637;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"

Circle_modified.svg के रूप में सहेजा गया और इसे पॉइंट सिंबल के रूप में चुना गया, लेकिन Qgis एक ही समय में सभी तीन मापदंडों को नहीं बदल सका।

मैंने क्या गलत किया या अलग तरीके से करना चाहिए?

मेरा सिस्टम: Ubuntu 12.04 64 बिट पर Qgis 1.8.0, इंकस्केप 0.48, Gedit 3.4.1 टेक्स्ट एडिटर।

Answer 1

QGIS में परिवर्तनीय भराव रंग , स्ट्रोक रंग और स्ट्रोक चौड़ाई के साथ SVG प्रतीक बनाने के लिए , आपको इन 3 विशेषताओं के साथ पथ तत्व से शैली विशेषता को प्रतिस्थापित करना चाहिए :

• भर = "परम (भरें) # एफएफ"
• स्ट्रोक = "परम (रूपरेखा) # 000"
• स्ट्रोक-चौड़ाई = "परम (रूपरेखा-चौड़ाई) 1"

यदि आप नई एसवीजी फ़ाइल लिखने के बाद इंकस्केप का उपयोग कर रहे हैं, तो फ़ाइल को संपादित करें और पूरी पंक्ति को शैली के साथ भीख दें:

style="fill:#00a000;fill-opacity:1;stroke:#000000;stroke-width:1;(...)"

निम्नलिखित पंक्ति के साथ:

fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1"

Comments

जहाँ मैं QGIS में उन पंक्तियों को जोड़ूँ?

— newGIS

आप .svg फाइल को टेक्स्ट के एडिटर में खोलते हैं और फिर आप इस कोड को उसमें जोड़ सकते हैं।

— डिओगो कैरिबे

जवाब के लिए धन्यवाद! मुझे इसे बदलना पड़ा class="st3", न style="fill:#00a...कि fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1"मेरे लिए इसे काम करने के लिए। (मैंने इलस्ट्रेटर में svg बनाया।)

— हेनरिक

Answer 2

मैं यह भी करना चाहता हूं कि कल एसवीजी प्रतीकों को कैसे जोड़ा जाए , यह पता लगाने के बाद से वे सभी काले थे। Jgrocha द्वारा दिए गए जवाब काम करता है - मैं इसे वोट करना चाहता था लेकिन जीआईएस फोरम में शामिल होने के बाद, मुझे पहले कुछ प्रतिष्ठा प्राप्त करने की आवश्यकता है!

मुझे यह पृष्ठ भी मिला, जो उत्तर की पुष्टि करता है: SVG SYMBOLS IN QGIS with MODIFIABLE COLORS

मार्कर के रंगों को बदलने की संभावना के लिए, हमें भरने के रंग के लिए प्लेसहोल्डर्स (परम) (भरने) को जोड़ना होगा, आउटलाइन रंग के लिए 'परम (आउटलाइन)' और स्ट्रोक की चौड़ाई के लिए 'परम (आउटलाइन-चौड़ाई)'। ये प्लेसहोल्डर्स वैकल्पिक रूप से एक डिफ़ॉल्ट मूल्य के बाद हो सकते हैं:

<svg width="100%" height="100%">
  <rect fill="param(fill) #ff0000" stroke="param(outline) #00ff00" stroke-width="param(stroke-width) 10" width="100" height="100">
  </rect>
</svg>`

धन्यवाद!

Comments

जहाँ मैं QGIS में उन पंक्तियों को जोड़ूँ?

— newGIS

Answer 3

यह एसवीजी की मूल बातें के बारे में एक सरल जवाब देने के लायक लगता है ताकि सॉफ्टवेयर के आसपास की बारीकियों के बारे में यहां दिए गए विवरणों के साथ जा सके ...

एक SVG फाइल सिर्फ एक टेक्स्ट फाइल है। समाप्त होने वाली फ़ाइल .svg होगी लेकिन इसे टेक्स्ट एडिटर में खोला जा सकता है

एक साधारण svg फाइल कुछ इस तरह दिखती है:

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- This is a comment -->

<g id="group1">
<title>My group</title>
<rect id="rectangle1" height="29" width="27" y="50" x="57" stroke-width="1.5" stroke="#000" fill="#ff0"/>
<ellipse ry="17" rx="16" id="circle1" cy="64" cx="113.5" stroke-width="1.5" stroke="#999" fill="#aaa"/>
<path id="path1" d="m56.5,97l51.5,1l5,25l-29,-5l-27.5,-21z" stroke-width="1.5" stroke="#f00" fill="#fff"/>
</g>
</svg>

इसमें आप देख सकते हैं कि रंग मापदंडों द्वारा परिभाषित किए गए हैं (जहां डॉट्स 0-9 या वायुसेना के बीच वर्णों से बदल दिए गए हैं):

stroke=#...
fill=#...

और स्ट्रोक चौड़ाई द्वारा परिभाषित किया गया है

stroke-width="..."

निम्नलिखित को जोड़ा जा सकता है, टेक्स्ट एडिटर का उपयोग करते हुए, एसवीजी में जो भी परिभाषित मूल्य आप चुनते हैं, उसे बदलने के लिए ... क्यूजीआईएस द्वारा निर्धारित मूल्यों के लिए संभव है। क्यूजीआईएस 'परम (भरण)' के लिए एक मूल्य समझता है - और दूसरा 'परम (...)' मूल्य - जैसा कि ये स्वयं QGIS द्वारा निर्धारित किया गया है।

रंग भरें: fill="param(fill) #FFF"

रूपरेखा / लाइन रंग: stroke="param(outline) #000"

रूपरेखा / लाइन चौड़ाई: stroke-width="param(outline-width) 1"

अपारदर्शिता भरें: fill-opacity="param(fill-opacity)"

रूपरेखा / लाइन अपारदर्शिता: stroke-opacity="param(outline-opacity)"

ध्यान दें कि थोड़ा विषम स्थानों में 'परम (...)' मूल्यों का उपयोग करने से आपको रोकने के लिए कुछ भी नहीं है - इसलिए उदाहरण के लिए आप एक बिट में एक रंग भरने के लिए 'परम (भरण-अपारदर्शिता)' मूल्य का उपयोग कर सकते हैं। एसवीजी फ़ाइल, लेकिन एसवीजी के एक और बिट में एक स्ट्रोक / लाइन रंग।

QGIS कंपोज़र या स्टाइल सिंबल डायलॉग में SVG रंगों के लिए सेटिंग्स काफी स्पष्ट हैं। भराव और स्ट्रोक / लाइन अपारदर्शिता को रंग सेटिंग्स के हिस्से के रूप में सेट किया गया है। स्ट्रोक / लाइन चौड़ाई सेटिंग स्पष्ट है।

अंत में दो अंक

सबसे पहले, ध्यान दें कि एसवीजी में रहते हुए रंगों को इस तरह की विशेषताओं के संग्रह के रूप में परिभाषित करना मान्य है:

style="fill:none;fill-opacity:1;stroke:#000000;"

यह ठीक से काम करने के लिए प्रकट नहीं होता है यदि आप यहाँ वर्णित मापदंडों को शामिल कर रहे हैं।

दूसरा, जब Illustrator या Inkscape जैसे सॉफ़्टवेयर का उपयोग करते हुए बहुत सारे अतिरिक्त गुण इस सॉफ़्टवेयर द्वारा SVG पाठ में जोड़े जा सकते हैं। यदि आप जानते हैं कि आप क्या कर रहे हैं और एक एसवीजी की मूल बातें समझ लें क्योंकि यह अतिरिक्त पाठ से छुटकारा पाने पर जीवन को सरल बना सकता है। विशेष रूप से आप पा सकते हैं कि रंगों को आइटम द्वारा आइटम के बजाय शैलियों की परिभाषा के माध्यम से सेट किया जाता है।

Answer 4

मुझे भी यही समस्या थी लेकिन कुछ प्रयासों के बाद आखिरकार यह काम कर गया। मैं यहाँ प्रक्रिया लिख ​​रहा हूँ उम्मीद है कि यह कुछ मदद की होगी। मैंने एक साधारण सर्पिल स्याही बनाया और इसे svg के रूप में सहेजा। फिर मैंने इसे एक पाठ संपादक (जैसे नोटपैड ++) और प्रविष्टि "शैली" को मेरे svg कोड में दो बार खोला। इस चंक में पहले:

<linearGradient
   id="linearGradient6172"
   osb:paint="solid">
  <stop
     style="stop-color:#000000;stop-opacity:1;"
     offset="0"
     id="stop6174" />
</linearGradient>

और फिर यहाँ:

<path
   sodipodi:type="spiral"
   style="fill:none;fill-rule:nonzero;opacity:1;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:35;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round"
   id="path4686" />

Qgis में एक संपादन योग्य svg सर्पिल होने के लिए कोड को काम करने के लिए मैंने पहले कोड से पहली "शैली" प्रविष्टि को पूरी तरह से हटा दिया:

<linearGradient
   id="linearGradient6172"
   osb:paint="solid">
</linearGradient>

और दूसरे कोड चंक में दूसरी "स्टाइल" प्रविष्टि को निम्नानुसार प्रतिस्थापित करें:

<path
   sodipodi:type="spiral"
   fill="param(fill) #000" stroke="param(outline) #FFF" stroke-  width="param(outline-width) 1"
   id="path4686" />

# "000" और "# एफएफ" भरने के लिए दो डिफ़ॉल्ट रंग हैं और रूपरेखा जबकि "1" डिफ़ॉल्ट रूप से चौड़ाई है यदि अलग-अलग निर्दिष्ट नहीं है। इन परिवर्तनों को सहेजने के बाद आप svg को सही पथ में संग्रहीत कर सकते हैं, जो QGis द्वारा निर्दिष्ट किया गया है (संस्करण के आधार पर इसे सेटिंग्स में पाया जा सकता है -> विकल्प -> एसवीजी पथ)। अंत में आपकी नई svg ऑब्जेक्ट अन्य डिफ़ॉल्ट ऑब्जेक्ट्स के बीच दिखाई देगी और यह संपादन योग्य होगी।

आशा है कि यह मदद कर सकता है

Answer 5

मैं इस पर विस्तार करने जा रहा हूं क्योंकि इसे काम करने में मुझे थोड़ा समय लगा। अपना प्रतीक बनाएं और इसे इंक्सस्केप एसवीजी के रूप में सहेजें और टेक्स्ट एडिटर में खोलें। नीचे कोड ब्लॉक में आप देखेंगे; style = "fill: # 00a000; fill-opacity: 1; स्ट्रोक: # 000000; स्ट्रोक-चौड़ाई: 1: (...)" इस लाइन को बदलें; भर = "परम (भरें) # एफएफ" स्ट्रोक = "परम (रूपरेखा) # 000" स्ट्रोक-चौड़ाई = "परम (रूपरेखा-चौड़ाई) 1" मेरी एसवीजी फाइलों में स्टाइल लाइन हर इकाई या आकार में svg के लिए दिखाई देती है। उन पंक्तियों को बदलना मेरे काम नहीं आया; लेकिन यह एक Inkscape SVG पर नीचे काम कर रहा था। मैंने अपने समाधान और यहां के दिशा-निर्देशों को ऑप्टिमाइज्ड और प्लेन एसवीजी प्रारूपों पर आजमाया, लेकिन यह कारगर नहीं हुआ, आशा है कि इससे मदद मिलेगी। इंकस्केप 0.48, QGIS 2.12.0, नोटपैड ++

Answer 6

यह एक समस्या लगती है, अगर हम एक सटीक मूल्य का उपयोग करते हैं। हर बार जब हम विकल्प खोलते हैं, तो एसवीजी में रंग या स्ट्रोक के लिए एक अलग मूल्य रीसेट हो जाता है। यह उन्नत विकल्पों में एक मूल्य निर्धारित करके तय किया जा सकता है। मेरे परीक्षणों ने मुझे दिखाया, एसवीजी में fill="param(fill)"इसके बजाय उपयोग करना बेहतर होगा fill="param(fill) #FFF"।

एक और दिलचस्प वर्कअराउंड: यदि आपके पास अग्रभूमि और पृष्ठभूमि के रंग के साथ एक एसवीजी है, तो आप अपने भरण पृष्ठभूमि के रंग के रूप में स्ट्रोक रंग का उपयोग कर सकते हैं। ध्यान दें, तो आप पूरे एसवीजी के लिए एक अलग रूपरेखा रंग का उपयोग नहीं कर सकते।

Answer 7

आप सभी को धन्यवाद। यहाँ कुछ बेहतरीन सुझाव दिए गए हैं और उन्होंने मुझे सही दिशा में इंगित किया है, लेकिन किसी ने भी मेरे विशेष मुद्दे को संबोधित नहीं किया है, इसलिए मैं जोड़ दूंगा कि मैंने क्या किया। चूंकि हर मामले के लिए एक सही जवाब नहीं लगता है, मैं सबसे पहले आपके परिणामों के परीक्षण के लिए सुझाव देना चाहूंगा।

फास्ट एडिटिंग टेस्टिंग

• अस्थायी रूप से अपने सभी svg माउस को QGIS svg फ़ोल्डर से बाहर ले जाएँ।
• Svg फ़ाइल की एक प्रतिलिपि बनाएँ जिसे आप केवल पढ़ने के लिए काम करना चाहते हैं ताकि आप इसे अधिलेखित न करें और QGIS svg फ़ोल्डर में इसका संपादन योग्य संस्करण डालें।
• QGIS खोलें, साथ काम करने के लिए एक बिंदु परत लोड करें, परत गुण खोलें और "SVG मार्कर" चुनें।
• आप अतिरिक्त रूप से एक svg फ़ाइल पर राइट-क्लिक करना चाहते हैं और अस्थायी रूप से "Open with" प्रोग्राम को Notepad में सेट कर सकते हैं ताकि आप उन्हें Notepad में संपादित करने के लिए उन पर डबल-क्लिक कर सकें।

इस सेटअप के साथ आप तुरंत देख सकते हैं कि QGIS आपके संपादनों का जवाब कैसे देता है। नोटपैड में svg फ़ाइल को खुला छोड़ दें और गुण QGIS में खोलें। एक संपादन के परिणामों का परीक्षण करने के लिए, इसे नोटपैड में सहेजने और QGIS पर स्विच करने के लिए बस Ctrl + S दबाएं। Svg को पुनः लोड करने के लिए, प्रतीक परत प्रकार को किसी और चीज़ में बदलें, फिर इसे SVG मार्कर में बदलें। वहाँ भी केवल एक ही है ताकि आपको इसे खोजने में कोई परेशानी न हो। मैंने इस तरह के दर्जनों संपादन बहुत जल्दी किए। यदि आपको संपादन के बाद svg को वापस स्रोत के रूप में प्राप्त करने में कोई परेशानी है, तो आप इसे हटा सकते हैं और दूसरी प्रतिलिपि बना सकते हैं।

SVG Icon Editable बनाना

मेरे पास समस्या यह थी कि मैं जिस विशिष्ट आइकन पर काम कर रहा था, उसमें कहीं भी "शैली" या "भरण" शब्द नहीं थे, इसलिए मुझे यह पता लगाने में परेशानी थी कि पैरामीटर लाइन कहाँ रखी जाए। मार्टिना द्वारा बताई गई इंक्सस्केप ट्रिक ने इस समस्या को हल कर दिया लेकिन मेरे पास करने के लिए एक गुच्छा है और मैं इनक्सस्केप में प्रत्येक को खोलना और सहेजना नहीं चाहता था इसलिए मैंने परीक्षण और त्रुटि का प्रयास करने का फैसला किया। कोड को देखकर मैं देख सकता था कि संस्करण की जानकारी और मेटाडेटा शीर्ष पर था और आकार निर्देश नीचे उद्धरण चिह्नों में संलग्न थे जो शुरुआत में <g><path d=(कुछ है <g><g><path d=) और अंत में अंत में बंधे थे /></g></svg>। थोड़ा प्रयोग करने के बाद मुझे पता लगा कि पैरामीटर लाइन को pathऔर के बीच रखनाd=काम किया, लेकिन आइकन चयनकर्ता फलक में अदृश्य था और शीर्ष पर पूर्वावलोकन फलक में आइकन पूरी तरह से काले रंग में भरा हुआ था। लगता है कि अदृश्य आइकन मुद्दा बग हो गया है। मैंने इसे एक अपारदर्शिता पैरामीटर जोड़कर तय किया है जिसका मैं नीचे वर्णन करूंगा। यह पता चला कि काली भरण सिर्फ इसलिए था क्योंकि आइकन केवल 4 मिमी था और इसे केवल रूपरेखा द्वारा भरा गया था। इसे ठीक करने के लिए मैंने आइकन का आकार 10 मिमी (QGIS में) तक बढ़ा दिया और रूपरेखा को 0.1 (नोटपैड में) नीचे कर दिया।

सारांश

यदि आपके आइकन में कहीं भी "शैली" या "भरण" शब्द नहीं हैं, लेकिन इसमें यह रेखा है <g><path d=(या <g><g><path d=) आकृति निर्देशों से ठीक पहले आपको उपरोक्त पंक्ति को बदलकर संपादित मापदंडों को जोड़ने में सक्षम होना चाहिए<g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=

यदि सीमा बहुत मोटी है, तो आप अंतिम संख्या को कुछ अंश में बदलकर इसे छोटा कर सकते हैं <g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 0.5" d=

यदि आप अपना आइकन सेमीट्रांसपेरेंट बनाना चाहते हैं तो आप उपरोक्त लाइन को इस एक में बदलकर ऐसा कर सकते हैं <g><path style="opacity:0.5;fill:param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=। अपारदर्शिता मूल्य 1 (पूरी तरह से अपारदर्शी) से 0 (पूरी तरह से पारदर्शी) तक हो सकता है और आप अतिरिक्त सटीकता (जैसे 0.01) के लिए सौवें या हजारवें हिस्से का भी उपयोग कर सकते हैं। वही नियम सीमा मोटाई के लिए जाता है।

यदि आपके पास उन्हें संपादित करने के लिए बहुत सारे हैं, तो आप खोज को स्वचालित करने और प्रक्रिया को बदलने के लिए StackExchange पर यहां बैच फाइलें पा सकते हैं।