Transferring SVG files from HTML to CSS

Question

Good day dear. Can you please tell me how to transfer the writing of an SVG file from html to background css?

.heart{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: $heartSide; width: $heartSide; display: block; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" enable-background:"new 0 0 200 200" xml:space="preserve"><path fill:#A41E21; d="M186.1,27.9c-3-2.8-17.6-14.9-44.9-10.4c-22.8,5.9-40.4,25.3-40.4,25.3s-0.8,0.7-0.8,0.7c0,0-0.8-0.7-0.8-0.7 S81.6,23.4,58.8,17.5C31.5,13,16.9,25.1,13.9,27.9c-39.3,36,14.7,138.9,82.9,155.1c0,0.1,3.2,0.5,3.2,0.5c0.1,0,3.2-0.4,3.2-0.5 C171.4,166.7,225.4,63.9,186.1,27.9z"/></svg>') 0 0 no-repeat; z-index: 1; }

 <div class="heart"> <!-- <svg version="1.1" id="heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> <style type="text/css"> .st0{fill:#A41E21;} </style> <path class="st0" d="M186.1,27.9c-3-2.8-17.6-14.9-44.9-10.4c-22.8,5.9-40.4,25.3-40.4,25.3s-0.8,0.7-0.8,0.7c0,0-0.8-0.7-0.8-0.7 S81.6,23.4,58.8,17.5C31.5,13,16.9,25.1,13.9,27.9c-39.3,36,14.7,138.9,82.9,155.1c0,0.1,3.2,0.5,3.2,0.5c0.1,0,3.2-0.4,3.2-0.5 C171.4,166.7,225.4,63.9,186.1,27.9z"/> </svg> --> </div>

I can not understand where I make a mistake. If you uncommit it in html everything is displayed as it should, but in the css there is no

Accepted Answer · 2017-01-13T08:40:30

Remove transfers inside svg.
fill move inside the style attribute.
enable-background remove altogether.

 .heart { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100px; width: 100px; display: block; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" xml:space="preserve"><path style="fill:#A41E21" d="M186.1,27.9c-3-2.8-17.6-14.9-44.9-10.4c-22.8,5.9-40.4,25.3-40.4,25.3s-0.8,0.7-0.8,0.7c0,0-0.8-0.7-0.8-0.7 S81.6,23.4,58.8,17.5C31.5,13,16.9,25.1,13.9,27.9c-39.3,36,14.7,138.9,82.9,155.1c0,0.1,3.2,0.5,3.2,0.5c0.1,0,3.2-0.4,3.2-0.5 C171.4,166.7,225.4,63.9,186.1,27.9z"/></svg>'); z-index: 1; }

 <div class="heart"></div>

Insider insider 1,264 9 silver marks 33 bronze marks · Answer 2 · 2017-01-12T21:33:14

I do not advise doing so. better save your picture to a separate .svg file, and then place it as a regular img . You can also change the .svg file property using CSS if it is in a separate file.

If you still want to add it to the CSS file, here’s a way: Put your file on base64 and paste the resulting code in this:

 .КАРТИНКА { background: url("data:image/svg+xml;base64,[полученный_конвертированный_код]"); }

@BlackStar1991 how to deploy it in the background is in my message.
But I do not advise it, because it is a rather bold piece of code that will interfere in the future.
It is always better to put everything in different files, if possible.
I know that this is really jsfiddle.net/BlackStar1991/03a2zaqh/1 In such a record, he also read + you can zanimirovat.
@ BlackStar1991 except for the above-provided method - no way.
You understand that you are trying to insert into CSS like your HTML code.

Transferring SVG files from HTML to CSS

2 answers 2

More articles: