java - तत्वों के साथ एक एसवीजी छवि से एम्बेडेड बेस 64 स्ट्रिंग के साथ एक एसवीजी छवि बनाएँ



svg batik (1)

एक ऐसी तकनीक है जिसमे मैंने एसवीजी छवियों को ब्लॉगर पोस्ट्स में एम्बेड करने के लिए उपयोग किया है जो कि इसके लिए काम कर सकते हैं। असल में, यह एक दो-चरण प्रक्रिया है:

  1. आप एसवीजी को सीरियल कर सकते हैं जिसे आप एम्बेड करना चाहते हैं, और यूआरएल-एन्कोड करें।
  2. फिर आप यूआरएल-एन्कोडेड स्ट्रिंग को एक एसवीजी प्रयोग तत्व के xlink: href विशेषता में डेटा यूआरआई के रूप में उपयोग करते हैं।

यहां काम करने वाला एक उदाहरण है जिसे मैंने बाटिक के साथ परीक्षण किया है। कहते हैं कि आप निम्न एसवीजी दस्तावेज़, सर्कल.svg को एम्बेड करना चाहते हैं:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="4in" id="the_svg"
     viewBox="0 0 4 4" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
    <circle cx="1" cy="1" r="1" fill="blue" stroke="none" id="the_circle"/>
</svg>

आप निम्न छोटे राइनो स्क्रिप्ट को अपना रास्ता देकर यूआरएल-एन्कोड कर सकते हैं:

#!/usr/bin/env rhino
print(escape(readFile(arguments[0])))

जरूर, यदि आप जावा में यह प्रोग्राममैटी करना चाहते हैं, तो आपको एसवीजी दस्तावेज़ को serializing और स्ट्रिंग के URL- एन्कोडिंग के जावा-विशिष्ट विधि की आवश्यकता होगी।

यह आपको यूआरएल-एन्कोडेड स्ट्रिंग के रूप में दस्तावेज़ देता है:

%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%0A%20%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20width%3D%224in%22%20height%3D%224in%22%20id%3D%22the_svg%22%0A%20%20%20%20%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%0A%20%20%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%20fill%3D%22blue%22%20stroke%3D%22none%22%20id%3D%22the_circle%22/%3E%0A%3C/svg%3E%0A%0A

इसके बाद आप इस दस्तावेज़ को डेटा यूआरआई में उपयोग करके एम्बेड कर सकते हैं, जो इस तरह दिखता है:

data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%0A%20%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20width%3D%224in%22%20height%3D%224in%22%20id%3D%22the_svg%22%0A%20%20%20%20%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%0A%20%20%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%20fill%3D%22blue%22%20stroke%3D%22none%22%20id%3D%22the_circle%22/%3E%0A%3C/svg%3E%0A%0A

उदाहरण के लिए, निम्नलिखित HTML दस्तावेज़ एसवीजी दस्तावेज़ को एम्बेड करने के लिए ऑब्जेक्ट टैग और डेटा यूआरआई का उपयोग करता है:

<html>
    <head>
    </head>
    <body>
        <object data="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%0A%20%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20width%3D%224in%22%20height%3D%224in%22%20id%3D%22the_svg%22%0A%20%20%20%20%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%0A%20%20%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%20fill%3D%22blue%22%20stroke%3D%22none%22%20id%3D%22the_circle%22/%3E%0A%3C/svg%3E%0A%0A" width="400" height="400"></object>
    </body>
</html>

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="4in" id="the_svg"
     viewBox="0 0 4 4" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <use x="0" y="0" width="4" height="4" xlink:href="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%0A%20%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20width%3D%224in%22%20height%3D%224in%22%20id%3D%22the_svg%22%0A%20%20%20%20%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%0A%20%20%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%20fill%3D%22blue%22%20stroke%3D%22none%22%20id%3D%22the_circle%22/%3E%0A%3C/svg%3E%0A%0A#the_svg"/>
</svg>

एफवाईआई, यह बाटिक 1.7 (स्क्वॉग्ज ब्राउज़र में परीक्षण किया गया) में अच्छी तरह से काम करता है, लेकिन क्रोमियम या फ़ायरफ़ॉक्स नहीं।

मेरे पास एक एसवीजी फ़ाइल है जिसमें कई तत्व शामिल हैं (जैसे पथ, मंडल, आयत, आदि)।

मैं उस SVG फ़ाइल को एसवीजी में परिवर्तित करना चाहता हूं जिसमें कई तत्वों के बजाय एम्बेडेड बेस 64 डेटा शामिल होता है। क्या बाटिक के साथ ऐसा करना संभव है?

जिस प्रोजेक्ट पर मैं काम कर रहा हूं, मैं केवल जावा लाइब्रेरी का उपयोग कर रहा हूं।





batik