Что это за длинная строка CSS?

Question

Работа на кадр рабочий файл и врезался в длинную строку CSS из подобных я никогда не видел раньше

html body .ow_button:hover .ow_ic_attach{background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20enable-background%3D%22new%200%200%2020%2020%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m2.814%2014.583c.083-.731.439-1.411%201.066-2.038l6.144-6.144c1.255-1.233%202.382-1.411%203.385-.532.9.919.521%201.877-.753%203.194l-5.675%205.643-.876-.968%205.611-5.612c.021%200%20.409-.405.482-.5.216-.257.354-.428.141-.675-.252-.272-.633-.007-1.219.579l-6.112%206.113c-.397.376-.617.741-.659%201.098-.042.417.146.836.565%201.254.438.354.81.506%201.112.454.304-.053.685-.299%201.145-.737.877-.856%202.042-2.01%203.495-3.448%201.453-1.441%202.493-2.486%203.12-3.134.021-.021.521-.48%201.034-1.155.374-.49.685-.941.752-1.228.147-.698-.011-1.265-.532-1.975-.521-.71-1.14-1.108-1.851-1.191-.73-.083-1.547.303-2.444%201.16l-6.709%206.709-1.097-1.066%206.709-6.74c1.045-1.024%202.111-1.562%203.198-1.615%201.087-.052%202.1.392%203.04%201.333%201.128%201.149%201.525%202.414%201.191%203.793-.209.794-.71%201.599-1.505%202.414-.92.899-2.236%202.205-3.95%203.919l-3.353%203.352c-.752.751-1.557%201.14-2.414%201.16-.731%200-1.4-.304-2.01-.909-.752-.753-1.097-1.589-1.035-2.508%22/%3E%3C/svg%3E);} 

Каждый знает, что на земле происходит здесь? Где я могу узнать о том, что происходит здесь?

Answer 1

Это методика, в которой вместо URI используется в декларации CSS background-image:.

Чтобы сделать вещи более запутанными, вышеприведенный не является видом data URI, который вы обычно ожидаете. (Это было бы base-64 закодировано data URI ... которое непроницаемо и очень ... очень ... длинно ... буквенно-цифровая строка).

Вместо этого это процентное кодирование XML. (Намного проще!)

Оказывается XML разметки для SVGмогут быть включено встроенным «как есть» в CSS background-image: декларации , покаXML является процентом кодированных.

Дополнительная литература:

• https://css-tricks.com/probably-dont-base64-svg/ Крис Coyier
• http://codepen.io/tigt/post/optimizing-svgs-in-data-uris Тейлор Hunt

Для полноты картины, вот SVG XML разметки выше, декодируется :

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" enable-background="new 0 0 20 20"> 

    <path fill="#fff" d="m2.814 14.583c.083-.731.439-1.411 1.066-2.038l6.144-6.144c1.255-1.233 2.382-1.411 3.385-.532.9.919.521 1.877-.753 3.194l-5.675 5.643-.876-.968 5.611-5.612c.021 0 .409-.405.482-.5.216-.257.354-.428.141-.675-.252-.272-.633-.007-1.219.579l-6.112 6.113c-.397.376-.617.741-.659 1.098-.042.417.146.836.565 1.254.438.354.81.506 1.112.454.304-.053.685-.299 1.145-.737.877-.856 2.042-2.01 3.495-3.448 1.453-1.441 2.493-2.486 3.12-3.134.021-.021.521-.48 1.034-1.155.374-.49.685-.941.752-1.228.147-.698-.011-1.265-.532-1.975-.521-.71-1.14-1.108-1.851-1.191-.73-.083-1.547.303-2.444 1.16l-6.709 6.709-1.097-1.066 6.709-6.74c1.045-1.024 2.111-1.562 3.198-1.615 1.087-.052 2.1.392 3.04 1.333 1.128 1.149 1.525 2.414 1.191 3.793-.209.794-.71 1.599-1.505 2.414-.92.899-2.236 2.205-3.95 3.919l-3.353 3.352c-.752.751-1.557 1.14-2.414 1.16-.731 0-1.4-.304-2.01-.909-.752-.753-1.097-1.589-1.035-2.508"/> 

</svg> 

Answer 2

Это так называемый путь. Его кодируется на языке кодировки, и может потребоваться время для расшифровки, в основном числа после% - это код и означает нечто вроде пространства или специального символа. Forexample% 20 = пространство ... В общем, я предлагаю вам не обходиться с этим кодом, его копия исправлена. Если вы хотите расшифровать cpde, посмотрите: charset: ASCII

Я расшифровал этот код для вас (посмотрите внизу). Это код svg/ascii для расшифровки URL. Heres расшифрованный код:

image/svg xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" enable-background="new 0 0 20 20"><path fill="#fff" d="m2.814 14.583c.083-.731.439-1.411 1.066-2.038l6.144-6.144c1.255-1.233 2.382-1.411 3.385-.532.9.919.521 1.877-.753 3.194l-5.675 5.643-.876-.968 5.611-5.612c.021 0 .409-.405.482-.5.216-.257.354-.428.141-.675-.252-.272-.633-.007-1.219.579l-6.112 6.113c-.397.376-.617.741-.659 1.098-.042.417.146.836.565 1.254.438.354.81.506 1.112.454.304-.053.685-.299 1.145-.737.877-.856 2.042-2.01 3.495-3.448 1.453-1.441 2.493-2.486 3.12-3.134.021-.021.521-.48 1.034-1.155.374-.49.685-.941.752-1.228.147-.698-.011-1.265-.532-1.975-.521-.71-1.14-1.108-1.851-1.191-.73-.083-1.547.303-2.444 1.16l-6.709 6.709-1.097-1.066 6.709-6.74c1.045-1.024 2.111-1.562 3.198-1.615 1.087-.052 2.1.392 3.04 1.333 1.128 1.149 1.525 2.414 1.191 3.793-.209.794-.71 1.599-1.505 2.414-.92.899-2.236 2.205-3.95 3.919l-3.353 3.352c-.752.751-1.557 1.14-2.414 1.16-.731 0-1.4-.304-2.01-.909-.752-.753-1.097-1.589-1.035-2.508"/></svg> 

Answer 3

Доступ к SVG-коду из W3.org для использования в качестве фонового изображения. SVG - это векторный тип изображения, где, как вы можете видеть здесь, вы можете передавать информацию об изображении прямо по URL-адресу.