html5 - एसवीजी फ़ाइल से एसवीजी पथ बनाने के लिए कोई उपकरण है?




svg adobe-illustrator (4)

क्या किसी को ऐसे टूल के बारे में पता है जो एक एसवीजी फ़ाइल ले सकता है, और इसे एक HTML 5 एसवीजी पथ में परिवर्तित कर सकता है? आप जानते हैं, d="M 0 0 L 20 134 L 233 24 Z" fill="#99dd79" भाग?

मैं यहां प्रमुख हूं: "स्थानांतरित करें" आदेशों का उपयोग करके एसवीजी पथ बनाने के लिए एडोब इलस्ट्रेटर का उपयोग करें

लेकिन पक्का नहीं। क्या इसका मतलब यह है कि इलस्ट्रेटर किसी भी रेखा को ड्रॉइंग कर सकता है और उसे एसवीजी पथ के रूप में सहेज सकता है?

नोट: हां इंकस्केप है, लेकिन यदि संभव हो तो मैं ढाल और मास्किंग समर्थन की तलाश में हूं। मैं .ai फ़ाइलों का उपयोग करने और उन्हें चित्रकार या एक्रोबैट या कुछ का उपयोग करके निर्यात करने में सक्षम होना चाहता हूं ... क्या वहां कुछ है? या यह इलस्ट्रेटर या एक्रोबैट में आउटपुट प्रारूप के रूप में बनाया गया है?


(प्रश्न का हिस्सा "स्थिति में सुधार हुआ है?" के जवाब में):

दुर्भाग्य से, वास्तव में नहीं। एसवीजी के लिए इलस्ट्रेटर का समर्थन हमेशा थोड़ा कमजोर रहा है, और, इलस्ट्रेटर के आंतरिक में चारों ओर घूमते हुए, मुझे संदेह है कि जहां तक ​​इलस्ट्रेटर का संबंध है, हम इसमें काफी सुधार देखेंगे।

यदि आप किसी इलस्ट्रेटर दस्तावेज़ में डोम-स्टाइल पहुंच की तलाश में हैं, तो आप Hanpuku (प्रकटीकरण # 1: मैं लेखक हूं। प्रकटीकरण # 2: यह शोध कोड है, जिसका अर्थ है कि बग्स बहुत अधिक हैं, और भविष्य का समर्थन असंभव है)

हनपुकु के साथ, आप कुछ ऐसा कर सकते हैं:

  1. इलस्ट्रेटर में रुचि के मार्ग का चयन करें
  2. "टू डी 3" बटन पर क्लिक करें
  3. स्क्रिप्ट संपादक में, टाइप करें:

    selection.attr('d', 'M 0 0 L 20 134 L 233 24 Z');

  4. रन पर क्लिक करें

  5. यदि परिवर्तन अपेक्षित है, तो दस्तावेज़ में परिवर्तन लागू करने के लिए "इलस्ट्रेटर" पर क्लिक करें

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

टीएल; डीआर: इलस्ट्रेटर एक आंतरिक मॉडल का उपयोग करता है जो कई तरीकों से एसवीजी से काफी अलग है, जिसका अर्थ यह है कि जब आप दोनों के बीच पुनरावृत्ति करते हैं, तो वर्तमान में, आपकी एकमात्र पसंद उन सुविधाओं के सबसेट का उपयोग करना है जो दोनों एक ही तरीके से समर्थन करते हैं।


अपने पाठ संपादक के साथ एसवीजी खोलें। यदि आपके पास कुछ भाग्य है तो फ़ाइल में कुछ ऐसा होगा:

<path d="M52.52,26.064c-1.612,0-3.149,0.336-4.544,0.939L43.179,15.89c-0.122-0.283-0.337-0.484-0.58-0.637  c-0.212-0.147-0.459-0.252-0.738-0.252h-8.897c-0.743,0-1.347,0.603-1.347,1.347c0,0.742,0.604,1.345,1.347,1.345h6.823  c0.331,0.018,1.022,0.139,1.319,0.825l0.54,1.247l0,0L41.747,20c0.099,0.291,0.139,0.749-0.604,0.749H22.428  c-0.857,0-1.262-0.451-1.434-0.732l-0.11-0.221v-0.003l-0.552-1.092c0,0,0,0,0-0.001l-0.006-0.011l-0.101-0.2l-0.012-0.002  l-0.225-0.405c-0.049-0.128-0.031-0.337,0.65-0.337h2.601c0,0,1.528,0.127,1.57-1.274c0.021-0.722-0.487-1.464-1.166-1.464  c-0.68,0-9.149,0-9.149,0s-1.464-0.17-1.549,1.369c0,0.688,0.571,1.369,1.379,1.369c0.295,0,0.7-0.003,1.091-0.007  c0.512,0.014,1.389,0.121,1.677,0.679l0,0l0.117,0.219c0.287,0.564,0.751,1.473,1.313,2.574c0.04,0.078,0.083,0.166,0.126,0.246  c0.107,0.285,0.188,0.807-0.208,1.483l-2.403,4.082c-1.397-0.606-2.937-0.947-4.559-0.947c-6.329,0-11.463,5.131-11.463,11.462  S5.15,48.999,11.479,48.999c5.565,0,10.201-3.968,11.243-9.227l5.767,0.478c0.235,0.02,0.453-0.04,0.654-0.127  c0.254-0.043,0.507-0.128,0.713-0.311l13.976-12.276c0.192-0.164,0.874-0.679,1.151-0.039l0.446,1.035  c-2.659,2.099-4.372,5.343-4.372,8.995c0,6.329,5.131,11.461,11.462,11.461c6.329,0,11.464-5.132,11.464-11.461  C63.983,31.196,58.849,26.064,52.52,26.064z M11.479,46.756c-4.893,0-8.861-3.968-8.861-8.861s3.969-8.859,8.861-8.859  c1.073,0,2.098,0.201,3.051,0.551l-4.178,7.098c-0.119,0.202-0.167,0.418-0.183,0.633c-0.003,0.022-0.015,0.036-0.016,0.054  c-0.007,0.091,0.02,0.172,0.03,0.258c0.008,0.054,0.004,0.105,0.018,0.158c0.132,0.559,0.592,1,1.193,1.05l8.782,0.727  C19.397,43.655,15.802,46.756,11.479,46.756z M15.169,36.423c-0.003-0.002-0.003-0.002-0.006-0.002  c-1.326-0.109-0.482-1.621-0.436-1.704l2.224-3.78c1.801,1.418,3.037,3.515,3.32,5.908L15.169,36.423z M25.607,37.285l-2.688-0.223  c-0.144-3.521-1.87-6.626-4.493-8.629l1.085-1.842c0.938-1.593,1.756,0.001,1.756,0.001l0,0c1.772,3.48,3.65,7.169,4.745,9.331  C26.012,35.924,26.746,37.379,25.607,37.285z M43.249,24.273L30.78,35.225c0,0.002,0,0.002,0,0.002  c-1.464,1.285-2.177-0.104-2.188-0.127l-5.297-10.517l0,0c-0.471-0.936,0.41-1.062,0.805-1.073h17.926c0,0,1.232-0.012,1.354,0.267  v0.002C43.458,23.961,43.473,24.077,43.249,24.273z M52.52,46.745c-4.891,0-8.86-3.968-8.86-8.858c0-2.625,1.146-4.976,2.962-6.599  l2.232,5.174c0.421,0.977,0.871,1.061,0.978,1.065h0.023h1.674c0.9,0,0.592-0.913,0.473-1.199l-2.862-6.631  c1.043-0.43,2.184-0.672,3.381-0.672c4.891,0,8.861,3.967,8.861,8.861C61.381,42.777,57.41,46.745,52.52,46.745z" fill="#241F20"/>

d विशेषता वह है जिसे आप ढूंढ रहे हैं।


इंकस्केप में खोलें
ctrl ए (सभी का चयन करें)
शिफ्ट ctrl सी (= पथ / पथ के लिए ऑब्जेक्ट)
ctrl s (सहेजें (सादा svg के रूप में चुनें))

किया हुआ

सभी रेक्ट / सर्कल को पथ में परिवर्तित कर दिया गया है


गीम्प का उपयोग प्राइवेटिव्स (जैसे रीक्ट्स, सर्किल इत्यादि) के साथ एसवीजी को एक ही पथ में बदलने के लिए किया जा सकता है जिसका उपयोग एचटीएमएल 5 के भीतर किया जा सकता है।

  1. पहली बार जिंप डाउनलोड https://www.gimp.org/downloads/ : https://www.gimp.org/downloads/
  2. अपनी एसवीजी को किसी .svg फ़ाइल के रूप में निर्यात के किसी भी उपकरण के साथ निर्यात करें उदाहरण के लिए इलस्ट्रेटर। चिंता न करें अगर एसवीजी आउटपुट अब गन्दा है, तो गिंप इसे साफ़ कर देगा
  3. फ़ाइल -> ओपन के साथ जीवी में एसवीजी फ़ाइल आयात करें, और निम्न (या समान) संवाद दिखाना चाहिए:

दोनों आयात पथ देखें और आयातित पथ विकल्पों को मर्ज करें

  1. फिर विंडोज़-> डॉक्यूबल डायलॉग-> पथ पर जाएं
  2. आयातित पथ कहने वाले एकल पथ पर राइट-क्लिक करें और आपको निम्न संवाद देखना चाहिए:

  1. निर्यात पथ पर क्लिक करें ... और इस पाठ फ़ाइल को अपनी पसंद के स्थान पर सहेजें
  2. इस फ़ाइल को अपनी पसंद के टेक्स्ट एडिटर के साथ ढूंढें और खोलें जैसे नोटपैड, टेक्स्ट एडिट
  3. पाठ को <path d="copy this text here" />
  4. चूंकि जिंप बहुत सारे रिक्त स्थान वाले टेक्स्ट को स्वरूपित करता है, इसलिए आपको इसे किसी भी पंक्ति में अपने HTML में पेस्ट करने के लिए कुछ रिक्त स्थान हटाकर इसे फिर से प्रारूपित करने की आवश्यकता हो सकती है




adobe-illustrator