2010-10-08 61 views
7

Tôi có biểu tượng là SVG. Tôi muốn có màu sắc khác nhau như favicon.favicon svg động?

Vì không có bất kỳ toDataUrl() nào cho các phần tử SVG, tôi không thấy giải pháp không liên quan đến máy chủ.

Bất kỳ ý tưởng nào về giải pháp phía khách hàng?

Trả lời

6

fabric.js hỗ trợ hiển thị phần tử SVG thành các phần tử canvas.

+0

Bị bỏ phiếu. OP đã yêu cầu giải pháp chỉ dành cho khách hàng về favicon. –

+2

@JoshH đúng, do đó hãy lấy fabric.js, hiển thị SVG đã cho bên trong phần tử 'canvas', sau đó xuất hình ảnh dưới dạng URL dữ liệu và sử dụng làm URL favicon. –

+0

Thông minh. Điều đó không rõ ràng từ câu trả lời trước đây. Cảm ơn bạn đã làm rõ. –

5

Đây không phải là chính xác những gì bạn đã yêu cầu, nhưng here's a page kiểm tra hỗ trợ cho svg favicon trong trình duyệt.

Nếu trình duyệt hỗ trợ svg dưới dạng favicon, nó không quan trọng để tạo ra một url dữ liệu từ đánh dấu svg và sử dụng nó. Tuy nhiên, nếu bạn muốn có một hình ảnh raster (png, jpg) thì vâng, hãy nhìn vào giải pháp canvas. Một số người thậm chí còn làm cho games in the favicon ...

+0

"Nếu trình duyệt hỗ trợ svg là favicon thì nó không quan trọng để tạo ra một url dữ liệu từ đánh dấu svg và sử dụng" ý của bạn là gì? – brillout

+0

+1 cho các liên kết! –

+0

@ brillout.com có ​​thể giống như sau: http://jsfiddle.net/estelle/SJjJb/ –

1

Bạn có biểu tượng SVG và bạn muốn sử dụng biểu tượng đó làm favicon để bạn có thể hiển thị nó bằng các màu khác nhau mà không cần nhấn máy chủ.

Bất kỳ ý tưởng nào về giải pháp phía khách hàng?

Firefox 41 introduced support dành cho SVG favicons. Dưới đây là ví dụ tôi đã thử nghiệm trong Firefox 52 vừa rồi:

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.93 0 521.287 151.707 491.48 394.785 224 387.814z'/%3E%3C/svg%3E"> 

Thả vào trang của bạn và xem cập nhật khi bạn thay đổi thông qua tập lệnh.

Ghi chú

+0

Gọn gàng! Làm thế nào về Chrome, Safari và IE? – brillout

+1

Câu hỏi hay! Tôi đã cập nhật câu trả lời để bao gồm hỗ trợ trình duyệt. Đây là yêu cầu tính năng trong Chrome, có vẻ như đang nhận được sự chú ý gần đây: https://crbug.com/294179 –

Các vấn đề liên quan