Xin lỗi, trình duyệt của bạn không hỗ trợ lỗi SVG nội tuyến

Mục Lục Dịch vụ

Hầu hết các trình duyệt hiện nay đều hỗ trợ SVG nhưng có một số trình duyệt không

qua Matthew Adams

Matthew là một freelancer đã tạo ra nhiều bài báo về các chủ đề khác nhau liên quan đến công nghệ. Trọng tâm chính của anh ấy là Hệ điều hành Windows và tất cả những thứ … đọc thêm

Đã cập nhật vào 28 tháng 7 năm 2022

Sự thật được kiểm tra bởi
Alex Serban

Sau khi rời bỏ phong cách làm việc của công ty, Alex đã tìm thấy phần thưởng trong lối sống phân tích liên tục, phối hợp nhóm và làm phiền đồng nghiệp của mình. Giữ MCSA Windows Server … đọc thêm

SVG là một định dạng hình ảnh duy nhất mà một số trang web kết hợp. Một số nhà phát triển trang web đã đăng trên các diễn đàn về sự cố SVG nội tuyến.

Khi vấn đề đó phát sinh, các trang web hiển thị Xin lỗi, trình duyệt của bạn không hỗ trợ SVG nội tuyến thay vì hiển thị đồ họa SVG.

Điều đó có nghĩa là trình duyệt của bạn không hỗ trợ svg nội tuyến?

Trình duyệt không hỗ trợ sự cố SVG nội tuyến xuất hiện do các nhà phát triển đang cố gắng nhúng các phần tử SVG trên các trang web không hoàn toàn tương thích.

Sự cố tương tự xuất hiện khi các trình duyệt không hỗ trợ tệp PDF nội tuyến và có nguyên nhân tương tự, nhưng nó chủ yếu liên quan đến các vấn đề về khả năng tương thích của trình duyệt.

Đó có thể là do sự cố giao diện DOM SVG hoặc đơn giản là do một số trình duyệt cũ hơn không hỗ trợ đầy đủ SVG. Một số nhà phát triển cũng có thể cần sửa mã SVG của họ.

Hơn nữa, cho phép chúng tôi làm sáng tỏ hơn về hỗ trợ SVG của trình duyệt và nếu tất cả các trình duyệt Internet đều tương thích với tính năng này.

Các tệp SVG có hoạt động với tất cả các trình duyệt không?

Bạn có thể muốn biết rằng SVG được hỗ trợ chính thức bởi tất cả các trình duyệt web chính hiện có, bao gồm cả Internet Explorer không còn tồn tại gần đây.

Trong các thử nghiệm gần đây được thực hiện về vấn đề này, việc hỗ trợ định dạng SVG trên các công cụ kết xuất web hiện đại đã chứng minh rằng, như chúng tôi đã nêu ở trên, hầu như tất cả chúng đều tương thích.

Các thử nghiệm đã được thực hiện bằng cách sử dụng bốn công cụ kết xuất chính và 15 trình duyệt khác nhau bao gồm tất cả những trình duyệt phổ biến mà bạn đã biết, bao gồm Opera, Firefox, Chrome, Maxthon, UC và các trình duyệt khác.

Tôi có thể làm gì nếu trình duyệt không hỗ trợ SVG nội tuyến?

1. Thử mở các trang SVG bằng các trình duyệt thay thế

Bạn có thể tìm thấy các trang hiển thị trên trình duyệt web thay thế với đồ họa SVG tốt. Hầu hết các trình duyệt Chromium chính, chẳng hạn như Opera, hỗ trợ các phần tử trang SVG.

Opera là một trong những trình duyệt quan trọng nhất với công cụ Blink thường sẽ hiển thị hình ảnh SVG mà không gặp vấn đề gì.

Opera có nhiều tính năng duyệt độc đáo và nguyên bản. Trang bắt đầu của nó kết hợp các phím tắt hình thu nhỏ Quay số nhanh mới lạ cho các trang. Người dùng có thể hợp nhất các Quay số nhanh đó vào các thư mục để sắp xếp chúng tốt hơn.

Thanh bên của Opera cũng bao gồm một trình phát YouTube tích hợp và các sứ giả tích hợp cho người dùng.

Các tính năng Opera hữu ích khác

• Trình tiết kiệm pin của Opera kéo dài tuổi thọ pin cho máy tính xách tay
• Trình duyệt này bao gồm một VPN tích hợp
• Người dùng có thể chụp ảnh nhanh trang web bằng công cụ Ảnh chụp nhanh của Opera
• Tính năng chặn quảng cáo loại bỏ quảng cáo khỏi các trang mở trong Opera

Opera

Đảm bảo bạn sẽ không bao giờ gặp phải lỗi hỗ trợ SVG với trình duyệt linh hoạt và nhanh chóng đáng kinh ngạc này.

2. Cập nhật trình duyệt của bạn lên phiên bản mới nhất

Google Chrome

1. Nhấn vào Tùy chỉnh và kiểm soát Google Chrome nút menu.
2. Lựa chọn Cứu giúpvà nhấp vào Về Google Chrome để mở tab trong ảnh ngay bên dưới.
3. Nhấp chuột Khởi chạy lại khi trình duyệt đã cập nhật.

Firefox

1. Nhấn vào Mở nút menu trên thanh công cụ URL của Firefox.
2. Lựa chọn Cứu giúp để mở menu đó.
3. Sau đó nhấp vào Giới thiệu về Firefox để mở cửa sổ ngay bên dưới.
   
4. Nhấn nút Khởi động lại để cập nhật Firefox cái nút.

Microsoft Edge

1. Nhấn các phím bàn phím Alt và F cùng một lúc.
2. Lựa chọn Giúp đỡ và phản hồi và bấm vào Giới thiệu về Microsoft Edge để mở tab trong ảnh ngay bên dưới.
   
3. Sau đó khởi động lại Edge nếu trình duyệt được cập nhật.

3. Kiểm tra mã SVG của bạn

Đảm bảo bạn đã nhập đúng mã SVG nội tuyến. Kiểm tra mã xem có lỗi chính tả hoặc lỗi cú pháp nào không. Đây là một ví dụ về mã SVG nội tuyến để kiểm tra mã của bạn bằng cách:

<!DOCTYPE html>     
<html xmlns="http://www.w3.org/1999/xhtml">     
  <head>

    <meta charset="UTF-8"/>     
    <title>SVG Inlined</title>

  </head>
  <body>

    <h1>An SVG rectangle inlined</h1>

    <svg    
       xmlns="http://www.w3.org/2000/svg"     
       version="1.1"
       width="150"
       height="150">
      <rect
         width="90"
         height="90"
         x="30"
         y="30"
         style="fill:#0000ff;fill-opacity:0.75;stroke:#000000"/>
    </svg>

  </body>
</html>

Ví dụ mã SVG nội tuyến ở trên sử dụng cú pháp XHTML, mà hầu hết các trình duyệt chính đều hỗ trợ. Tuy nhiên, nó cũng sẽ hoạt động đối với HTML 5.

Bạn cũng có thể tìm thêm các ví dụ khác về mã SVG nội tuyến tại U3schools.com. Kiểm tra xem mã SVG của bạn có khớp với các ví dụ để triển khai chính xác hay không.

4. Kiểm tra plugin SVG Web JavaScript

Các nhà phát triển trang web đang tìm cách triển khai SVG nội tuyến cho các trình duyệt cũ hơn không hỗ trợ nó nên xem SVG Web.

Thư viện JavaScript đó cho phép hỗ trợ SVG cho các trình duyệt cũ hơn bằng cách sử dụng Flash. Nhấp chuột svgweb-2011-02-03-Lurker-Above.zip trên trang Web SVG để tải xuống.

5. Sửa đổi chức năng insertComponent

Một số nhà phát triển đã xác nhận rằng họ đã khắc phục sự cố trình duyệt của bạn không hỗ trợ SVG nội tuyến bằng cách sửa đổi chức năng insertComponent trong Rendering / BrowserRenderer.ts bằng các công cụ dành cho nhà phát triển trình duyệt.

Hãy thử sửa đổi insertComponent để nó sử dụng thẻ ag như được hiển thị ngay bên dưới:

const containerElement = parent.namespaceURI === 'http://www.w3.org/2000/svg' ?
document.createElementNS('http://www.w3.org/2000/svg', 'g') :
document.createElement('blazor-component');

Các bản sửa lỗi ở trên có thể giải quyết trình duyệt không hỗ trợ vấn đề SVG nội tuyến cho một số nhà phát triển web.

Bây giờ bạn biết phải làm gì khi gặp các thông báo như Trình duyệt của bạn không hỗ trợ SVG., hoặc các tình huống chẳng hạn như SVG nội tuyến không hiển thị hoặc SVG hoạt động trong Chrome nhưng không hoạt động trong Firefox.

Tham khảo hướng dẫn ở trên để biết các thông báo lỗi như Trình duyệt của bạn không hỗ trợ SVG trong Chrome hoặc Trình duyệt của bạn không hỗ trợ SVG trong Edge.

Hãy nhớ rằng cũng có nhiều cách khác nhau để đưa đồ họa SVG lên các trang web. Vì vậy, bạn nên thử các phương pháp thay thế để thêm đồ họa SVG vào trang web của mình.