Как правильно подключить код SVG используя только CSS?

Question

[Nine8ty]

Есть доступ на сайте только к CSS. Есть ли возможность подключить SVG код только лишь через CSS и как это сделать? Может кто пример приведет.

Answer 1

[tema_sun]

Можно заинлайнить

.e{
background-image:  url("data:image/svg+xml;utf8,<svg>....</svg>")
}

Comments

[Nine8ty]

Вроде как вставляю такое, и ничего так и нет.

.o {
background-image:  url("data:image/svg+xml;utf8,<svg>M-22350 4860c689,51 1233,76 1630,76 51,0 93,-17 127,-51 34,-34 51,-76 51,-127l0 -178 -1095 0c-231,0 -416,-70 -555,-209 -139,-139 -209,-324 -209,-555l0 -178c0,-231 70,-416 209,-555 139,-139 324,-209 555,-209l1732 0 0 662 -1426 0c-51,0 -93,17 -127,51 -34,34 -51,76 -51,127 0,51 17,93 51,127 34,34 76,51 127,51l917 0c231,0 416,70 555,209 139,139 209,324 209,555l0 204c0,231 -70,416 -209,555 -139,139 -324,209 -555,209 -601,0 -1246,-34 -1936,-102l0 -662zm3948 -1936c329,-68 618,-102 866,-102l229 0c231,0 416,70 555,209 139,139 209,324 209,555l0 1987 -891 0 0 -1885c0,-51 -17,-93 -51,-127 -34,-34 -76,-51 -127,-51l-178 0c-129,0 -247,7 -354,20 -107,14 -193,24 -257,31l0 2012 -891 0 0 -3566 891 0 0 917zm3438 51l0 2598 -891 0 0 -1910 -382 0 0 -688 1274 0zm-891 -1019l891 0 0 713 -891 0 0 -713zm2292 2547l0 1070 -891 0 0 -3566 891 0 0 1808 408 0 560 -942 942 0 -764 1299 764 1401 -942 0 -586 -1070 -382 0zm3286 -1528l0 2598 -891 0 0 -1910 -382 0 0 -688 1274 0zm-891 -1019l891 0 0 713 -891 0 0 -713zm3209 866c275,0 487,102 637,306 156,-105 325,-183 507,-232 182,-49 344,-74 486,-74l51 0c231,0 416,70 555,209 139,139 209,324 209,555l0 1987 -891 0 0 -1834c0,-51 -17,-93 -51,-127 -34,-34 -76,-51 -127,-51l-25 0c-153,0 -348,34 -586,102l0 1910 -891 0 0 -1834c0,-51 -17,-93 -51,-127 -34,-34 -76,-51 -127,-51l-25 0c-153,0 -348,34 -586,102l0 1910 -891 0 0 -2700 790 0 51 255c160,-105 323,-183 492,-232 168,-49 310,-74 425,-74l51 0zm5654 1987c0,255 -72,454 -216,599 -144,144 -344,216 -599,216l-1172 0c-255,0 -454,-72 -599,-216 -144,-144 -216,-344 -216,-599l0 -1172c0,-255 72,-454 216,-599 144,-144 344,-217 599,-217l1172 0c255,0 454,72 599,217 144,144 216,344 216,599l0 1172zm-891 -1095c0,-136 -68,-204 -204,-204l-611 0c-136,0 -204,68 -204,204l0 1019c0,136 68,204 204,204l611 0c136,0 204,-68 204,-204l0 -1019zm2904 -102c-214,0 -435,51 -662,153l0 1808 -891 0 0 -2700 790 0 51 331c292,-255 598,-382 917,-382l229 0 0 790 -433 0zm1910 -637l0 2598 -891 0 0 -1910 -382 0 0 -688 1274 0zm-891 -1019l891 0 0 713 -891 0 0 -713z</svg>")
}

[tema_sun]

Nine8ty, откройте svg файл в любом текстовом редакторе, скопируйте всё и вставьте вместо ....
Единственное, нужно будет убрать переводы строк. Для этого можно использовать утилиту svgo https://github.com/svg/svgo

Answer 2

[Сергей Герасимов]

Можно попробовать через :before или :after в атрибут content:

DIV:before{
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M19.414 27.414l10-10c0.781-0.781 0.781-2.047 0-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828 0-0.781 0.781-0.781 2.047 0 2.828l6.586 6.586h-19.172c-1.105 0-2 0.895-2 2s0.895 2 2 2h19.172l-6.586 6.586c-0.39 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z" fill="#FFF" /></svg>');
	}

Answer 3

[Валерий Алексеев]

В CSS подключить SVG можно с использованием стандартного свойства background-image

.element {
  background-image: url(/images/image.svg);
}

Правда, в этом случае у вас не будет доступа к редактированию свойств элементов самого SVG.

Comments

[Nine8ty]

Оно то понятно что можно вставить как картинку. Но как сcлыку тогда получить на svg?

[Валерий Алексеев]

Nine8ty, а где у вас находится сам SVG? Чисто локально на вашем устройстве?

Answer 4

[Nine8ty]

Мне бы как для чайника расписать. Где лучше код svg получить? (я вот через corel вроде получил, открыв svg в notepad). Куда можно загрузить svg, если получать ссылку? Или как вставить этот код svg в css чтоб заработало. Сразу ли нужно красить svg с background-color, чтоб было видно и т.д.? Буду очень благодарен за конструктивный ответ!

Comments

[Dima Polos]

svg красить надо сразу, потом не сможете, он в css будет как картинка

[Moskus]

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

Answer 5

[Dima Polos]

Берете svg код, можно даже попробовать из редактора картинку перетащить в открытый блокнот и так вставить код, по крайней мере в иллюстраторе так можно, как в кореле, не знаю, или найдите что-то типа save as. Дальше картинку можно загрузить на какой-нибудь обменник для фото, или на бесплатный сток, на куда-то в облако, в общем. Ссылку на картинку вставить в css через background-image.
Вариант второй, найти в сети base64 конвертер, так и гуглить "base64 converter svg", залить в него svg и скопипастить здоровенный и страшный код, потом его вставить в background-image, только без url(), а тупо вставить как значение свойства.

Answer 6

[sergey]

Делаю всегда практически вот таким способом
1) создаю спрайт, использую symbol

<div style="display: none;">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <symbol id="right-arr" viewBox="0 0 17 32">
            <g id="right-arr">
                <line x1="16" y1="16" x2="1" y2="31"/>
                <path d="M1,1"/>
                <line x1="1" y1="1" x2="16" y2="16"/>
            </g>
        </symbol>
        <symbol id="left-arr" viewBox="0 0 17 32">
            <g id="left-arr">
                <line class="cls-1" x1="1" y1="16" x2="16" y2="1"/>
                <path class="cls-1" d="M16,31"/>
                <line class="cls-1" x1="16" y1="31" x2="1" y2="16"/>
            </g>
        </symbol>
    </svg>
</div>

2) в разметке пишу:

<svg class="icon-right-arr">
  <use xlink:href="#right-arr"></use>
</svg>
<svg class="icon-left-arr">
  <use xlink:href="#left-arr"></use>
</svg>

и вуаля, готово, можете воздействовать на Ваши иконки как угодно и где угодно с помощью css.
Касательно простыни с спрайтом svg она под display: none; но если коробит восприятие можно и забросить куда -то на сервак и оттуда уже тянуть.

Comments

[Ankhena]

У человека доступ только к CSS, какая разметка и символы??