क्या SVG बिटमैप इमेज के एम्बेडिंग का समर्थन करता है?

147

एक एसवीजी छवि विशुद्ध रूप से वेक्टर है या हम एक एसवीजी छवि में बिटमैप छवियों को जोड़ सकते हैं? बिटमैप छवियों (परिप्रेक्ष्य, मैपिंग, आदि) पर लागू होने वाले परिवर्तनों के बारे में कैसे?

संपादित करें : छवियाँ एसवीजी में लिंक संदर्भ द्वारा शामिल की जा सकती हैं। Http://www.w3.org/TR/SVG/struct.html#ImageElement देखें । मेरा प्रश्न वास्तव में था यदि बिटमैप छवियों को svg के अंदर शामिल किया जा सकता है ताकि svg छवि स्वयं समाहित हो जाए। अन्यथा, जब भी svg छवि प्रदर्शित होती है, लिंक का पालन किया जाना चाहिए और डाउनलोड की गई छवि। जाहिरा तौर पर .svg फाइलें केवल xml फाइलें होती हैं।

image svg bitmapimage

— chmike
स्रोत

207

हां, आप किसी भी छवि को <image>तत्व से संदर्भित कर सकते हैं । और आप svg को पूरी तरह से आत्मनिर्भर बनाने के लिए डेटा यूरी का उपयोग कर सकते हैं । एक उदाहरण:

<image width="100" height="100" xlink:href="data:image/png;base64,...">

डॉट्स वह जगह है जहां आप एन्कोडेड आधार 64 डेटा, वेक्टर ग्राफिक्स एडिटर जोड़ेंगे जो svg को सपोर्ट करते हैं, जिसमें आमतौर पर एम्बेडेड इमेज के साथ सेविंग का विकल्प होता है। अन्यथा base64 से एन्कोडिंग के लिए आसपास बहुत सारे उपकरण हैं।

यहाँ svg testuite से एक पूर्ण उदाहरण दिया गया है।

— एरिक डहलस्ट्रम
स्रोत

2

@ अलेक्जेंडर एक अलग सवाल है, और मुझे यकीन है कि आप इस साइट पर इसके लिए एक जवाब पा सकते हैं (कुछ को base64 के लिए एन्कोडिंग svg- विशिष्ट नहीं है)।

— एरिक डेहलस्त्रोम

1

@ एरिक - मान लीजिए कि मेरे पास एक ही svg फ़ाइल में एक ही छवि को हजार बार दोहराया गया है। क्या मैं बेस 64 डेटा को एक स्थान पर रख सकता हूं और छवि को उस डेटा से संदर्भित कर सकता हूं?

— रोहित वत्स

3

@ एरिक - कोई बात नहीं मुझे यहाँ से मेरा जवाब मिला - stackoverflow.com/questions/16685014/… । वहां समूह बनाने के बारे में उत्तर दें। :)

— रोहित वत्स

3

इस नाम के xlinkरूप में घोषित करने के लिए मत भूलना : xmlns:xlink="http://www.w3.org/1999/xlink"कुछ ब्राउज़र / दर्शक आपकी छवि को इसके बिना नहीं देख सकते हैं

— Marc_Alx

1

FYI करें: मेरे अनुभव के अनुसार Chrome ब्राउज़र इस छवि को प्रदर्शित करता है भले ही आप निर्दिष्ट न करें widthऔर heightsvg छवि टैग में। हालाँकि अगर आप इन विशेषताओं को छोड़ते हैं तो फ़ायरफ़ॉक्स और IE छवि प्रदर्शित नहीं करते हैं। तो सुनिश्चित करें कि आप उन्हें निर्दिष्ट करें!

— Stonecrusher

23

मैंने यहां एक फिडेल पोस्ट किया है, जो HTML पृष्ठ के अंदर SVG में डेटा, रिमोट और लोकल इमेज को दिखाता है:

http://jsfiddle.net/MxHPq/

<!DOCTYPE html>
<html>
<head>
    <title>SVG embedded bitmaps in HTML</title>
    <style>

        body{
            background-color:#999;
            color:#666;
            padding:10px;
        }

        h1{
            font-weight:normal;
            font-size:24px;
            margin-top:20px;
            color:#000;
        }

        h2{
            font-weight:normal;
            font-size:20px;
            margin-top:20px;
        }

        p{
            color:#FFF;
            }

        svg{
            margin:20px;
            display:block;
            height:100px;
        }

    </style>
</head>

<body>
    <h1>SVG embedded bitmaps in HTML</h1>
    <p>The trick appears to be ensuring the image has the correct width and height atttributes</p>

    <h2>Example 1: Embedded data</h2>
    <svg id="example1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="0" width="5" height="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
    </svg>

    <h2>Example 2: Remote image</h2>
    <svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="0" width="275" height="95" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png" />
    </svg>

    <h2>Example 3: Local image</h2>
    <svg id="example3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="0" width="136" height="23" xlink:href="/img/logo.png" />
    </svg>


</body>
</html>

— davestewart
स्रोत

17

आप उदाहरण के लिए, छवि डेटा की आपूर्ति के लिए एक डेटा URI का उपयोग कर सकते हैं :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<image width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>

</svg>

छवि सभी सामान्य svg परिवर्तनों के माध्यम से जाएगी।

लेकिन इस तकनीक के नुकसान हैं, उदाहरण के लिए छवि को ब्राउज़र द्वारा कैश नहीं किया जाएगा

— GarethOwen
स्रोत

यदि डेटा यूआरआई एसवीजी द्वारा आवश्यक है, तो यह संभवतः कोई नुकसान नहीं है - मैं अपना जवाब संपादित करूंगा

— GarethOwen

एंबेडेड छवियां (डेटा यूआरआई) वे जिस दस्तावेज़ में हैं, उसके साथ कैश किया जाएगा, उदाहरण के लिए देखें stackoverflow.com/questions/4791807/data-uris-and-caching

— Erik Dahlström

बिल्कुल - यदि svg दस्तावेज़ बदलता है, तो एम्बेडेड बिटमैप को फिर से लोड किया जाएगा, भले ही वह समान हो। अगर हम http URL से लिंक करते हैं, तो इसे अलग से svg डॉक्यूमेंट में कैश्ड किया जा सकता है।

— गेरेथोवेन

1

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

— चामिक

2

आप किसी छवि के Base64 एन्कोडेड संस्करण को एम्बेड करने के लिए data:URL का उपयोग कर सकते हैं । लेकिन यह बहुत कुशल नहीं है और बड़ी छवियों को एम्बेड करने की अनुशंसा नहीं करेगा। किसी अन्य फ़ाइल से लिंक करने का कोई कारण संभव नहीं है?

— छेद
स्रोत

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

— चामिक

यदि आप इंटरनेट पर कहीं ओर इशारा करते हुए निरपेक्ष URL का उपयोग करते हैं तो यह सच है। लेकिन एक सापेक्ष URL का उपयोग करना आसान है ताकि यदि SVG फ़ाइल स्थानीय है, तो छवि भी होगी। यदि आपको यह भी आवश्यकता है कि यह एक एकल पुनर्वितरण फ़ाइल होनी चाहिए, तो वह फिर से चीजों को बदल देती है।

— निक

ऐसे मामलों का उपयोग करें जहां आप चाहते हैं कि एक एसवीजी ग्राफिक स्वयं निहित होना चाहिए - अर्थात्, एक फ़ाइल जिसमें संपूर्ण छवि शामिल है। इमेज को रेंडर करने के लिए कई फाइलों को ट्रांसपोर्ट / स्टोर करना, फाइल सिस्टम पर इमेज को हैंडल करते समय अच्छी बात नहीं है - चीजें सिंक से बाहर निकल सकती हैं या बहुत आसानी से गिर सकती हैं।

— मिनोक नोव

-1

बिटमैप को शामिल करना भी संभव है। मुझे लगता है कि आप भी उस पर परिवर्तनों का उपयोग कर सकते हैं।

— mightyplow
स्रोत

वास्तव में। मुझे अभी यह लिंक मिला है: w3.org/TR/SVG/struct.html#ImageElement । दुर्भाग्य से यह मेरी चिंता का जवाब नहीं देता है जो मैंने देखा है कि प्रश्न में नहीं बताया गया है। मैं प्रश्न संपादित करूंगा।

— चीकू