Вставить значок SVG в HTML - PullRequest
Новая
       20

Вставить значок SVG в HTML

0 голосов
/ 28 декабря 2018

Мне нужно встроить иконку SVG непосредственно в html-файл, а не как ссылку на SVG-файл.

Я пытался добавить <link>SVG file contents</link> в html, но он не работал.

Мои HTML <head>: 

<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui"/>
<meta name="theme-color" content="#568342"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-title" content="My App"/>
<link rel="apple-touch-icon" href="images/icon_apple.png"/>
<link rel="icon" href="images/icon.png"/>
<title>My App</title>
</head>

1 Ответ

0 голосов
/ 28 декабря 2018

Вы можете использовать URL данных в качестве значения атрибута href <link>.Как отметил enxaneta, данные о совместимости настоятельно рекомендуют сначала преобразовать SVG в PNG (проще всего экспортировать его из пользовательского интерфейса векторной графики).После этого вы конвертируете его в URL-адрес данных, например, с помощью этого онлайн-инструмента .

Если вы настаиваете на прямом использовании SVG, эта онлайн-утилита лучшеподходит для SVG, вы можете оставить исходный текст.

Ваш конечный результат выглядит следующим образом: 

<link rel="icon" href="data:image/png;base64,...">

или 

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