SVG base64, закодированный в CSS

Я создал логотип, который я буду использовать на сайте в AI, и использовал SVG Optimizer для вывода оптимизированного файла. Первоначально я вложил SVG-файл в HTML, но, увидев, что это фиксированный логотип на всех страницах, я подумал, что лучше всего удалить его из HTML и вставить в мой CSS в качестве фонового изображения. Когда я вставляю кодировку base64, моя ссылка обертывает строку после строки, может быть, 15 строк, что просто кажется слишком длинным.SVG base64, закодированный в CSS

Ниже приводится клип того, что у меня есть. Я, очевидно, вырезал оставшиеся 14 строк. Мои вопросы: есть ли способ сократить фактическую ссылку для этого без использования js? Подобно относительному пути, но для кодированного URI.

#logo { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJb...); }

источник

2014-09-12 Eric H

Уверенный, что вы можете добавить возврат каретки и пробелы, и он все равно будет работать. Here's an example from the SVG test suite

<image x="40" y="5" width="100" height="98" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAABCAMAAAAfBfuPAAAABGdBTUEAAK/INwWK6QAAABl0RVh0 
    U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEsUExURfb/AK3/AAD/9/9sAIn/AN7/ABT/ 
    AAB//zD/AP9GAAD/s1H/AAD/H/8AxwD/bn8A/1wA/wD/XJv/AP8Ai//MAGP/ABMA/wD/LP8A6P8K 
    AP8AF/8A9QD/xAAA/wD1/9MA/wD/gABY/wD/Cf8ATJEA//+6AACT/wCn/+v/AAD/TAD/kf8AYKMA 
    //8kAAAk/wAV/y0A/3b/AP80AAD/O/cA//8A/wD///8An/8A2QD/Ev8AAMQA/+0A/7MA////AP8A 
    CuAA//8AJ24A/0sA//8AOAA0/wAK/wBF//8WAAgA/x8A///2AL//AP8AdTwA/wn/AP/bAP+AAP+U 
    AM//AP+nAP8AtADp/wD/o0D/AP/qAADb/wC5/wDL/wD/AAD/7QD/0gD/4CH/AABr//9ZAG2IeB4A 
    AABvSURBVHjaYrCyl3J0Udb2FTYP5bWQkDY1sXGQt7bVUeF3EnD2M/AS85R109dzdVdMYldTj46J 
    CpMzY4pLiJfhCtdS4BPUNBbnsVSK9WdL5IjgFjVkEWL0CWbVYLDzjgwQUQ0JCmRO5jTS9ZAECDAA 
    3aQTV3E5iioAAAAASUVORK5CYII="/>

источник

2014-09-12 18:08:06

Спасибо @Robert Я думаю, что я имел в виду, если есть способ сократить URI в CSS аналогично тому, как вы бы, если бы вы получать IMG с каталогом пути, но без каталога пути (если в этом есть смысл). Например, если я получаю img с моего сервера, я бы использовал mysite.com/imgs/img1.jpg или ../imgs/img1.jpg - однако, поскольку я использую закодированный base64 svg, могу ли я использовать или выводить что-то вроде url (данные: image/svg + xml; base64, PD94b ..) –

Данные - это данные, вы не можете сделать ничего, кроме как поместить его во внешний файл вместо URL-адреса данных. –

SVG base64, закодированный в CSS

ответ

Смежные вопросы