Встроенный SVG в CSS
7 ответов
Да, это возможно. Попробуйте это:
body { background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
}
(обратите внимание, что содержимое SVG должно быть url-экранировано, чтобы это работало, например #
заменяется на %23
.)
это работает в IE 9 (который поддерживает SVG). URL-адреса данных также работают в более старых версиях IE (с ограничениями), но они изначально не поддерживают SVG.
немного поздно, но если кто-то из вас сходит с ума, пытаясь использовать встроенный SVG в качестве фона, экранирующие предложения выше не совсем работают. Во-первых, он не работает в IE, и в зависимости от содержимого вашего SVG техника вызовет проблемы в других браузерах, таких как FF.
если вы base64 кодируете svg (не весь url, а только тег svg и его содержимое! ) это работает во всех браузерах. Вот тот же пример jsfiddle в base64: http://jsfiddle.net/vPA9z/3/
CSS теперь выглядит так:
body { background-image:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PGxpbmVhckdyYWRpZW50IGlkPSdncmFkaWVudCc+PHN0b3Agb2Zmc2V0PScxMCUnIHN0b3AtY29sb3I9JyNGMDAnLz48c3RvcCBvZmZzZXQ9JzkwJScgc3RvcC1jb2xvcj0nI2ZjYycvPiA8L2xpbmVhckdyYWRpZW50PjxyZWN0IGZpbGw9J3VybCgjZ3JhZGllbnQpJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+PC9zdmc+");
Не забудьте удалить любой URL-адрес, экранирующий перед преобразованием в base64. Другими словами, приведенный выше пример показал color= '#fcc', преобразованный в color= '%23fcc', вы должны вернуться к #.
причина, по которой base64 работает лучше, заключается в том, что он устраняет все проблемы с одинарными и двойными кавычками и побегом url
если вы используете JS, вы можете использовать window.btoa()
в создайте свой base64 svg; и если он не работает (он может жаловаться на недопустимые символы в строке), вы можете просто использовать https://www.base64encode.org/.
пример установки фона div:
var mySVG = "<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='#F00'/><stop offset='90%' stop-color='#fcc'/> </linearGradient><rect fill='url(#gradient)' x='0' y='0' width='100%' height='100%'/></svg>";
var mySVG64 = window.btoa(mySVG);
document.getElementById('myDiv').style.backgroundImage = "url('data:image/svg+xml;base64," + mySVG64 + "')";
html, body, #myDiv {
width: 100%;
height: 100%;
margin: 0;
}
<div id="myDiv"></div>
С JS вы можете генерировать SVGs на лету, даже изменяя его параметры.
одна из лучших статей об использовании SVG здесь : http://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/
надеюсь, что это помогает
Майк
для людей, которые все еще борются, мне удалось заставить это работать на всех современных браузерах IE11 и выше.
base64 не был вариантом для меня, потому что я хотел использовать SASS для создания значков SVG на основе любого заданного цвета. Например: @include svg_icon(heart, #FF0000);
таким образом, я могу создать определенный значок в любом цвете и только один раз вставить форму SVG в CSS. (с base64 вам придется вставлять SVG в каждый цвет, который вы хотите использовать)
есть три вещи, которые вы должны быть в курсе:
-
URL КОДИРУЕТ ВАШ SVG Как предлагали другие, вам нужно URL-адрес кодировать всю строку SVG, чтобы она работала в IE11. В моем случае я опустил значения цвета в таких полях, как
fill="#00FF00"
иstroke="#FF0000"
и заменил их переменной SASSfill="#{$color-rgb}"
таким образом, их можно заменить цветом, который я хочу. Вы можете использовать любой онлайн конвертер чтобы URL-адрес кодировал остальную часть строки. Вы получите строку SVG, такую как это:%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20494.572%20494.572%27%20width%3D%27512%27%20height%3D%27512%27%3E%0A%20%20%3Cpath%20d%3D%27M257.063%200C127.136%200%2021.808%20105.33%2021.808%20235.266c0%2041.012%2010.535%2079.541%2028.973%20113.104L3.825%20464.586c345%2012.797%2041.813%2012.797%2015.467%200%2029.872-4.721%2041.813-12.797v158.184z%27%20fill%3D%27#{$color-rgb}%27%2F%3E%3C%2Fsvg%3E
-
опустить КОДИРОВКА UTF8 В URL ДАННЫХ при создании URL-адреса данных вам нужно оставить кодировку, чтобы она работала в IE11.
не фон-изображение: url (данные: image / svg+xml; utf-8,%3Csvg%2....)
но фон-изображение: url (данные: image / svg+xml,%3Csvg%2....)
-
используйте RGB () вместо шестнадцатеричных цветов Firefox не нравится # в коде SVG. Поэтому нужно заменить ваши шестнадцатеричные значения цвета с RGB.
не заполнить="#число ff0000"
но fill= " rgb (255,0,0)"
в моем случае я использую SASS для преобразования данного hex в допустимое значение rgb. Как указано в комментариях, лучше всего также кодировать строку RGB по URL (так запятая становится %2C)
@mixin svg_icon($id, $color) {
$color-rgb: "rgb(" + red($color) + "%2C" + green($color) + "%2C" + blue($color) + ")";
@if $id == heart {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20494.572%20494.572%27%20width%3D%27512%27%20height%3D%27512%27%3E%0A%20%20%3Cpath%20d%3D%27M257.063%200C127.136%200%2021.808%20105.33%2021.808%20235.266c0%204%27%20fill%3D%27#{$color-rgb}%27%2F%3E%3C%2Fsvg%3E');
}
}
Я понимаю, что это может быть не лучшим решением для очень сложных SVG (inline SVG никогда не бывает в этом случае), но для плоские значки только с несколькими цветами это действительно отлично работает.
я смог оставить целое растровое изображение спрайта и заменить его встроенным SVG в моем CSS, который оказался только вокруг 25kb после сжатия. Таким образом, это отличный способ ограничить количество запросов, которые должен делать ваш сайт, без раздувания вашего CSS-файла.
на Mac / Linux вы можете легко преобразовать файл SVG в кодированное значение base64 для атрибута фона CSS с помощью этой простой команды bash:
echo "background: transparent url('data:image/svg+xml;base64,"$(openssl base64 < path/to/file.svg)"') no-repeat center center;"
протестировано на Mac OS X. Таким образом, вы также избегаете беспорядка URL-адреса.
помните, что кодировка base64 увеличение SVG-файл его размер, см. css-tricks.com блог.
Я раздвоил демо-версию CodePen, у которой была та же проблема с внедрением встроенного SVG в CSS. Решение, которое работает с SCSS, заключается в создании простой функции кодирования url.
функция замены строки может быть создана из встроенных функций str-slice, STR-index (см. модели CSS-уловок, которые, спасибо в Hugo Giraudel).
тогда просто замените %
,<
,>
,"
,'
, with the
%xx
код:
@function svg-inline($string){
$result: str-replace($string, "<svg", "<svg xmlns='http://www.w3.org/2000/svg'");
$result: str-replace($result, '%', '%25');
$result: str-replace($result, '"', '%22');
$result: str-replace($result, "'", '%27');
$result: str-replace($result, ' ', '%20');
$result: str-replace($result, '<', '%3C');
$result: str-replace($result, '>', '%3E');
@return "data:image/svg+xml;utf8," + $result;
}
$mySVG: svg-inline("<svg>...</svg>");
html {
height: 100vh;
background: url($mySVG) 50% no-repeat;
}
существует также image-inline
вспомогательная функция доступна в Compass, но поскольку она не поддерживается в CodePen, это решение может быть полезно.
демо на CodePen:http://codepen.io/terabaud/details/PZdaJo/
я нашел одно решение для SVG. Но это работа только для Webkit, я просто хочу поделиться своим обходным путем с вами. В моем примере показано, как использовать элемент SVG из DOM в качестве фона через фильтр (background-image: url('#glyph') не работает).
функции, необходимые для этого SVG значок рендеринга:
- применение эффектов фильтра SVG к HTML-элементам с помощью CSS (т. е. Edge не поддерживает)
- поддержка загрузки фрагментов feImage (firefox не поддерживает)
.test {
/* background-image: url('#glyph');
background-size:100% 100%;*/
filter: url(#image);
height:100px;
width:100px;
}
.test:before {
display:block;
content:'';
color:transparent;
}
.test2{
width:100px;
height:100px;
}
.test2:before {
display:block;
content:'';
color:transparent;
filter: url(#image);
height:100px;
width:100px;
}
<svg style="height:0;width:0;" version="1.1" viewbox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="glyph">
<path id="heart" d="M100 34.976c0 8.434-3.635 16.019-9.423 21.274h0.048l-31.25 31.25c-3.125 3.125-6.25 6.25-9.375 6.25s-6.25-3.125-9.375-6.25l-31.202-31.25c-5.788-5.255-9.423-12.84-9.423-21.274 0-15.865 12.861-28.726 28.726-28.726 8.434 0 16.019 3.635 21.274 9.423 5.255-5.788 12.84-9.423 21.274-9.423 15.865 0 28.726 12.861 28.726 28.726z" fill="crimson"/>
</g>
<svg id="resized-glyph" x="0%" y="0%" width="24" height="24" viewBox="0 0 100 100" class="icon shape-codepen">
<use xlink:href="#glyph"></use>
</svg>
<filter id="image">
<feImage xlink:href="#resized-glyph" x="0%" y="0%" width="100%" height="100%" result="res"/>
<feComposite operator="over" in="res" in2="SourceGraphic"/>
</filter>
</defs>
</svg>
<div class="test">
</div>
<div class="test2">
</div>
еще одно решение - использовать url encode
var container = document.querySelector(".container");
var svg = document.querySelector("svg");
var svgText = (new XMLSerializer()).serializeToString(svg);
container.style.backgroundImage = `url(data:image/svg+xml;utf8,${encodeURIComponent(svgText)})`;
.container{
height:50px;
width:250px;
display:block;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
<svg height="100" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
</svg>
<div class="container"></div>
встроенный SVG из сторонних источников (например, Google charts) может не содержать атрибут пространства имен XML (xmlns="http://www.w3.org/2000/svg"
) в элементе SVG (или, возможно, он удаляется после отображения SVG - ни инспектор браузера, ни команды jQuery из консоли браузера не показывают пространство имен в элементе SVG).
когда вам нужно повторно использовать эти фрагменты svg для других ваших нужд (фоновое изображение в CSS или элемент img В HTML), следите за отсутствующим пространством имен. Без пространства имен браузеры могут отказаться от отображения SVG (независимо от кодировки utf8 или base64).