Динамический SVG Favicon?

Question

У меня есть значок как SVG. Я хочу иметь его в разных цветах как favicon.

Поскольку для элементов SVG нет toDataUrl (), я не вижу решения, в котором не задействован сервер.

Есть идеи для решения на стороне клиента?

Answer 1

fabric.js поддерживает рендеринг элементов SVG в canvas элементы.

Answer 2

Это не совсем то, что вы просили, но вот страница тестирования поддержки символов SVG в браузерах.

Если браузер поддерживает SVG в качестве значка, генерировать URL-адрес данных тривиальноиз разметки SVG и использовать это.Однако, если вы хотите растровое изображение (png, jpg), тогда да, посмотрите на решение canvas.Некоторые люди даже делают игр в favicon ...

Answer 3

У вас есть значок SVG, и вы хотите использовать его в качестве значка, чтобы отображать его в разных цветах, не обращаясь к серверу.

Есть идеи для решения на стороне клиента?

В Firefox 41 введена поддержка для значков SVG.Вот пример, который я тестировал в Firefox 52 только сейчас:

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

Перетащите его на свою страницу и смотрите, как он обновляется при изменении скрипта.

Заметки

• Используйте атрибут sizes со значением any, чтобы намекнуть браузеру, что это векторный значок.
• Дляподдержка браузера: http://caniuse.com/#feat=link-icon-svg.
• См. Оптимизация SVG в URI данных для советов по кодированию.