PicScrub logoPicScrub
फ़ॉर्मैट पर वापस जाएँ

SVG फ़ॉर्मैट

Scalable Vector Graphics

XML स्ट्रक्चर

इस साइट के बाकी सभी फ़ॉर्मैट से SVG अलग है, क्योंकि यह बाइनरी है ही नहीं, यह सिर्फ़ XML टेक्स्ट है। आप SVG को टेक्स्ट एडिटर में खोलकर पढ़ सकते हैं। इससे मेटाडेटा हटाना सोच के स्तर पर आसान हो जाता है, पर इसका मतलब यह भी है कि जानकारी छिपने की जगहें ज़्यादा हैं।

मेटाडेटा अपने अलग एलिमेंट के रूप में आ सकता है, किसी भी एलिमेंट के एट्रिब्यूट में, XML कमेंट में, या processing instruction में। वेक्टर एडिटर तो SVG फ़ाइलों में अपना डेटा ठूँसने के बड़े शौक़ीन हैं।

SVG का बुनियादी स्ट्रक्चर

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100" height="100" viewBox="0 0 100 100">

  <!-- मेटाडेटा वाले एलिमेंट -->
  <title>My Drawing</title>
  <desc>Created by John Doe</desc>
  <metadata>
    <rdf:RDF xmlns:rdf="...">
      <!-- RDF/Dublin Core मेटाडेटा -->
    </rdf:RDF>
  </metadata>

  <!-- वेक्टर कंटेंट -->
  <circle cx="50" cy="50" r="40" fill="red"/>
</svg>

अहम एलिमेंट

  • <svg>:रूट एलिमेंट, जिसमें viewBox और डाइमेंशन होते हैं
  • xmlns:namespace की घोषणाएँ
  • <defs>:दोबारा इस्तेमाल होने वाली परिभाषाएँ (ग्रेडिएंट, पैटर्न)
  • <g>:एलिमेंट को समूह में रखने वाला एलिमेंट

मेटाडेटा वाले एलिमेंट

SVG के स्पेक में मेटाडेटा जोड़ने के कई तरीके हैं, और अलग-अलग टूल अलग-अलग तरीके अपनाते हैं। कुछ तो साफ़ दिखते हैं (सचमुच <metadata> नाम का एलिमेंट है), कुछ ज़्यादा छिपे हुए हैं।

<metadata>

व्यवस्थित मेटाडेटा रखने का डिब्बा, आम तौर पर RDF/Dublin Core में। इसमें बनाने वाले का नाम, बनने की तारीख़, अधिकार वग़ैरह हो सकते हैं।

<metadata>
  <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
           xmlns:dc="http://purl.org/dc/elements/1.1/">
    <rdf:Description>
      <dc:creator>John Doe</dc:creator>
      <dc:date>2024-01-15</dc:date>
    </rdf:Description>
  </rdf:RDF>
</metadata>

<title>

पूरे SVG या किसी एक एलिमेंट का, लोगों के पढ़ने लायक शीर्षक। अक्सर एक्सेसिबिलिटी के लिए इस्तेमाल होता है, पर इससे दस्तावेज़ का मक़सद खुल सकता है।

<desc>

विवरण वाला एलिमेंट। इसमें इमेज, बनाने वाले या मक़सद के बारे में विस्तार से जानकारी हो सकती है।

XML कमेंट

<!-- comment --> में लेखक के नोट्स, बनने की तारीख़, सॉफ़्टवेयर की जानकारी या डीबग की जानकारी हो सकती है।

एडिटर के namespace

यहीं SVG गड़बड़ होने लगता है। हर वेक्टर एडिटर अपने namespace वाले एट्रिब्यूट जोड़ता है, ताकि वे फ़ीचर सहेज सके जो SVG में सीधे-सीधे नहीं हैं। Inkscape की कोई फ़ाइल खोलिए, हर जगह inkscape: और sodipodi: एट्रिब्यूट दिखेंगे। ये अपने आप में प्राइवेसी के लिए खतरा नहीं, पर इनसे आपका सॉफ़्टवेयर पहचाना जा सकता है।

inkscape:* / sodipodi:*

Inkscape, लेयर के नाम, गाइड की जगह, दस्तावेज़ की सेटिंग और एडिट हिस्ट्री के लिए namespace वाले एट्रिब्यूट जोड़ता है।

<svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     inkscape:version="1.2"
     sodipodi:docname="my-drawing.svg">
  <sodipodi:namedview inkscape:current-layer="layer1"/>
</svg>

Adobe Illustrator

Illustrator काफ़ी सारा मेटाडेटा जोड़ता है, जैसे वर्ज़न, आर्टबोर्ड की सेटिंग, और कभी-कभी तो पूरा AI फ़ॉर्मैट का डेटा।

xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/"
xmlns:x="http://ns.adobe.com/Extensibility/1.0/"

Sketch / Figma

आजकल के डिज़ाइन टूल अपने एट्रिब्यूट में लेयर के नाम, कंपोनेंट के ID और एक्सपोर्ट की सेटिंग डाल सकते हैं।

Processing instruction

SVG फ़ाइलों की शुरुआत में मौजूद XML processing instruction (<?...?>) में सॉफ़्टवेयर की पहचान हो सकती है।

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

क्या बचता है, क्या हटता है

  • • <?xml ...?> घोषणा:बची रहती है (ज़रूरी है)
  • • <?xml-stylesheet ...?>:बची रहती है (काम की है)
  • • बाकी processing instruction:हटा दी जाती हैं

DOM पर आधारित प्रोसेसिंग

चूँकि SVG सही-सलामत XML है, हम इसे DOM ट्री में पढ़कर, जो नहीं चाहिए उसे बड़ी सफ़ाई से हटा सकते हैं। यह regex वाले तरीकों से ज़्यादा सटीक है और काम के कंटेंट को ग़लती से नहीं तोड़ता।

1

XML पढ़ना

स्ट्रक्चर बचाते हुए SVG को XML दस्तावेज़ के रूप में पढ़ना

2

मेटाडेटा वाले एलिमेंट हटाना

<metadata>, <title>, <desc> एलिमेंट मिटाना

3

एडिटर के एट्रिब्यूट हटाना

inkscape:*, sodipodi:* और एडिटर के दूसरे namespace हटाना

4

कमेंट हटाना

दस्तावेज़ से सारे XML कमेंट निकालना

5

namespace साफ़ करना

रूट एलिमेंट से बेकार पड़ी namespace घोषणाएँ हटाना

6

वापस लिखना

साफ़ किया हुआ XML दोबारा SVG फ़ाइल के रूप में लिखना

प्रोसेसिंग का सार

जो बचा रहता है

  • • सारे वेक्टर ग्राफ़िक्स (path, आकृतियाँ, टेक्स्ट)
  • • स्टाइल और CSS
  • • ग्रेडिएंट और पैटर्न
  • • फ़िल्टर और इफ़ेक्ट
  • • अंदर जुड़ी इमेज (रेफ़रेंस के ज़रिए)
  • • viewBox और डाइमेंशन
  • • SVG के मानक namespace

जो हट जाता है

  • • <metadata> एलिमेंट
  • • <title> एलिमेंट
  • • <desc> एलिमेंट
  • • XML कमेंट
  • • inkscape:* एट्रिब्यूट
  • • sodipodi:* एट्रिब्यूट
  • • Adobe/Sketch के namespace
  • • बेकार पड़ी namespace घोषणाएँ

अंदर जुड़ी इमेज

यह वाली बात अक्सर लोगों को चौंका देती है: SVG फ़ाइलों में रैस्टर इमेज base64 डेटा URI के रूप में जुड़ी हो सकती हैं। और उन जुड़ी हुई JPEG या PNG के अंदर अपना EXIF मेटाडेटा छिपा हो सकता है।

फ़िलहाल की सीमा

PicScrub अभी SVG के स्तर का मेटाडेटा तो हटाता है, पर अंदर जुड़ी रैस्टर इमेज को डिकोड करके प्रोसेस नहीं करता:

<image href="data:image/jpeg;base64,/9j/4AAQ..." />

PicScrub अभी SVG फ़ाइलों के अंदर जुड़ी रैस्टर इमेज को प्रोसेस नहीं करता। पूरी प्राइवेसी के लिए उन इमेज को अलग निकालकर अलग से प्रोसेस कीजिए।