Можно ли встроить значок SVG в HTML-страницу

У меня есть html-файл с некоторым javascript локально в автономном режиме на моем компьютере, и я хочу добавить значок svg favicon в этот html-файл, чтобы он отображался в браузере без необходимости в дополнительном файле favicon.svg. возможно ли как-то заставить это работать?

<html>
 <head>
  <link rel = "icon" type = "image/svg+xml" href = "favicon.svg">
  ...

так что вместо <link rel = "icon" type = "image/svg+xml" href = "favicon.svg"> я хочу встроить favicon.svg в html-страницу.

вот пример favicon.svg

<svg
 width = "256"
 height = "256"
 viewBox = "0 0 256 256">
 <rect
  style = "fill:#FF3010;stroke:none"
  width = "256"
  height = "256"
  x = "0"
  y = "0" />
</svg>

согласно Вставить иконку SVG в html, пробовал

просто вставьте содержимое svg:

<link rel = "icon" href = "data:image/svg+xml,<svg width = "256" height = "256" viewBox = "0 0 256 256"><rect style = "fill:#FF3010;stroke:none" width = "256" height = "256" x = "0" y = "0" /></svg>">

заменил двойные кавычки (") одинарными кавычками ('):

<link rel = "icon" href = "data:image/svg+xml,<svg width='256' height='256' viewBox='0 0 256 256'><rect style='fill:#FF3010;stroke:none' width='256' height='256' x='0' y='0' /></svg>">

переведены специальные символы в формат %XX:

<link rel = "icon" href = "data:image/svg+xml,%3Csvg%20width=%22256%22%20height=%22256%22%20viewBox=%220%200%20256%20256%22%3E%3Crect%20style=%22fill:#FF3010;stroke:none%22%20width=%22256%22%20height=%22256%22%20x=%220%22%20y=%220%22%20/%3E%3C/svg%3E">

перевел содержимое svg в base64:

<link rel = "icon" href = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxyZWN0IHN0eWxlPSJmaWxsOiNGRjMwMTA7c3Ryb2tlOm5vbmUiIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB4PSIwIiB5PSIwIiAvPjwvc3ZnPg= = ">

но ни в одном из случаев значок не появлялся в браузере.

я пробовал firefox-esr 102.5.0 и хром 104.0.5112.105.

Фавикон как дополнительный файл favicon.svg работает, но встроенные данные не работают.

Пожалуйста, взгляните на «Как создать фавикон в 2021 году»

— 26.11.2022 16:41

html svg favicon

26.11.2022 16:32

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам нужно сообщить браузеру, какое изображение/документ он будет отображать. Для документов SVG это означает включение объявления XML и пространства имен XML.

Итак, ваш документ SVG должен выглядеть примерно так:

<?xml version = "1.0" encoding = "UTF-8"?>
<svg xmlns = "http://www.w3.org/2000/svg" width = "256" height = "256"
  viewBox = "0 0 256 256">
  <rect style = "fill:#FF3010;stroke:none" width = "256" height = "256"
    x = "0" y = "0" />
</svg>

А затем включите его так же, как вы пишете:

<html>
 <head>
  <link rel = "icon" type = "image/svg+xml" href = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMjU2IgogaGVpZ2h0PSIyNTYiCiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+CiA8cmVjdAogIHN0eWxlPSJmaWxsOiNGRjMwMTA7c3Ryb2tlOm5vbmUiCiAgd2lkdGg9IjI1NiIKICBoZWlnaHQ9IjI1NiIKICB4PSIwIgogIHk9IjAiIC8+Cjwvc3ZnPgo = ">
  ...

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

Теперь я проверил это только с использованием URL-адреса данных base64 в Firefox. Возможно, в некоторых случаях у вас возникают проблемы с источником (CORS ). Чтобы смягчить это, вам нужна Content-Security-Policy в вашем ответе HTTP или, по крайней мере, метаэлемент Content Security Policy в вашем HTML, который указывает, что URL-адреса данных в порядке. Что-то вроде этого:

<meta http-equiv = "Content-Security-Policy" content = "default-src data:" />

Здесь вы можете увидеть схему data:, упомянутую в политике.

Объявление XML не требуется, но атрибут пространства имен xmlns должен присутствовать.

— 26.11.2022 19:49

@ccprog, да, type = "..." не нужно, просто не хватало xmlns материала. Спасибо.

— 26.11.2022 22:55

26.11.2022 17:28

да спасибо. просто включение пространства имен сделало свое дело

<svg
 xmlns = "http://www.w3.org/2000/svg"
 xmlns:svg = "http://www.w3.org/2000/svg" 
...

<html>
 <head>
  <link rel = "icon" href = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci...
...

спасибо!

26.11.2022 22:41