छिपे पाथ छोड़े बिना SVG स्थायी रूप से क्रॉप करें

भरा SVG आर्टवर्क स्थायी रूप से क्रॉप करने के लिए हर इच्छित आकार का क्रॉप क्षेत्र से प्रतिच्छेद लें, फिर केवल प्राप्त ज्यामिति निर्यात करें। संपादन योग्य मास्टर अलग रखें। छोटा viewBox या क्लिपिंग पाथ दृश्य बदल सकता है, जबकि मूल बाहरी पाथ फाइल में रहते हैं।

हमारे उदाहरण में चार मूल अपारदर्शी, बंद बहुभुजीय ऑब्जेक्ट और आयताकार क्रॉप हैं। एक ऑब्जेक्ट में वास्तविक खुला भाग है। भराव और पेंट क्रम बचाने के लिए ऑब्जेक्ट अलग क्रॉप करते हैं, परिणाम SVG में सुरक्षित करते हैं और वही वास्तविक फाइल दोबारा खोलकर जाँचते हैं। यह सीमित ज्यामिति प्रक्रिया है, हर SVG प्रभाव क्रॉप करने या परीक्षित कटर फाइल बनाने की सामान्य विधि नहीं।

तय करें कि आर्टवर्क छिपाना है या हटाना

बाद में क्रॉप बदलना हो तो क्लिपिंग उपयोगी है। MDN का क्लिपिंग संदर्भ रेंडर परिणाम और तत्व की मूल ज्यामिति अलग करता है। क्लिपिंग संबंध हटाने से मूल आर्टवर्क फिर दिख सकता है।

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

हर अदृश्य तत्व मिटाना अलग काम है। क्लिपिंग आकार, मास्क संसाधन या संदर्भित प्रतीक सीधे रंगा न जाने पर भी आवश्यक हो सकता है। हमारी क्लिप-पाथ और मास्क मार्गदर्शिका ये रेंडर संबंध समझाती है; क्लिप निर्देशांक मार्गदर्शिका उनकी निर्देशांक प्रणालियाँ बताती है।

पहचाने जा सकने वाले बंद भराव से शुरू करें

संपादन योग्य स्रोत, परिभाषित क्रॉप क्षेत्र और सुरक्षित SVG जाँचने का तरीका चाहिए। यह उदाहरण ब्राउज़र में Paper.js 0.12.18 चलाता है। यह बिना स्ट्रोक वाले ठोस, पूरी तरह अपारदर्शी बहुभुजीय भराव संभालता है। ऑपरेंड Path या CompoundPath ऑब्जेक्ट हैं, मनमाने आयातित समूह नहीं।

हमारे स्रोत में आयताकार खुले भाग वाला हरा-नीला फ्रेम, नारंगी त्रिभुज, बैंगनी हीराकार आकृति और क्रॉप से पूरी तरह बाहर छोटा पीला ऑब्जेक्ट है। क्रॉप आयत (60, 40) से शुरू होकर 160 × 120 SVG उपयोगकर्ता इकाइयों का है। ये बनाए गए निर्देशांक हैं, भौतिक प्रिंट आयाम नहीं।

फ्रेम का खुला भाग कंपाउंड पाथ का हिस्सा है। केवल लूप चलाने के लिए उसकी रूपरेखाएँ असंबंधित भरे ऑब्जेक्ट में न तोड़ें। SVG छेद मार्गदर्शिका समझाती है कि सफेद पैबंद और वास्तविक पारदर्शी खुला भाग अलग व्यवहार क्यों करते हैं।

यह मूल नमूना source.svg नाम से सुरक्षित करें:

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="220" viewBox="0 0 300 220">
  <path id="frame" fill="#39786E" fill-rule="evenodd"
        d="M20 20H160V180H20Z M85 70V100H115V70Z"/>
  <path id="triangle" fill="#DE9252"
        d="M150 0L270 110L150 200Z"/>
  <path id="leaf" fill="#80618E"
        d="M180 130L240 150L180 190L120 150Z"/>
  <path id="outside" fill="#D4B35E" d="M250 10H280V30H250Z"/>
</svg>

हर ऑब्जेक्ट का प्रतिच्छेद लें और केवल परिणाम रखें

प्रतिच्छेद ऑब्जेक्ट और क्रॉप का साझा क्षेत्र रखता है। Paper.js के intersect() दस्तावेज़ प्रतिच्छेद वाला नया पाथ आइटम बताते हैं। यहाँ trace: true दोनों ऑपरेंड को क्षेत्र मानता है। यह विकल्प बूलियन ज्यामिति से संबंधित है; रास्टर आर्टवर्क को वेक्टर नहीं बनाता। insert: false उपयोग करते हैं ताकि आयातित मास्टर और क्रॉप सहायक स्वतः निर्यात होने वाले दृश्य में न आएँ।

दोहराने योग्य स्थानीय उदाहरण के लिए खाली कार्य फोल्डर में निश्चित संस्करण वाली लाइब्रेरी स्थापित करें:

npm install --save-exact paper@0.12.18

इसे index.html नाम से source.svg और नीचे की crop.js फाइल के साथ सुरक्षित करें:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Permanent SVG crop</title>
<canvas id="work" width="300" height="220" hidden></canvas>
<p id="status">Running crop…</p>
<pre id="svg-output"></pre>
<pre id="receipt"></pre>
<script src="node_modules/paper/dist/paper-full.min.js"></script>
<script src="crop.js"></script>
</html>

इसे crop.js नाम से सुरक्षित करें। फोल्डर स्थानीय HTTP सर्वर से चलाएँ और index.html खोलें; स्क्रिप्ट पास की SVG फाइल लाती है।

(async () => {
  paper.setup(document.getElementById('work'));
 
  const source = await (await fetch('source.svg')).text();
  const imported = paper.project.importSVG(source, {
    insert: false,
    expandShapes: true
  });
  const crop = new paper.Path.Rectangle({
    rectangle: new paper.Rectangle(60, 40, 160, 120),
    insert: false
  });
  const delivery = new paper.Group({ insert: false });
  const rows = [];
 
  for (const name of ['frame', 'triangle', 'leaf', 'outside']) {
    const operand = imported.getItem({ name });
    if (!(operand instanceof paper.Path || operand instanceof paper.CompoundPath)) {
      throw new Error('Expected filled path: ' + name);
    }
 
    const result = operand.intersect(crop, { insert: false, trace: true });
    if (Math.abs(result.area) < 1e-8) {
      rows.push({ name, removed: true });
      result.remove();
      continue;
    }
 
    result.fillColor = operand.fillColor.clone();
    result.fillRule = operand.fillRule;
    result.strokeColor = null;
    result.opacity = 1;
    result.name = 'cropped-' + name;
    delivery.addChild(result);
    rows.push({
      name,
      result: result.className,
      fill: result.fillColor.toCSS(true),
      area: result.area
    });
  }
 
  delivery.translate(new paper.Point(-60, -40));
  paper.project.activeLayer.addChild(delivery);
  const output = paper.project.exportSVG({
    asString: true,
    precision: 6,
    bounds: new paper.Rectangle(0, 0, 160, 120)
  });
 
  document.getElementById('svg-output').textContent = output;
  document.getElementById('receipt').textContent = JSON.stringify({
    paper: paper.version,
    rows,
    export_precision: 6,
    viewport: [0, 0, 160, 120]
  }, null, 2);
  document.getElementById('status').textContent = 'Intersection/export executed. Save the exact visible SVG output as cropped.svg and open that saved file independently.';
})().catch(e => {
  document.getElementById('status').textContent = 'FAIL: ' + e.message;
});

स्पष्ट नाम सूची स्रोत के पेंट क्रम का पालन करती है। हर बचे परिणाम को अपना ठोस भराव मिलता है और उसी क्रम में जुड़ता है। पहले पूरा आर्टवर्क एक सिलुएट में जोड़ने से वे अलग रंग क्षेत्र खो जाते जिन्हें बचाना है। हमारी Paper.js बूलियन मार्गदर्शिका अलग यूनियन और घटाव का काम समझाती है।

पूरी तरह बाहर पीले ऑब्जेक्ट का प्रतिच्छेद खाली होता है, इसलिए वह नहीं आता। छोटे क्षेत्र की सीमा केवल इस नमूने का सुरक्षा उपाय है, किसी भी आर्टवर्क के बारीक विवरण मिटाने की अनुमति नहीं।

बची ज्यामिति को (-60, -40) खिसकाकर शून्य से शुरू 160 × 120 व्यूपोर्ट में निर्यात करते हैं। यह खिसकाव आउटपुट के निर्देशांक मूल को बदलता है। अनचाही बाहरी ज्यामिति प्रतिच्छेद क्रिया हटाती है; केवल मूल या व्यूपोर्ट बदलने से ऐसा नहीं होगा। Paper.js का प्रोजेक्ट निर्यात संदर्भ यहाँ उपयोग स्पष्ट सीमाएँ और संख्यात्मक परिशुद्धता बताता है।

वास्तविक SVG सुरक्षित करें, दोबारा खोलें और जाँचें

दिखाया गया सटीक SVG मार्कअप cropped.svg में कॉपी करें। केवल प्रोग्राम के मेमोरी वाले प्रीव्यू पर निर्भर रहने के बजाय सुरक्षित फाइल स्वतंत्र रूप से खोलें। हमारे नमूने में अलग पृष्ठ ने सुरक्षित फाइल लोड की, नए Paper.js स्कोप में आयात किया और ब्राउज़र के SVG छवि रेंडरर से दिखाई।

जाँचें फाइल संरचना, ज्यामिति और रूप को अलग रखती हैं:

• निर्यातित SVG में तीन परिणाम पाथ तत्व हैं, जिनमें चार बंद रूपरेखाएँ हैं क्योंकि फ्रेम का खुला भाग बचा है।
• इस नियंत्रित आउटपुट में क्रॉप सहायक, मूल ऑब्जेक्ट ID, क्लिपिंग पाथ, मास्क, रास्टर छवियाँ और प्रभाव तत्व नहीं हैं।
• हर दोबारा खोली रूपरेखा बंद है और सीधे खंड रखती है। उसके सभी शीर्ष आउटपुट के 0…160 गुणा 0…120 क्षेत्र में हैं, 0.00001 उपयोगकर्ता इकाई की सहनशीलता के साथ।
• इच्छित खुला भाग भरी ज्यामिति से बाहर और रेंडर फाइल में पारदर्शी रहता है। जाँचे ओवरलैप बिंदु पर नारंगी अब भी हरे-नीले के ऊपर दिखता है।
• ब्राउज़र रेंडर तुलना समान आकार पर केवल-क्लिप प्रीव्यू और क्रॉप फाइल जाँचती है, ज्यामिति निरीक्षण से अलग।

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

हमारी छवि तुलना 640 × 480 रास्टर उपयोग करती है और चैनल एक से अधिक अलग होने पर 0.5% बदले पिक्सेल की घोषित छूट देती है। सुरक्षित फाइल का रेंडर 307,200 में से 77 पिक्सेल, लगभग 0.0251%, पर अलग था, इसलिए मानदंड पास हुआ। वह पिक्सेल-समान नहीं था: सबसे बड़ा अलग चैनल अंतर 255 था। यह दृश्य तुलना की सहनशीलता है, ज्यामिति की नहीं। किनारे के पास एंटीएलियासिंग और वास्तव में बचा बाहरी पाथ अलग मुद्दे हैं।

यह क्रिया क्रॉप के बाहर की ज्यामिति हटाती है। बचे रंगीन ऑब्जेक्ट के बीच हर ओवरलैप नहीं हटाती। अंदरूनी ओवरलैप पेंट क्रम में रहते हैं; परीक्षित ओवरलैप बिंदु इच्छित ऊपर का रंग पुष्टि करता है। हर छिपा रंगा ओवरलैप समतल करना अलग काम होगा।

आर्टवर्क को अलग निरूपण चाहिए तो रुकें

यह उदाहरण खुले केंद्र-पाथ, स्ट्रोक, वक्र ऑपरेंड, ग्रेडिएंट, सॉफ्ट मास्क, रास्टर छवि, फिल्टर, मनमाने नेस्टेड क्लिप समूह या अर्धपारदर्शी ओवरलैप भराव का समर्थन स्थापित नहीं करता। वे विशेषताएँ हटाकर यह न मानें कि रूप सुरक्षित है।

स्ट्रोक वाला रास्ता और उस स्ट्रोक की भरी रूपरेखा अलग ज्यामिति हैं। काम को दिखते स्ट्रोक क्षेत्र का भरा आकार चाहिए तो बूलियन प्रक्रिया चुनने से पहले उचित संपादक में आउटलाइन प्रति तैयार करके जाँचें। संपादन महत्वपूर्ण हो तो मूल स्ट्रोक रखें। सॉफ्ट मास्क को कठोर प्रतिच्छेद से बदलकर उसके सारे फीके होते किनारे नहीं बचाए जा सकते।

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

गायब वेक्टर आर्टवर्क केवल ज़रूरत पर बहाल करें

स्रोत मौजूदा संपादन योग्य SVG हो तो सीधे उसकी ज्यामिति क्रॉप करें। केवल उपयुक्त रास्टर क्लिपआर्ट बचा हो और संपादन योग्य आकार चाहिए हों तो PerfectVector की क्लिपआर्ट प्रक्रिया पहले SVG विकल्प बना सकती है। क्रॉप लगाने से पहले बहाल रूपरेखाएँ, खुले भाग और अलग भराव जाँचें। वेक्टराइजेशन पिक्सेल से पाथ बनाता है; इच्छित क्रॉप सीमा पहचानता या बूलियन परिणाम सत्यापित नहीं करता। हमारा मूल नमूना सीधे बनाया गया, ट्रेस नहीं हुआ।

बनावट चाहिए और डिलीवरी फॉर्मैट इच्छित रास्टर क्रॉप समर्थित करे तो रास्टर चित्र रखें। वेक्टर क्रॉप इसलिए उपयोगी है कि अगले चरण को ज्यामिति चाहिए, इसलिए नहीं कि हर छवि SVG बने।

मास्टर खोए बिना क्रॉप पूरा करें

1. बिना क्रॉप मास्टर बचाएँ और इच्छित बंद भरे ऑब्जेक्ट पहचानें।
2. क्रॉप उन्हीं ऑब्जेक्ट के निर्देशांक संदर्भ में तय करें।
3. हर ऑब्जेक्ट का प्रतिच्छेद लें, परीक्षित शैली और पेंट क्रम बचाएँ और सहायक तथा मूल डिलीवरी दृश्य से बाहर रखें।
4. स्पष्ट सीमाओं और परिशुद्धता के साथ केवल बची ज्यामिति निर्यात करें।
5. सुरक्षित फाइल दोबारा खोलें और उसके वास्तविक पाथ, खुले भाग, रूप और इच्छित गंतव्य अलग जाँचें।

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

हमने मूल बहुभुजीय नमूने के लिए सुरक्षित फाइल का काम पूरा किया। उसे कटर में आयात नहीं किया, भौतिक आउटपुट नहीं परखा और सामान्य SVG अनुकूलता की गारंटी स्थापित नहीं की।

अक्सर पूछे जाने वाले प्रश्न

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

क्या पहले आकार जोड़कर सभी रंग क्रॉप कर सकता हूँ? एक यूनियन उन अलग भराव क्षेत्रों को हटा सकता है जिन्हें आप बचाना चाहते हैं। यह उदाहरण हर ठोस भरे ऑब्जेक्ट का अलग प्रतिच्छेद लेता है और स्रोत का पेंट क्रम रखता है।

क्या छोटा viewBox छिपा आर्टवर्क हटाता है? वह व्यूपोर्ट मैपिंग और दिखता क्षेत्र बदलता है। स्वयं उस क्षेत्र के बाहर के स्रोत पाथ नहीं मिटाता। प्रीव्यू के साथ सुरक्षित ज्यामिति भी जाँचें।

क्या परिणाम हर कटिंग ऐप में चलेगा? यह ब्राउज़र परीक्षण ऐसा स्थापित नहीं करता। इच्छित गंतव्य की आयातित ज्यामिति और क्रियाएँ जाँचें, फिर उपयुक्त उत्पादन जाँच करें।

स्रोत

1. MDN: SVG clipPath — क्लिपिंग संदर्भित तत्व की ज्यामिति बदले बिना रेंडरिंग प्रभावित करती है।
2. Paper.js: PathItem — प्रतिच्छेद परिणाम और क्षेत्र-आधारित बूलियन विकल्प।
3. Paper.js: Project — SVG आयात, प्रोजेक्ट सामग्री, निर्यात सीमाएँ और संख्यात्मक परिशुद्धता।

केवल बिटमैप क्लिपआर्ट स्रोत से पाथ चाहिए? SVG विकल्प तैयार करें, उसके छेद और भराव जाँचें, फिर अलग कार्य प्रति क्रॉप करें और डिलीवरी से पहले सुरक्षित परिणाम दोबारा खोलें।