Thêm đồ họa vectơ có thể mở rộng (SVG) trong trình duyệt không được hỗ trợ
Trong một bài viết trước trong loạt bài này, chúng tôi đã đề cập một chút về cạm bẫy của SVG với các trình duyệt cũ và sử dụng Raphael.js để phục vụ đồ họa như một giải pháp thay thế. Trong bài viết này, chúng tôi sẽ xem xét vấn đề này hơn nữa.
Ý tưởng rất đơn giản, chúng tôi vẫn sẽ sử dụng các yếu tố SVG làm cách chính để phân phối đồ họa trên trang web của mình, nhưng đồng thời chúng tôi cũng sẽ cung cấp chức năng dự phòng để nó vẫn có thể được hiển thị trong các trình duyệt không được hỗ trợ.
Chắc chắn, có nhiều con đường chúng ta có thể đi, nhưng chúng ta sẽ chỉ xem xét hai giải pháp mà tôi nghĩ là một giải pháp chung tốt hơn. Vì vậy, hãy xem làm thế nào chúng ta có thể làm điều đó.
Sử dụng phần tử đối tượng
Ngoài việc đưa nó trực tiếp vào một tài liệu HTML, có một số cách để nhúng SVG. Chẳng hạn, nếu chúng ta lưu trữ đồ họa trong .svg tập tin, chúng ta có thể sử dụng thành phần.
Với mục đích trình diễn, chúng tôi đã thêm logo Apple với SVG vào trang web của chúng tôi. Tuy nhiên, các trình duyệt không được hỗ trợ sẽ vẫn trống. Để giải quyết vấn đề, chúng tôi có thể phục vụ đồ họa Bitmap, như sau;
Bằng cách này, các trình duyệt được hỗ trợ vẫn sẽ sử dụng .svg, trong khi các trình duyệt không được hỗ trợ sẽ mang đồ họa Bitmap. Chúng tôi đã thêm “png” đánh dấu bên dưới logo Apple để theo dõi đồ họa nào đang được phân phối.
Tuy nhiên, như chúng tôi đã đề cập trong bài khác, Đồ họa bitmap không linh hoạt và có thể mở rộng như SVG. Vì vậy, hãy xem xét một giải pháp khác.
Sử dụng Modernizr
Một phương pháp khác chúng ta có thể sử dụng là sử dụng Modernizr. Đối với những người bạn không quen thuộc với thư viện JavaScript này, đừng lo lắng, chúng tôi sẽ có một bài viết riêng để trình bày về nó. Ngay bây giờ, hãy theo kịp chúng tôi.
Trước hết, hãy chuẩn bị một số thư viện JavaScript cần thiết, Modernizr.js và Raphael.js. Sau đó, chúng tôi cũng cần phải chuyển đổi .svg tập tin thành định dạng được Raphael hỗ trợ với công cụ này, ReadySetRaphael.js và lưu kết quả đầu ra một cách riêng biệt .js tập tin; hãy đặt tên cho nó svg.js.
Bao gồm Modernzr.js trong tài liệu HTML, như vậy:
Và cho hai tập tin khác, raphael.js và svg.js, chúng tôi sẽ tải nó một cách có điều kiện, Chỉ khi nó được xem trong các trình duyệt không được hỗ trợ.
Với Modernizr, chúng tôi có thể phát hiện khả năng của trình duyệt, trong trường hợp này, chúng tôi sẽ phát hiện xem trình duyệt có khả năng hiển thị SVG hay không và nếu không, chúng tôi sẽ phục vụ tập lệnh:
if (! Modernizr.inlinesvg) document.write ('' PHHSNEWS