it-swarm.com.ru

SVG Favicon не работает

Я пытаюсь разместить SVG Favicon на своем сайте, но что бы я ни делал, он просто не хочет работать.

У меня есть следующий код, сохраненный в виде файла .svg в моем обычном расположении значка, но когда я изменяю путь к значку .svg вместо .ico, ничего не загружается.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.5 283.4" style="enable-background:new 0 0 384.5 283.4;" xml:space="preserve"  width="100%" height="100%">

<style type="text/css">
    .shape1 {fill: #DB6B2A;}
    .shape2 {fill: #AE1A31;}
</style>

<path class="shape1" d="M384.5,83.7c-4.6-19.3-14.3-36.3-29.3-51.3C333.4,10.6,307.6,0,276.7,0c-30.9,0-56.7,10.6-78.4,32.4
l-4.6,5.1l-4.5-5.1C167.4,10.6,141.6,0,110.8,0S54.1,10.6,32.4,32.4C10.6,54.1,0,79.9,0,110.8v61.1l55.1-12.8v-48.4
c0-15.2,5.6-28.3,16.2-39C82,60.7,95.1,55.1,110.8,55.1c30.4,0,55.1,25.3,55.1,55.6v22.9l55.6-12.7v-10.1c0-2.5,0-4.6-0.5-7.1
c1.5-12.1,7.1-22.8,16.2-31.9c10.6-11.1,23.8-16.7,39.5-16.7c25.4,0,46.9,17.2,53.3,40.7"/>

<path class="shape2" d="M54.5,187.6c6.4,23.5,27.9,40.7,53.3,40.7c15.7,0,28.8-5.6,39.5-16.7c9.1-9.1,14.7-19.7,16.2-31.9
c-0.5-2.5-0.5-4.6-0.5-7.1v-10.1l55.6-12.7v22.9c0,30.4,24.8,55.6,55.1,55.6c15.7,0,28.8-5.6,39.5-16.7
c10.6-10.6,16.2-23.8,16.2-38.9v-48.4l55.1-12.7v61.1c0,30.9-10.6,56.7-32.4,78.4c-21.7,21.7-47.5,32.4-78.4,32.4
c-30.9,0-56.7-10.6-78.4-32.4l-4.6-5.1l-4.6,5.1c-21.7,21.7-47.6,32.4-78.4,32.4s-56.7-10.6-78.4-32.4C14.3,236,4.6,219,0,199.7"/>
</svg>

Это код, который я использую для установки значка;

<link rel="icon" href="http://www.MYSITE.co.uk/favicon.svg?v=4">

Я не могу решить, если это проблема с моим кодом .svg, или я что-то упустил . Спасибо

38
Sam Willis

Значки SVG поддерживаются для Firefox, Safari и теперь Edge, но Chrome остается несдержанным: https://caniuse.com/#feat=link-icon-svg

Возможно, вы захотите просто использовать .png, пока не улучшится поддержка.

40
staypuftman

Вам нужно растеризовать SVG для браузеров, которые не поддерживают иконки SVG (которых в настоящее время большинство из них). Смотрите Есть ли способ визуализации SVG-значков в неподдерживаемых браузерах?

4
Stuart P. Bentley

Прежде всего, в коде, который вы используете для своих значков, отсутствует одна часть, она должна где-то включать. что говорит: type = "image/x-icon". Так что для favicons, используя .jpg или другие стандартные изображения, такие как .gif, код выглядит так: 

<link href="someimagesourcefileorURL.jpg" rel="icon"  type="image/x-icon" />

1. Для расширения изображения .jpg работает [или вы можете использовать другое сопоставимое расширение файла; .gif тоже работает.]2. Для rel достаточно «icon» [но вы также можете поставить слово «ярлык» рядом с/перед «значком», если хотите, опционально.]

Для SVG 'favicon' это немного сложнее, по нескольким причинам. Это необязательно, но для лучшей работы необходимо, чтобы размер SVG-изображения был меньше 256 квадратных пикселей (16 на 16 пикселей, но поскольку SVG обычно масштабируемый, я рекомендую установить высоту и ширину как <= 16px непосредственно перед попыткой использовать их в качестве «favicon». Таким образом, вам нужно разделить ваш рост на любое число, необходимое для того, чтобы высота равнялась или была меньше 16px, и то же самое верно для ширины. Если у вас квадратное, равномерно пропорциональное изображение тогда вы сможете просто изменить весь размер изображения на процент, и все изображение должно уменьшиться без значительного искажения при сохранении квадратной формы. Если у вас нет квадратной формы, вам придется исказить изображение некоторые в процессе превращения его в квадратную форму, потому что иконки имеют квадраты 16 на 16 пикселей. Предполагая, что вы уже внесли эти корректировки, мы идем дальше. Теперь, когда эта часть закончена, вы используете этот формат для SVG «»: значки

<link rel="icon" href="someimagefileorURL.svg" type="image/svg+xml" />

Это должно работать до тех пор, пока размер вашего SVG-изображения уже уменьшен, как описано выше. Вот хороший JSfiddle (не мой), который демонстрирует, что этот код работает. https://jsfiddle.net/Daniel_Hug/YawSn/ И у меня большой опыт работы с традиционными иконками, работающими с первым описанным мною методом. 

Надеюсь это поможет! Я действительно хотел бы, чтобы кто-то показал мне это, когда я еще не знал, как использовать/настраивать иконки! :-)

2
Sean Tank Garvey

Вы можете попробовать вот так 

<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

но большинство браузеров не поддерживает

1
Malith

Оптимизированные SVG Favicons могут занимать всего 100-200 байт, поэтому нет особого смысла делать внешний запрос. Просто иди и вставь его на страницу. При этом вы сохраните внешний запрос изображения, который может быть больше ожидаемого из-за отправки файлов cookie при запросе изображений.

Как уже отмечали другие, поддержка браузера пока невелика, но SVG Favicons предоставляет некоторые вещи, которые вы просто не можете сделать с помощью PNG, такие как стилизация с помощью CSS и даже анимация на основе JS.

Вот проблема Chrome добавить поддержку, открытую с 2013 года без реального прогресса из-за блокировщиков.

0
Josh Habdas