Chrome ไม่แสดงผล SVG ที่อ้างอิงผ่านแท็ก <img>

95

ฉันมีปัญหากับ google chrome ไม่แสดง svg ด้วยแท็ก img สิ่งนี้เกิดขึ้นเมื่อรีเฟรชเพจและการโหลดเพจครั้งแรก ฉันสามารถนำรูปภาพมาแสดงโดย "การตรวจสอบองค์ประกอบ" จากนั้นคลิกขวาที่ไฟล์ svg และเปิดไฟล์ svg ในแท็บใหม่ จากนั้นภาพ svg จะแสดงบนหน้าเดิม

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

สูญเสียโดยสิ้นเชิงที่นี่ว่าปัญหาคืออะไร ภาพ svg แสดงผลได้ดีใน IE9 และ FF ไม่ใช่ใน Chrome หรือ Safari

ฉันตั้งค่าประเภท 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>

อย่างที่คุณเห็นฉันพยายามใช้ไฟล์ svg ทั้งในแท็ก img และใน css เป็นภาพพื้นหลัง ไม่ทำงานกับการโหลดหน้าเริ่มต้นใน Chrome หรือ Safari เมื่อฉันตรวจสอบองค์ประกอบคลิกขวา svg หรือคลิกลิงค์เพื่อโหลด svg ในหน้าต่างอื่นไฟล์ svg จะแสดงในแท็บดั้งเดิม

google-chrome  svg 
— เจสันแวนวูเรน
แหล่งที่มา
1
คุณสามารถใส่ตัวอย่างหรือโพสต์โค้ดตัวอย่างที่นี่ได้หรือไม่?
— Sirko
เราจำเป็นต้องสามารถเห็นและทำซ้ำสิ่งนี้ได้ด้วยตนเองหากคุณต้องการความช่วยเหลือ
— Phrogz
"Aged-Brass.svg" ของคุณมีภาพฝังอยู่หรือไม่ ฉันมีปัญหาเดียวกันและนั่นคือสิ่งที่ฉันโยงไปถึง ...
— McGarnagle

คำตอบ:

125

วิธีที่ง่ายและสะดวก ตาม https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ คุณต้องเปิดไฟล์. SVG ด้วยโปรแกรมแก้ไขข้อความ (เช่น notepad) และเปลี่ยน

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

ถึง:

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

มันได้ผลสำหรับฉัน!

— ชารีฟยัซเดียน
แหล่งที่มา
9
นี่เป็นวิธีแก้ปัญหาที่ใช้ได้ผล ฉันพบปัญหานี้เมื่อส่งออกวัตถุเวกเตอร์อัจฉริยะเป็น SVG โดยใช้ photoshop
— Mikhail
10
นี่เป็นการช่วยชีวิตโดยใช้เวลาหลายชั่วโมงในการพยายามค้นหาว่าปัญหาคืออะไร ขอบคุณ!!
— mhodges
2
ในทำนองเดียวกันสิ่งนี้ช่วยแก้ปัญหาของฉันและใช้เวลาส่วนใหญ่ในการพยายามหาสาเหตุที่รูปภาพไม่ปรากฏขึ้น
— MrEvers
3
ฉันไม่มีโค้ดบรรทัดนี้ในไฟล์ SVG และการเพิ่มในแท็ก <svg> ไม่ได้ทำอะไรให้ฉันเลย
— พีท
2
นี่ควรจะไกลขึ้นด้านบน คุณช่วยวันของฉัน
— Mattia Rasulo
42

svg-tag ต้องการแอตทริบิวต์ namespace xmlns:

<svg xmlns="http://www.w3.org/2000/svg"></svg>
— ปัง
แหล่งที่มา
นี้. และฉันต้องโหลดเป็นภาพพื้นหลังของ div
— casey
1
svg ยังคงต้องการเนมสเปซ ตรวจสอบให้แน่ใจว่าได้กำหนดไว้ในไฟล์ SVG ที่คุณใช้เป็นพื้นหลัง
— ปัง
30

ฉันมาที่นี่เพราะฉันมีปัญหาเดียวกันเมื่อฉันตรวจสอบองค์ประกอบฉันสามารถดูไฟล์ได้ แต่บนไซต์ฉันทำไม่ได้ (แม้ว่าจะใช้ localhost)

คำตอบสำหรับปัญหาของฉันคือการบันทึกไฟล์ SVG หากคุณบันทึกจาก illustrator อย่าลืมคลิก "ฝัง" ไม่ใช่ "ลิงก์" เนื่องจากลิงก์จะอ้างถึงไฟล์ในเครื่องของคุณแทนที่จะรวมข้อมูล (ถ้าฉันเข้าใจถูกต้อง) ป้อนคำอธิบายภาพที่นี่

ฉันอ่านเกี่ยวกับเรื่องนี้ในเว็บไซต์ adobe ซึ่งมีเคล็ดลับที่เป็นประโยชน์อื่น ๆ ในการส่งออก http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

สิ่งนี้ได้ผลสำหรับฉันหวังว่ามันจะเป็นประโยชน์

— มิ้นท์เวลส์
แหล่งที่มา
1
ใครทราบว่ามีวิธีทำกับวัตถุอัจฉริยะใน Photoshop หรือไม่? การเปิดตัวนักวาดภาพประกอบและการรีพอร์ตด้วยตัวเลือกนี้ใน illustrator เป็นสิ่งเดียวที่ทำให้ฉันแสดง svgs ใน chrome หลังจากพยายามแก้ไขหลายครั้ง
— Alex Podworny
2
ตัวเลือกนั้นมีผลอย่างไรกับรหัส SVG จริง?
— Jānis Elmeris
19

ฉันมาที่นี่เพราะฉันมีปัญหาคล้าย ๆ กันคือไม่มีการแสดงภาพ สิ่งที่ฉันพบคือส่วนหัวประเภทเนื้อหาของเซิร์ฟเวอร์ทดสอบของฉันไม่ถูกต้อง ฉันแก้ไขโดยเพิ่มสิ่งต่อไปนี้ในไฟล์. htaccess ของฉัน:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz
— ผู้ใช้ 87312
แหล่งที่มา
1
ขอบคุณ. การตั้งค่า Content-Type เป็น image / svg + xml แก้ไข
— samir105
โปรดทราบว่าข้อเสนอไฟล์สำหรับการดาวน์โหลดก็จะต้องมีimage/svg +xml
— Jakub Vrána
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>
ขยายข้อมูลโค้ด

— เอสเซม
แหล่งที่มา
6

การเพิ่มแอตทริบิวต์ width ให้กับแท็ก [svg] (โดยการแก้ไข XML ซอร์ส svg) ได้ผลสำหรับฉัน: เช่น:

<!-- 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

ดูเหมือนบั๊กของ Chrome ฉันทำอย่างอื่นเพราะฉันเกือบจะบ้าเพราะสิ่งนี้ ... โดยใช้ Chrom debugger ถ้าคุณเปลี่ยน css ของวัตถุ svg ที่แสดงบนหน้าจอ

สิ่งที่ฉันทำคือ 1. ตรวจสอบขนาดหน้าจอ 2. ฟังเหตุการณ์ "โหลด" ของวัตถุ SVG ของฉัน 3. เมื่อองค์ประกอบถูกโหลดฉันเปลี่ยน css โดยใช้ jQuery 4. มันทำเคล็ดลับสำหรับฉัน

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

ฉันมีปัญหาที่คล้ายกันและคำตอบที่มีอยู่สำหรับปัญหานี้ใช้ไม่ได้หรือใช้ได้ผล แต่เราไม่สามารถใช้กับเหตุผลอื่นได้ ผมจึงต้องหาสิ่งที่ Chrome ไม่ชอบเกี่ยวกับ SVG ของเรา

ในกรณีของเรากลับกลายเป็นว่าidแอตทริบิวต์ของsymbolแท็กในไฟล์ SVG มี:อยู่ในนั้นซึ่ง Chrome ไม่ชอบ ทันทีที่ฉันถอด:มันก็ใช้งานได้ดี

แย่:

<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รูปภาพไม่มีความสูงและความกว้างเริ่มต้น ดังนั้นจึงมองไม่เห็น คุณต้องตั้งค่า

คุณสามารถทำได้ทั้งในบรรทัดหรือในไฟล์ css:

ในบรรทัด:

<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;
}
— Krzysztof Janiszewski
แหล่งที่มา
2

ในกรณีของฉันปัญหานี้ยังคงมีอยู่เมื่อฉันสร้างและบันทึก svg โดยใช้ Photoshop สิ่งที่ช่วยได้คือการเปิดไฟล์โดยใช้ Illustrator และส่งออก svg ในภายหลัง

— Niels Vanhorenbeeck
แหล่งที่มา
มีอะไรเปลี่ยนแปลงในรหัส SVG จริง? ฉันไม่ได้ใช้ทั้ง Photoshop หรือ Illustrator ฉันต้องแก้ไขไฟล์ SVG ที่มีอยู่
— Jānis Elmeris
ในกรณีนี้ลองตอบ @Sharif!
— Mattia Rasulo
1

ประเภทเนื้อหาในส่วนหัว HTTP จากเซิร์ฟเวอร์เป็นปัญหาสำหรับฉัน ฉันมีเซิร์ฟเวอร์ node.js เพิ่ม:

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

pageName เป็นตัวแปรภายในของฉันสำหรับสิ่งที่ร้องขอ

ฉันเดาว่านี่เป็นปัญหาที่พบบ่อย! กำลังใช้ Chrome เวอร์ชันปัจจุบัน (มี.ค. 2020)

— แบดแมนกู๊ดแมน
แหล่งที่มา
0

มีปัญหาเดียวกัน หากกำหนดค่าเซิร์ฟเวอร์อย่างถูกต้องและ. htacces ไม่ใช่คำตอบคุณอาจต้องการดูแหล่ง svg ที่คุณกำลังฝังอยู่ Mine ถูกสร้างขึ้นด้วยโปรแกรมแก้ไขข้อความซึ่งแสดงผลได้ดีบน Chrome & Safari ภายในโค้ด 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>
— อุกุ
แหล่งที่มา
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
@rgilligan ฉันไม่ดีคนแรกควรจะไม่มีประเภท
— Madan Bhandari
0

ระวังว่าคุณไม่มีคุณสมบัติการเปลี่ยนแปลง css สำหรับภาพ svg ของคุณ

ตอนนี้ฉันไม่รู้ว่าทำไม แต่ถ้าคุณทำ: "การเปลี่ยนแปลง: ความสะดวกทั้งหมด 0.3 วินาที" สำหรับภาพ svg บน Chrome รูปภาพจะไม่ปรากฏ

เช่น:

* {
   transition: all ease 0.3s
  }

Chrome ไม่แสดงผล svg

ลบคุณสมบัติ css การเปลี่ยนแปลงใด ๆ แล้วลองอีกครั้ง

— wilo087
แหล่งที่มา
0

ในปัญหาให้ลองเปิดภาพก่อนด้วยโปรแกรมที่สามารถอ่าน svg-images
หากล้มเหลวแสดงว่า svg-image เสียหายอย่างใด

ฉันมีกรณีนั้นและคัดลอก svg-paths ใน svg-image ใหม่และปรับรายละเอียดทั้งหมดของ svg-tags

ฉันไม่เคยทดสอบสาเหตุที่มันไม่แสดงผล แต่สมมติว่าสัญญาณพิเศษที่มองไม่เห็นทำให้เกิดข้อผิดพลาดในการแสดง บางครั้งการแก้ไขไฟล์บน Mac ฉันมีปัญหานี้ในบริบทอื่นอยู่แล้ว

— เดวิด
แหล่งที่มา
0

ฉันประสบปัญหาเดียวกันกับภาพ SVG ที่รวมอยู่ในแท็ก IMG สำหรับฉันแล้ว Chrome ไม่ชอบให้มีบรรทัดว่างที่ด้านบนของไฟล์โดยตรง

ฉันลบบรรทัดว่างและ SVG ของฉันก็เริ่มแสดงผลทันที

— pwbred
แหล่งที่มา
0

ฉันแน่ใจว่าฉันได้เพิ่มสไตล์ของรูปภาพแล้ว มันได้ผลสำหรับฉัน

style= "width:320; height:240"

— pensebien
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.