URL-схема data:
Синтаксис
data:<медиаТип>;base64,<данные>
Описание
URL-схема data: (от англ. "data" ‒ «данные») позволяет включать небольшие элементы данных в URL строку так, как если бы они являлись ссылкой на внешний ресурс.
Поддержка браузерами
- [1] ‒ поддерживает схему только как данные изображения.
Спецификация
| RFC | Название | |
|---|---|---|
| 2397 | URL схема «data» | Перевод |
URL составляющие схемы
<медиаТип>
Указывает спецификацию типа носителей данных. «медиаТип» имеет вид [ тип "/" подтип ] *( ";" параметр ).
- тип
- Указывает медиа тип данных.
data:text/plain;charset=US-ASCII,A%20brief%20note - подтип
- Указывает медиа подтип данных.
data:text/plain;charset=US-ASCII,A%20brief%20note - параметр
- Указывает параметы медиа типа данных.
data:text/plain;charset=US-ASCII,A%20brief%20note
<медиаТип> по умолчанию: «text/plain;charset=US-ASCII».
Примечание: При указании значения использующегося по умолчанию, можно опустить «text/plain», оставив только параметр «charset».
base64
Указывает способ представления (кодирования) данных. Если указано «base64», то это означает, что данные закодированы в base64. Если же запись «base64» отсутствует, то это означает, что данные представлены, с помощью кодировки ASCII. При этом символы, которые находятся в диапазоне безопасных URL символов, записываются как обычно, а символы, которые находятся вне диапазона безопасных URL символов, кодируются при помощи стандартного шестнадцатеричного кодирования символов используемого в URL.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZ
SiLoAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA
7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAAZ
SURBVBhXY7hx48Z/MGAAYggHxAJxbtwAAH8HGYcGiB3UAAAAAElFTkSuQmCC
<данные>
Указываются закодированные данные. Является обязательным параметром.
data:text/plain;charset=US-ASCII,A%20brief%20note
Пример использования
<html>
<head>
<meta charset="utf-8">
<title>Схема data:</title>
<style type="text/css">
.box {
padding: 3px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAAZSURBVBhXY7hx48Z/MGAAYggHxAJxbtwAAH8HGYcGiB3UAAAAAElFTkSuQmCC) repeat;
border: 1px solid #E5E5E5;
}
</style>
</head>
<body>
<h1>Примеры со схемой «data:»</h1>
<div class="box">
<h2>Ссылка</h2>
<p><a href="data:text/html;charset=utf-8,%3Ch1%3E%D0%A3%D0%BC%D0%BE%D0%BC%20%D0%A0%D0%BE%D1%81%D1%81%D0%B8%D1%8E%20%D0%BD%D0%B5%20%D0%BF%D0%BE%D0%BD%D1%8F%D1%82%D1%8C...%3C%2Fh1%3E%3Cp%3E%D0%A3%D0%BC%D0%BE%D0%BC%20%D0%A0%D0%BE%D1%81%D1%81%D0%B8%D1%8E%20%D0%BD%D0%B5%20%D0%BF%D0%BE%D0%BD%D1%8F%D1%82%D1%8C%2C%3C%2Fp%3E%3Cp%3E%D0%90%D1%80%D1%88%D0%B8%D0%BD%D0%BE%D0%BC%20%D0%BE%D0%B1%D1%89%D0%B8%D0%BC%20%D0%BD%D0%B5%20%D0%B8%D0%B7%D0%BC%D0%B5%D1%80%D0%B8%D1%82%D1%8C%3A%3C%2Fp%3E%3Cp%3E%D0%A3%20%D0%BD%D0%B5%D0%B9%20%D0%BE%D1%81%D0%BE%D0%B1%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F%20%D1%81%D1%82%D0%B0%D1%82%D1%8C%20%E2%80%94%3C%2Fp%3E%3Cp%3E%D0%92%20%D0%A0%D0%BE%D1%81%D1%81%D0%B8%D1%8E%20%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%20%D1%82%D0%BE%D0%BB%D1%8C%D0%BA%D0%BE%20%D0%B2%D0%B5%D1%80%D0%B8%D1%82%D1%8C.%3C%2Fp%3E">Стих</a>.</p>
<h2>Изображение</h2>
<img src="data:image/jpeg;base64,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" style="width: 50px; height: 66px;" alt="face">
</div>
</body>
</html>