Chrome ने एसवीजी को <img> टैग के माध्यम से संदर्भित नहीं किया है

95

मैं गूगल क्रोम के साथ मुद्दों को एक img टैग के साथ svg प्रतिपादन नहीं कर रहा हूँ। यह पृष्ठ को ताज़ा करने और प्रारंभिक पृष्ठ लोड होने पर होता है। मुझे "एलीमेंट का निरीक्षण" करके दिखाने के लिए छवि मिल सकती है, फिर svg फ़ाइल पर क्लिक करके svg फ़ाइल को एक नए टैब में खोलना चाहिए। Svg छवि तब मूल पृष्ठ पर प्रदान की जाएगी।

<img src="../images/Aged-Brass.svg">

पूरी तरह से यहाँ नुकसान के रूप में क्या मुद्दा है। Svg छवि IE9 और FF में केवल क्रोम या सफारी में नहीं है।

मेरे पास मेरे MIME प्रकार भी सेट हैं। (छवि / svg + xml)

संपादित करें: यहाँ एक सरल HTML पृष्ठ है जिसे मैंने अपने मुद्दे को समझाने में मदद करने के लिए बनाया है।

<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>

    <style>
        #BackgroundImage{
            background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
            width: 400px;
            height: 600px;
        }

        #ImageTag{
            width: 400px;
            height: 600px;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="ImageTag">
        <img src="../images/Aged-Brass.svg">
    </div>
    <div id="BackgroundImage"></div>
</body>
</html>

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

google-chrome  svg 
— जेसन वैन वुरेन
स्रोत
1
क्या आप एक उदाहरण रख सकते हैं या कुछ उदाहरण कोड यहाँ पोस्ट कर सकते हैं?
— सिरको
यदि आप मदद चाहते हैं तो हमें वास्तव में इसे स्वयं देखने और पुन: पेश करने में सक्षम होने की आवश्यकता है।
— फ्रॉग्ज
किसी भी संयोग से, आपकी "वृद्ध-पीतल.स्वग" में एक अंतर्निहित छवि है? मुझे भी यही समस्या थी, और यही बात मैंने उसे
— बताई

जवाबों:

124

एक सरल और आसान तरीका; https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ के अनुसार आपको एक पाठ संपादक (जैसे नोटपैड) के साथ .SVG फ़ाइल को खोलना होगा और बदलना होगा।

xlink:href="data:img/png;base64,

सेवा:

xlink:href="data:image/png;base64,

यह मेरे लिए काम किया!

— शरीफ यज़्दियान
स्रोत
9
यह एक कार्यशील समाधान है। मैं इस मुद्दे पर भाग गया जब एक स्मार्ट वेक्टर वस्तु का निर्यात करते हुए SVG के रूप में फ़ोटोशॉप का उपयोग कर।
— मिखाइल
10
यह एक जीवन रक्षक था, इस मुद्दे को जानने के लिए घंटों कोशिश करता रहा। धन्यवाद!!
— 1919 mhodges
2
इसी तरह, इसने मेरी समस्या को हल कर दिया, यह जानने में बहुत समय बिताया कि छवि क्यों नहीं दिख रही थी।
— १
3
मेरे पास SVG फ़ाइल में कोड की यह पंक्ति नहीं थी, और इसे <svg> टैग में जोड़ने से मेरे लिए कुछ नहीं हुआ।
— पीट
2
यह बहुत ऊपर होना चाहिए। आपने मेरा दिन बचाया।
— मटिया रसूलो
42

Svg- टैग को नामस्थान विशेषता xmlns की आवश्यकता है:

<svg xmlns="http://www.w3.org/2000/svg"></svg>
— धमाके
स्रोत
यह। और मुझे इसे एक डिव की पृष्ठभूमि-छवि के रूप में लोड करना पड़ा।
— केसी
1
Svg अभी भी नाम स्थान की जरूरत है। बस सुनिश्चित करें कि यह एसवीजी फ़ाइल में परिभाषित है जिसे आप पृष्ठभूमि के रूप में उपयोग करते हैं।
— धमाका
30

मैं यहाँ आया था क्योंकि मुझे वही समस्या थी, जब मैं उस तत्व का निरीक्षण करता हूँ जिसे मैं फ़ाइल देख सकता हूँ, लेकिन उस साइट पर मैं नहीं कर सकता (भले ही लोकलहोस्ट का उपयोग करते समय)

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

मैं इसके बारे में पढ़ा Adobe वेबसाइट पर जो निर्यात करने के लिए कुछ अन्य उपयोगी सुझाव है http://www.adobe.com/inspire/2013/09/09/exporting-svg-illustrator.html

इसने मेरे लिए काम किया, आशा है कि यह उपयोगी था।

— MintWelsh
स्रोत
1
किसी को पता है कि अगर वहाँ फ़ोटोशॉप में एक स्मार्ट ऑब्जेक्ट के साथ ऐसा करने का कोई तरीका है? इलस्ट्रेटर को खोलना और इलस्ट्रेटर में इस विकल्प के साथ फिर से निर्यात करना एकमात्र चीज थी जो मुझे क्रोम में svgs दिखाती है, अन्य सुधारों पर कई प्रयासों के बाद।
— एलेक्स पॉडवॉर्न
2
उस विकल्प का वास्तविक SVG कोड पर क्या प्रभाव पड़ता है?
— जानिस एल्मरिस
19

मैं यहां आया क्योंकि मुझे इसी तरह की समस्या थी, छवि प्रदान नहीं की जा रही थी। मुझे पता चला कि मेरे परीक्षण सर्वर का कंटेंट टाइप हेडर सही नहीं था। मैंने इसे अपने .htaccess फ़ाइल में निम्न जोड़कर ठीक किया:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz
— user87312
स्रोत
1
धन्यवाद। छवि / svg + xml के लिए सामग्री-प्रकार सेट करना इसे ठीक किया।
— samir105
ध्यान दें कि image/svgडाउनलोड करने के लिए फ़ाइल प्रदान करता है, उसके पास होना चाहिए +xml।
— जैकब वृना
10

<object>इसके बजाय उपयोग करें (बेशक, प्रत्येक URL को अपने साथ बदलें):

.BackgroundImage {
        background: url('https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg') no-repeat scroll left top;
        width: 400px;
        height: 600px;
}
<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>
</head>
<body>
    <div id="ObjectTag">
        <object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg" width="400" height="600">
          Your browser does not support SVG.
        </object>
    </div>
    <div class="BackgroundImage"></div>
</body>
</html>
स्निपेट का विस्तार करें

— Essem
स्रोत
6

[Svg] टैग में (svg स्रोत XML का संपादन करके) चौड़ाई चौड़ाई जोड़ना मेरे लिए काम कर रहा है: उदा:

<!-- This didn't render -->
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
...  
</svg>

<!-- This did -->
<svg version="1.1" baseProfile="full" width="1000" xmlns="http://www.w3.org/2000/svg">
...  
</svg>
— सिलास पामर
स्रोत
3

मैं परीक्षण पृष्ठ बनाने के लिए आपके नमूने का उपयोग करने में सक्षम था, और यह ठीक काम करता था। मेरी धारणा यह है कि आपकी svg फाइल में कुछ गड़बड़ है। क्या आप यहाँ भी पेस्ट कर सकते हैं? यहाँ नमूना मैं इस्तेमाल किया है।

 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
   <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
   <g>
      <title>Layer 1</title>
      <ellipse ry="30" rx="30" id="svg_1" cy="50" cx="50" stroke-width="5" stroke="#000000" fill="#FF0000"/>
   </g>
 </svg>
— RestingRobot
स्रोत
3

क्रोम बग जैसा दिखता है, मैंने कुछ और किया क्योंकि मैं लगभग इस वजह से पागल हो गया ... क्रोम डिबगर का उपयोग करते हुए यदि आप स्क्रीन पर दिखाए जाने वाले svg ऑब्जेक्ट के सीएसएस को बदलते हैं।

इसलिए मैंने जो किया वह था: 1. स्क्रीन साइज़ की जांच 2. मेरी एसवीजी ऑब्जेक्ट की "लोड" घटना को सुनें 3. जब तत्व लोड हो जाए तो मैं jQuery का उपयोग करके अपना सीएसएस बदल दूं। इसने मेरे लिए यह चाल चली।

if (jQuery(window).width() < 769) {

  jQuery('object#mysvg-logo')[0].addEventListener('load', function() {
       jQuery("object#mysvg-logo").css('width','181px');
  }, true);

}
width: 180px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<object id="mysvg-logo" type="image/svg+xml" data="my svg logo url here">Your browser does not support SVG</object>
स्निपेट का विस्तार करें

— योसी बेन-डेविड
स्रोत
2

मेरे पास एक समान समस्या थी और इसके लिए मौजूदा उत्तर या तो लागू नहीं थे, या काम नहीं किए गए थे लेकिन हम अन्य कारणों से उनका उपयोग नहीं कर सकते थे। इसलिए मुझे यह पता लगाना था कि क्रोम हमारे एसवीजी के बारे में क्या नापसंद करता है।

हमारे मामले में यह पता चला कि एसवीजी फ़ाइल में टैग की idविशेषता symbolउसमें एक थी :, जो क्रोम को पसंद नहीं थी। जैसे ही मैंने हटाया :यह ठीक काम किया।

खराब:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="ThisIDHasAColon:AndChromeDoesNotLikeIt">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#ThisIDHasAColon:AndChromeDoesNotLikeIt"
    />
</svg>

अच्छा:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="NoMoreColon">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#NoMoreColon"
    />
</svg>
— माइक विलिस
स्रोत
2

.svgछवि में यह प्रारंभिक ऊंचाई और चौड़ाई नहीं है। इसलिए यह दिखाई नहीं दे रहा है। आपको इसे सेट करना होगा।

आप या तो लाइन में या सीएसएस फ़ाइल में कर सकते हैं:

पंक्ति में:

<img src="../images/Aged-Brass.svg" class="image" alt="logo" style="width: 100px; height: 50px;">

Css फ़ाइल:

<img src="../images/Aged-Brass.svg" class="image" alt="logo">

.image {
    width: 100px;
    height: 50px;
}
— क्रिज़्सटोफ़ जनिस्ज़वेस्की
स्रोत
2

मेरे मामले में यह समस्या बनी रही जब मैंने फ़ोटोशॉप का उपयोग करके svg को बनाया और बचाया। क्या मदद की, इलस्ट्रेटर का उपयोग करके फ़ाइल खोल रहा था और बाद में svg को निर्यात कर रहा था।

— नील्स वनोरेनबाइक
स्रोत
वास्तविक एसवीजी कोड में क्या बदलाव आया है? मैं न तो फोटोशॉप का इस्तेमाल कर रहा हूं और न ही इलस्ट्रेटर का, मुझे मौजूदा एसवीजी फाइल को ठीक करने की जरूरत है।
— जानिस एल्मरिस
इस मामले में @Sharif जवाब देने की कोशिश करो!
— मटिया रसूलो
1

मैंने शुरू में अपना svg फ़ोटोशॉप CC से निर्यात किया और मैन्युअल रूप से जोड़ना पड़ा

version="1.1"में <svg>टैग

क्रोम पर दिखाने के लिए।

— एंडी गुयेन
स्रोत
1

सर्वर से HTTP हेडर में सामग्री प्रकार मेरे लिए समस्या थी। मेरे पास एक नोड है। जेएस सर्वर, जोड़ा गया:

if( pageName.substring(pageName.lastIndexOf('.')) == '.svg' ) {
  res.writeHead(200, { "Content-Type": "image/svg+xml" });
}

पेजनाम अनुरोध के लिए मेरा स्थानीय चर है।

मेरा अनुमान है कि यह एक आम समस्या है! Chrome के वर्तमान संस्करण (मार्च 2020) का उपयोग कर रहा हूँ।

— बदनाम गुडमैन
स्रोत
0

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

अर्थात

<svg version="1.1" baseProfile="full" width="24" height="24" xmlns="http://www.w3.org/2000/svg"> 
  <rect x="0" y="0" rx="2" ry="2" width="24" height="24" style="fill:#fbc800;width:24px;height:24px;"  />  
</svg>
— Uku
स्रोत
0

मुझे क्रोम के साथ भी यही मुद्दा मिला, DOCTYPEइसे जोड़ने के बाद उम्मीद के मुताबिक काम किया गया

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

इससे पहले

    <?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>

उपरांत

    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>
— मदन भंडारी
स्रोत
इन दो कोड स्निपेट के बीच क्या अंतर है? मैं इसे नहीं देख रहा हूं।
— rgilligan
@ क्रिलिगन मेरा बुरा, पहले एक के बिना करने के लिए माना जाता था
— मदन भंडारी
0

सावधान रहें कि आपके पास svg छवियों के लिए संक्रमण सीएसएस संपत्ति नहीं है

मैं अब ऐसा क्यों नहीं करता, लेकिन यदि आप बनाते हैं: क्रोम पर चित्र नहीं दिखाई देते हैं तो svg छवि के लिए "संक्रमण: सभी आसानी 0.3s"

उदाहरण के लिए:

* {
   transition: all ease 0.3s
  }

Chrome svg को रेंडर नहीं करता है।

किसी भी संक्रमण सीएसएस संपत्ति को निकालें और पुन: प्रयास करें

— wilo087
स्रोत
0

समस्याओं पर पहले ऐसे प्रोग्राम से चित्रों को खोलने की कोशिश करें जो svg-images को पढ़ने में सक्षम हों।
यदि वह विफल रहता है, तो svg- छवि किसी तरह भ्रष्ट हो जाती है।

मेरे पास वह मामला था और एक नई svg- छवि में svg-path को कॉपी किया और svg-tags के सभी विवरणों को समायोजित किया।

मैंने कभी इस कारण का परीक्षण नहीं किया कि यह प्रतिपादन नहीं कर रहा था, लेकिन मान लीजिए कि कुछ अदृश्य विशेष संकेतों ने रेंडर-एरर का कारण बना। कभी-कभी मैक पर संपादित फ़ाइलों को प्राप्त करना मेरे पास यह मुद्दा पहले से ही अन्य संदर्भ में था।

— डेविड
स्रोत
0

मैं एक ही समस्या के साथ एक SVG छवि IMG टैग के माध्यम से शामिल कर रहा था। यह मेरे लिए निकला कि क्रोम को फ़ाइल के शीर्ष पर एक रिक्त रेखा होना पसंद नहीं था।

मैंने खाली लाइन हटा दी और मेरे एसवीजी ने तुरंत प्रतिपादन शुरू कर दिया।

— pwbred
स्रोत
0

मैं यह सुनिश्चित करता हूं कि मैं स्टाइल की छवि को जोड़ दूं । इसने मेरे लिए काम किया

style= "width:320; height:240"

— pensebien
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.