SVG में SVG को एम्बेड करें?

Question

मेरे पास एक एसवीजी दस्तावेज है, और मैं इसके भीतर एक बाहरी svg छवि को शामिल करना चाहूंगा, जैसे कि कुछ:

<object data="logo.svgz" width="100" height="100" x="200" y="400"/>

("ऑब्जेक्ट" केवल एक उदाहरण है - एक्सएचटीएमएल के बजाय बाहरी दस्तावेज़ एसवीजी होगा)।

कोई विचार? क्या यह भी संभव है? या मेरे लिए सबसे अच्छी बात है कि बस अपने बाहरी SVG डॉक्यूमेंट में logo.svg xml को थप्पड़ मारें?

Answer 1

imageतत्व का उपयोग करें और अपनी एसवीजी फ़ाइल को देखें। मज़े के लिए, निम्न को सहेजें recursion.svg:

<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="-50" cy="-50" r="30" style="fill:red" />
  <image x="10" y="20" width="80" height="80" href="recursion.svg" />
</svg>

Comments

धन्यवाद, किसी कारण के लिए मेरे इस googling काम नहीं किया जब तक मैं इस सवाल पोस्ट के बाद। मैं ध्यान देता हूं कि छवि को प्रस्तुत करने के लिए चौड़ाई और ऊंचाई मौजूद होनी चाहिए।

— मार्सिन

एक दिलचस्प अवलोकन: फ़ायरफ़ॉक्स, क्रोम और सफारी के नवीनतम संस्करण सभी उपरोक्त स्तर का उपयोग करके केवल एक स्तर की पुनरावृत्ति (दो डॉट्स) दिखाते हैं। हालाँकि, यदि आप उपरोक्त को "a.svg" के रूप में सहेजते हैं और छवि को "b.svg" में बदलते हैं, और फिर इसे "b.svg" के रूप में भी सहेज सकते हैं, छवि "a.svg" के साथ, तो फ़ायरफ़ॉक्स अतिरिक्त दिखाएगा हर बार जब आप वैकल्पिक फ़ाइलों को पुनः लोड करते हैं तो पुनरावृत्ति के स्तर । ऐसा प्रतीत होता है कि हर बार जब आप फ़ाइल को लोड करते हैं, तो परिणाम एक स्तर गहरा होता है।

— फोग्र्ज

@IanStormTaylor एक एसवीजी तत्व में स्टाइल गुण नहीं हैं; बल्कि एसवीजी तत्व के अंदर की वस्तुओं की शैली है। हालांकि, जब का उपयोग कर <image>(या एसवीजी में <img>या <embed>HTML में) एक एसवीजी फ़ाइल आप अंतर्निहित डोम के लिए उपयोग नहीं दिया जाता है को संदर्भित करने के। जैसे, नहीं, आप एक SVG तत्व के अंदर ऐसे तत्वों को स्टाइल नहीं कर सकते जिन्हें एक द्वारा संदर्भित किया गया है <image>।

— फ्रोग्ज़

@proteneer <image xlink:href="data:image/svg+xml;utf8,&lt;svg …&gt;… &lt;/svg&gt;" />। (यदि आप hrefविशेषता सेट करने के लिए जावास्क्रिप्ट का उपयोग कर रहे हैं , तो आपको <आदि वर्णों से बचने की आवश्यकता नहीं है ।)

— Phrogz

xlink:hrefपदावनत किया जाता है , अब आपको बस उपयोग करना चाहिए href। क्या आप इसमें शामिल करने के लिए अपने उत्तर को अपडेट कर सकते हैं?

— डोनाल्ड डक

Answer 2

या आप वास्तव में इस तरह माता-पिता svg में बच्चे svg एम्बेड कर सकते हैं:

<svg>
    <g>
        <svg>
            ...
        </svg>
    </g>
</svg>

डेमो:
http://hitokun-s.github.io/old/demo/path-between-two-sitg.html

Comments

@ तोशी आपके पास आपके जवाब का एक और उदाहरण है? मैं आपकी सलाह पर अमल करने की कोशिश कर रहा हूँ। मेरा 'बाहरी' एसवीजी एक सर्कल और ग्रेडिएंट सेट करता है। मेरी आंतरिक एसवीजी एक वस्तु है। स्टैंड-अलोन, आंतरिक एसवीजी उम्मीद के मुताबिक काम करता है। लेकिन आंतरिक एसवीजी आपकी सलाह के मेरे कार्यान्वयन में प्रदर्शित नहीं होता है। इसलिए, मेरा एक और उदाहरण देखने का अनुरोध है।

— जे ग्रे

Answer 3

यह उल्लेखनीय है कि जब आप SVG को SVG में दूसरे के साथ एम्बेड करते हैं:

<image x="10" y="20" width="80" height="80" xlink:href="image.svg" />

तब एम्बेडेड एसवीजी दिए गए आयामों के साथ एक आयताकार आकार लेता है ।

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

एक बेहतर दृष्टिकोण एक पैटर्न का उपयोग कर रहा है। एक आकार, या तो एक वृत्त, एक वर्ग या एक रास्ता भरने के लिए।

<defs>
 <pattern id="pat" x="0" y="0" width="500" height="500" patternUnits="userSpaceOnUse">
   <image x="0" y="0" width="500" height="500" xlink:href="images/mysvg.svg"></image>
 </pattern>
</defs>

तो इस तरह पैटर्न का उपयोग करें:

<circle cx="0" cy="0" r="250" fill="url(#pat)"></circle>

अब आपके माउस इवेंट्स पारदर्शी छवि वर्गों में फंस नहीं रहे हैं!

Comments

कि भरने पैटर्न सही है, धन्यवाद। छोटे आवेषण या छोटे व्यूबॉक्स के लिए, कोडर सभी चौड़ाई और ऊंचाई को समान माप में कम करना चाह सकते हैं।

— स्टीव टेलर

Answer 4

मैंने पाया कि <image>टैग का उपयोग करके एम्बेडेड फ़ाइल का कम-गुणवत्ता वाला रेंडर दिया गया। हालाँकि निम्न तकनीक ने काम किया (एक SVG फ़ाइल के अंदर एक SVG फ़ाइल को एम्बेड करने के लिए - जरूरी नहीं कि HTML पेज पर प्रस्तुत करने के लिए):

• एक टेक्स्ट एडिटर में SVG फाइल को एडिट करें।

• मेटाडेटा के अंत का पता लगाएं:

  </metadata>
    <g
     id="layer1"
     inkscape:groupmode="layer"
     inkscape:label="Layer 1">

• समूह टैग के बाद यह लाइन डालें:

  <use xlink:href="OTHERFILE.svg#layer1" y="0" x="0" />

• इस स्थिति में हम OTHERFILE.svg को फ़ाइल में शामिल कर रहे हैं, और सभी layer1 (पहली और डिफ़ॉल्ट परत)।

• इसे सेव करें और फिर इंक्सस्केप में फाइल खोलें।

यह तकनीक हर पृष्ठ पर एक मानक पृष्ठभूमि या लोगो रखने के लिए उपयोगी है। इसे फ़ाइल में सबसे पहले डालकर इसे पहले (और इस प्रकार सबसे नीचे) रेंडर किया जाएगा। आप इस विशेषता को जोड़कर इसे लॉक भी कर सकते हैं:

sodipodi:insensitive="true" 

दूसरे शब्दों में:

<use xlink:href="OTHERFILE.svg#layer1" sodipodi:insensitive="true" y="0" x="0" />

Comments

@WilliamEntriken "बाहरी फ़ाइलों" से आपका क्या अभिप्राय है? मैंने जिस विधि का वर्णन किया है वह एक बाहरी फ़ाइल का उपयोग करती है, अर्थात् इसमें अन्य सामान के साथ फाइल।

— निक गैमन

Answer 5

मुझे अपने एसवीजी में एक एसवीजी को एम्बेड करने की आवश्यकता थी, लेकिन इसके रंग को भी बदलना और ट्रांसफ़ॉर्म लागू करना।

केवल फ़ायरफ़ॉक्स नेस्टेड svg तत्वों पर "ट्रांसफॉर्म" विशेषता का समर्थन करता है। <छवि> का रंग बदलना भी संभव नहीं है। इसलिए दोनों के संयोजन की जरूरत थी।

मैंने जो किया वह निम्नलिखित था

<svg>
  <image x="0" y="0" xlink:href="data:image/svg+xml;base64,[base64 of nested svg]"></image>
</svg>

यह कम से कम फ़ायरफ़ॉक्स, क्रोम और इंकस्केप पर काम करता है।

यह माता-पिता svg उत्तर में बच्चे svg के अपवाद के साथ एक ही व्यवहार करता है कि अब आप इस पर परिवर्तन लागू कर सकते हैं।

Answer 6

नोट xlink:hrefको हटा दिया गया है , बस hrefइसके बजाय उपयोग करें , जैसे

<svg viewBox="0 0 512 512">
  <image width="512" height="512" href="external.svg"/>
</svg>

viewBox, widthऔर heightमान (इस उत्तर में) केवल उदाहरण के उद्देश्य से हैं, लेआउट को तदनुसार समायोजित करें (और पढ़ें )।

चूंकि <image> इसी तरह के शेयरों के रूप में <img>, जिसका अर्थ है कि यह एसवीजी स्टाइलिंग का समर्थन नहीं करता है, जैसा कि क्रिस्टियान के उत्तर में वर्णित है । उदाहरण के लिए, यदि मेरे पास निम्न सीएसएस लाइन है जो कि svg आकार का रंग फ़ॉन्ट रंग के समान है,

svg {
  fill: currentColor;
}

यदि <image>उपयोग किया जाता है तो उपरोक्त शैली लागू नहीं होगी । उसके लिए, आपको उपयोग करने की आवश्यकता है <use>, जैसा कि निक के उत्तर में दिखाया गया है ।

उसके उत्तर में नोट id="layer1"और href="OTHERFILE.svg#layer1"मूल्य अनिवार्य हैं ।

मतलब आपको idबाहरी svg फ़ाइल में विशेषता को जोड़ना है , इसलिए आपको अपने (अपनी वेबसाइट) या कहीं और द्वारा बाहरी (संशोधित) बाहरी svg फ़ाइल को होस्ट करने की आवश्यकता है। परिणामी बाहरी svg फ़ाइल इस तरह दिखाई देती है (ध्यान दें कि मैंने कहाँ रखी है id):

<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="..."/>
</svg>

आईडी का मूल्य कुछ भी हो सकता है, मैं इस उदाहरण में "लोगो" का उपयोग करता हूं।

उस svg को एम्बेड करने के लिए,

<svg viewBox="0 0 512 512">
  <use href="edited-external.svg#logo"/>
</svg>

यदि आप अपने html में इनलाइन के रूप में उपरोक्त svg का उपयोग करते हैं, तो आपको xmlns विशेषता की आवश्यकता नहीं है (कम से कम मुझे svgo से जो पता है )।

Comments

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

— राबर्ट लोंगसन