Блог

Главная - Вопросы по программированию - Как мне использовать путь svg в качестве значка

Как мне использовать путь svg в качестве значка

#html #css #svg

#HTML #css #svg

Вопрос:

Я хочу svg в качестве значка, но я не хочу ссылаться на него как на отдельный файл, например:

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

Я хочу поместить этот значок, который я получил из bootstrap, в качестве значка без необходимости его загрузки:

 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527zM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
</svg>

Есть ли способ сделать это?

Комментарии:

1. Формат изображения значка должен быть 16×16 пикселей или 32×32 пикселей, с использованием 8-битных или 24-битных цветов. Формат изображения должен быть PNG (стандарт W3C), GIF или ICO. Это с веб-сайта W3C… w3.org/2005/10/howto-favicon

2. Однако я видел это: css-tricks.com /…

Ответ №1:

Попробуйте использовать URL-адрес данных.

 <link rel="icon" href="data:image/svg xml," sizes="any" type="image/svg xml">

Ответ №2:

Только в URL-адресах CSS < и > должны быть экранированы. Единственный символ, который необходимо экранировать, — это # в обозначениях цветом и ссылках

fill="currentColor" ничего не делает; только когда вы используете SVG в <body>

sizes в моих экспериментах атрибут не требуется

и type атрибут больше не требуется, говорят документы.

Эти значки начальной загрузки раздуты, их можно уменьшить, умножив пути и изменив окно просмотра

Создает HTML-файл: (добавлены разрывы строк в SVG только для демонстрации)

 <!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8" />
  <link
   rel="icon"
   href="data:image/svg xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'>
    <path d='M55 5a5 5 90 015-5h40a5 5 90 010 10h-10v11a70 70 90 0135 123l8 8a5 5 90 01-7 7l-9-9
     a70 70 90 01-37 11a70 70 90 01-37-11l-9 9a5 5 90 01-7-7l8-8a70 70 90 0135-123v-11h-10
     a5 5 90 01-5-5z
     m-46 49a25 25 90 1135-35a80 80 90 00-35 35z
     m126-44c-8 0-14 3-19 9a80 80 90 0135 35a25 25 90 00-16-44z
     m-50 40a5 5 90 00-10 0v39l-15 29a5 5 90 109 5l15-30a5 5 90 001-2v-40z'/>
   </svg>"
  />
</head>
<body></body>
</html>