Chrome không hiển thị SVG được tham chiếu qua thẻ <img>


95

Tôi đang gặp sự cố với việc google chrome không hiển thị svg với thẻ img. Điều này xảy ra khi làm mới trang và tải trang đầu tiên. Tôi có thể làm cho hình ảnh hiển thị bằng cách "Kiểm tra phần tử", sau đó nhấp chuột phải vào tệp svg và mở tệp svg trong một tab mới. Hình ảnh svg sau đó sẽ được hiển thị trên trang gốc.

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

Ở đây hoàn toàn không hiểu vấn đề là gì. Hình ảnh svg hiển thị tốt trong IE9 và FF, không phải trong Chrome hoặc Safari.

Tôi cũng đã đặt các loại MIME của mình. (hình ảnh / svg + xml)

CHỈNH SỬA: Đây là một trang html đơn giản mà tôi đã xây dựng để giúp minh họa sự cố của tôi.

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

Như bạn có thể thấy, tôi đang cố gắng sử dụng tệp svg trong cả thẻ img và trong css làm hình nền. Không hoạt động khi tải trang đầu tiên trong chrome hoặc safari. Khi tôi kiểm tra phần tử, hãy nhấp chuột phải vào svg hoặc nhấp vào liên kết để tải svg trong một cửa sổ khác, tệp svg sẽ hiển thị trong tab gốc.


1
Bạn có thể đưa ra một ví dụ hoặc đăng một số mã ví dụ ở đây?
Sirko

Chúng tôi thực sự cần có thể tự mình xem và tái tạo điều này nếu bạn muốn trợ giúp.
Phrogz

Thật tình cờ, "Aged-Brass.svg" của bạn có chứa hình ảnh được nhúng không? Tôi đã gặp vấn đề tương tự và đó là những gì tôi đã truy tìm nó ...
McGarnagle

Câu trả lời:


123

Một cách đơn giản và dễ dàng; theo https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ Bạn phải mở tệp .SVG bằng trình soạn thảo văn bản (như notepad) và thay đổi

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

đến:

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

nó đã làm việc cho tôi!


9
Đây là một giải pháp làm việc. Tôi gặp sự cố này khi xuất một đối tượng vector thông minh dưới dạng SVG bằng photoshop.
Mikhail

10
Đây là một người tiết kiệm cuộc sống, đã dành hàng giờ để tìm ra vấn đề là gì. Cảm ơn bạn!!
mhodges

2
Tương tự như vậy, điều này đã giải quyết được vấn đề của tôi, cũng đã dành rất nhiều thời gian để tìm ra lý do tại sao hình ảnh không hiển thị.
MrEvers

3
Tôi không có dòng mã này trong tệp SVG và việc thêm nó vào thẻ <svg> không làm được gì đối với tôi.
Pete

2
Điều này sẽ được lên hàng đầu. Bạn đã cứu ngày của tôi.
Mattia Rasulo

42

Thẻ svg cần thuộc tính không gian tên xmlns:

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

Điều này. Và tôi phải tải nó làm hình nền của một div.
casey

1
Svg vẫn cần không gian tên. Chỉ cần đảm bảo rằng nó được xác định trong tệp SVG mà bạn sử dụng làm nền.
nổ

30

tôi đến đây bởi vì tôi gặp vấn đề tương tự, khi tôi kiểm tra phần tử, tôi có thể thấy tệp, nhưng trên trang web thì không thể (ngay cả khi sử dụng localhost)

câu trả lời cho vấn đề của tôi là lưu tệp SVG. Nếu bạn đã lưu nó từ illustrator, hãy đảm bảo nhấp vào 'nhúng' chứ không phải 'liên kết'. vì liên kết sẽ chỉ tham chiếu đến các tệp cục bộ của bạn hơn là bao gồm dữ liệu (Nếu tôi hiểu đúng về nó). nhập mô tả hình ảnh ở đây

Tôi đọc về nó trên trang web adobe có một số mẹo hữu ích khác để xuất http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

Điều này làm việc cho tôi, hy vọng nó hữu ích.


1
Bất cứ ai biết nếu có một cách để làm điều này với một đối tượng thông minh trong Photoshop? Mở illustrator và tái xuất với tùy chọn này trong illustrator là điều duy nhất cho phép tôi hiển thị svgs trong chrome, sau nhiều lần thử các bản sửa lỗi khác.
Alex Podworny

2
Tùy chọn đó có tác dụng gì đối với mã SVG thực tế?
Jānis Elmeris

19

Tôi đến đây vì tôi gặp sự cố tương tự, hình ảnh không được hiển thị. Điều tôi phát hiện ra là tiêu đề loại nội dung của máy chủ thử nghiệm của tôi không chính xác. Tôi đã sửa nó bằng cách thêm phần sau vào tệp .htaccess của mình:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

1
Cảm ơn. Đặt Content-Type thành image / svg + xml đã sửa nó.
samir105

Lưu ý rằng image/svgcung cấp tệp để tải xuống, nó phải có +xml.
Jakub Vrána

10

Sử dụng <object>thay thế (tất nhiên, thay thế từng URL bằng URL của riêng bạn):

.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

Việc thêm thuộc tính width vào thẻ [svg] (bằng cách chỉnh sửa XML nguồn svg) phù hợp với tôi: ví dụ:

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

Tôi đã có thể sử dụng mẫu của bạn để tạo trang thử nghiệm và nó hoạt động tốt. Giả định của tôi là có điều gì đó sai với tệp svg của bạn. Bạn có thể dán nó ở đây không? Đây là mẫu tôi đã sử dụng.

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

3

trông giống như một lỗi của Chrome, tôi đã làm một việc khác vì tôi gần như phát điên lên vì điều này ... bằng cách sử dụng trình gỡ lỗi Chrom nếu bạn thay đổi css của đối tượng svg mà nó hiển thị trên màn hình.

vì vậy những gì tôi đã làm là: 1. kiểm tra kích thước màn hình 2. lắng nghe sự kiện "tải" của đối tượng SVG của tôi 3. khi phần tử được tải, tôi thay đổi css của nó bằng cách sử dụng jQuery 4. nó đã thực hiện thủ thuật cho tôi.

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

Tôi gặp sự cố tương tự và các câu trả lời hiện có cho vấn đề này không thể áp dụng được hoặc có tác dụng nhưng chúng tôi không thể sử dụng chúng vì những lý do khác. Vì vậy, tôi phải tìm ra những gì Chrome không thích ở SVG của chúng tôi.

Trong trường hợp của chúng tôi, hóa ra là idthuộc tính của symbolthẻ trong tệp SVG có :trong đó, điều mà Chrome không thích. Ngay sau khi tôi gỡ bỏ :nó, nó hoạt động tốt.

Xấu:

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

Tốt:

<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

.svghình ảnh không có chiều cao và chiều rộng ban đầu. Do đó nó không thể nhìn thấy được. Bạn phải thiết lập nó.

Bạn có thể thực hiện trong dòng hoặc trong tệp css:

Trong dòng:

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

Tệp css:

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

2

Trong trường hợp của tôi, sự cố này vẫn tiếp diễn khi tôi tạo và lưu svg bằng Photoshop. Điều hữu ích là mở tệp bằng Illustrator và xuất svg sau đó.


Điều gì đã thay đổi trong mã SVG thực tế? Tôi không sử dụng Photoshop và Illustrator, tôi cần sửa một tệp SVG hiện có.
Jānis Elmeris

Trong trường hợp này, hãy thử câu trả lời @Sharif!
Mattia Rasulo

1

Tôi đã xuất svg của mình từ Photoshop CC ban đầu và phải thêm thủ công

version="1.1"vào <svg>thẻ

để hiển thị trên chrome.


1

Loại nội dung trong tiêu đề HTTP từ máy chủ là vấn đề đối với tôi. Tôi có một máy chủ node.js, đã thêm:

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

pageName là biến cục bộ của tôi cho những gì được yêu cầu.

Tôi đoán đây là một vấn đề phổ biến! Tôi đang sử dụng phiên bản Chrome hiện tại (tháng 3 năm 2020).


0

Có cùng một vấn đề. Nếu máy chủ được định cấu hình đúng và .htacces không phải là câu trả lời, bạn có thể muốn xem nguồn svg mà bạn đang nhúng. Của tôi được tạo bằng trình soạn thảo văn bản, hiển thị tốt trên Chrome & Safari bên trong mã html5, sau khi được nhúng, không có gì hiển thị. Đã thêm đúng phiên bản, kích thước, v.v. vào mã svg và hoạt động như một sự quyến rũ. Ngoài ra, tất cả các phong cách nội tuyến.

I E

<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

Tôi cũng gặp vấn đề tương tự với chrome, sau khi thêm DOCTYPEnó hoạt động như mong đợi

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

Trước

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

Sau

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

Sự khác biệt giữa hai đoạn mã này là gì? Tôi không nhìn thấy nó.
rgilligan

@rgilligan xấu của tôi, một trong những đầu tiên được cho là không có loại tài liệu
Madan Bhandari

0

Hãy cẩn thận rằng bạn không có thuộc tính css chuyển tiếp cho hình ảnh svg của bạn

Bây giờ tôi không hiểu tại sao, nhưng nếu bạn thực hiện: "chuyển đổi: tất cả dễ dàng 0,3 giây" cho hình ảnh svg trên Chrome, hình ảnh sẽ không xuất hiện

ví dụ:

* {
   transition: all ease 0.3s
  }

Chrome không hiển thị svg.

Xóa mọi thuộc tính css chuyển tiếp và thử lại


0

Khi gặp sự cố, hãy thử mở ảnh trước bằng chương trình có khả năng đọc ảnh svg.
Nếu không thành công, thì svg-image đã bị hỏng bằng cách nào đó.

Tôi đã có trường hợp đó và sao chép các đường dẫn svg trong một hình ảnh svg mới và điều chỉnh tất cả các chi tiết của các thẻ svg.

Tôi chưa bao giờ kiểm tra lý do nó không hiển thị nhưng giả sử rằng một số dấu hiệu đặc biệt vô hình gây ra lỗi kết xuất. Đôi khi các tệp được chỉnh sửa trên máy Mac Tôi đã gặp sự cố này trong ngữ cảnh khác.


0

Tôi đã gặp vấn đề tương tự với hình ảnh SVG được bao gồm qua thẻ IMG. Đối với tôi, Chrome không thích có một dòng trống trực tiếp ở đầu tệp.

Tôi đã xóa dòng trống và SVG của tôi ngay lập tức bắt đầu hiển thị.


0

Tôi đảm bảo rằng tôi thêm Kiểu của Hình ảnh . Nó đã làm việc cho tôi

style= "width:320; height:240"


0
Just replace <img> tag to <object> tag for SVG image.

<object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.