Wonders with svg icons

Question

The second day I fight with these svg and so far to no avail. It would seem that something simpler to take a vector icon from a PSD layout in Photoshop, save it as svg, insert it into the layout and is done. But it was not there. Icons stubbornly do not want to be displayed through the background-image . img only works in Firefox and IE, and in Chrome and Opera do not work. Moreover, if you open the icon itself through any browser, then they perfectly display it. There was another interesting point that if you paste the copied code of the icon between the tags, which is set to background with svg , the icons will be displayed. Delete the code, reboot - and again shows nothing. Please, who knows what's the matter, help!

Part of the code (via img):

 <li><img src="images/advantages-1.svg" alt="">Собственная производственная база</li>

(via background):

 & li { font-size: 1.14rem; list-style: none; padding: 9px 0 9px 40px; background-repeat: no-repeat; background-position: 0 50%; background-size: 30px 30px; & img{ opacity: 1; } &:nth-child(1) { background-image: url("/images/advantages-1.svg"); } }

icon code:

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23" height="27" viewBox="0 0 23 27"> <defs> <style> .cls-1 { opacity: 0.33; } </style> </defs> <image id="Vector_Smart_Object" data-name="Vector Smart Object" class="cls-1" width="23" height="27" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAbCAMAAACgNuTpAAAABGdBTUEAALGPC/+DQyaAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB+AJGQ01GTQTMmMAAAEXSURBVCjPbZBrV4JAEIaHIsPsKrJILZErSUKZZmZiAt1LzO7ZPev//4i4qB/YfT+8O+c5O+/MGYCkpqb5cTmTmhXSc1GZmV9YXIrp8kpWzElIziuryhpWU+uiFuKNAhGKoG+WDJVs5csmWHg7wDvZyu44z4yfai0wac9MTq5VA6vvUxs18AFAU9WT/FBsAdjtI6qh3gFwCE9xReUAXI/ix+gEQChQC5mkBHCKzqgGzwDQpfMk1i/UwI3oTlbj8sqJ6XXXD7/2ZA0yN9gXEXH76du7brsSJd+jh8en55eB9sp7EkbkzebiuPePz74zSra+vidjfobAVNkfMHnRb7Ebhh02b+Y4JrfDOzHkyL/sINdg895fkvwDdpQgqUPG9McAAAAASUVORK5CYII="/> </svg> -name = "Vector Smart Object" class = "cls- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23" height="27" viewBox="0 0 23 27"> <defs> <style> .cls-1 { opacity: 0.33; } </style> </defs> <image id="Vector_Smart_Object" data-name="Vector Smart Object" class="cls-1" width="23" height="27" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAbCAMAAACgNuTpAAAABGdBTUEAALGPC/+DQyaAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB+AJGQ01GTQTMmMAAAEXSURBVCjPbZBrV4JAEIaHIsPsKrJILZErSUKZZmZiAt1LzO7ZPev//4i4qB/YfT+8O+c5O+/MGYCkpqb5cTmTmhXSc1GZmV9YXIrp8kpWzElIziuryhpWU+uiFuKNAhGKoG+WDJVs5csmWHg7wDvZyu44z4yfai0wac9MTq5VA6vvUxs18AFAU9WT/FBsAdjtI6qh3gFwCE9xReUAXI/ix+gEQChQC5mkBHCKzqgGzwDQpfMk1i/UwI3oTlbj8sqJ6XXXD7/2ZA0yN9gXEXH76du7brsSJd+jh8en55eB9sp7EkbkzebiuPePz74zSra+vidjfobAVNkfMHnRb7Ebhh02b+Y4JrfDOzHkyL/sINdg895fkvwDdpQgqUPG9McAAAAASUVORK5CYII="/> </svg> img / png; base64, iVBORw0KGgoAAAANSUhEUgAAABcAAAAbCAMAAACgNuTpAAAABGdBTUEAALGPC / + DQyaAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1 + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23" height="27" viewBox="0 0 23 27"> <defs> <style> .cls-1 { opacity: 0.33; } </style> </defs> <image id="Vector_Smart_Object" data-name="Vector Smart Object" class="cls-1" width="23" height="27" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAbCAMAAACgNuTpAAAABGdBTUEAALGPC/+DQyaAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB+AJGQ01GTQTMmMAAAEXSURBVCjPbZBrV4JAEIaHIsPsKrJILZErSUKZZmZiAt1LzO7ZPev//4i4qB/YfT+8O+c5O+/MGYCkpqb5cTmTmhXSc1GZmV9YXIrp8kpWzElIziuryhpWU+uiFuKNAhGKoG+WDJVs5csmWHg7wDvZyu44z4yfai0wac9MTq5VA6vvUxs18AFAU9WT/FBsAdjtI6qh3gFwCE9xReUAXI/ix+gEQChQC5mkBHCKzqgGzwDQpfMk1i/UwI3oTlbj8sqJ6XXXD7/2ZA0yN9gXEXH76du7brsSJd+jh8en55eB9sp7EkbkzebiuPePz74zSra+vidjfobAVNkfMHnRb7Ebhh02b+Y4JrfDOzHkyL/sINdg895fkvwDdpQgqUPG9McAAAAASUVORK5CYII="/> </svg> + 8O + c5O + / MGYCkpqb5cTmTmhXSc1GZmV9YXIrp8kpWzElIziuryhpWU + uiFuKNAhGKoG + WDJVs5csmWHg7wDvZyu44z4yfai0wac9MTq5VA6vvUxs18AFAU9WT / FBsAdjtI6qh3gFwCE9xReUAXI / ix + gEQChQC5mkBHCKzqgGzwDQpfMk1i / UwI3oTlbj8sqJ6XXXD7 / 2ZA0yN9gXEXH76du7brsSJd + jh8en55eB9sp7EkbkzebiuPePz74zSra + vidjfobAVNkfMHnRb7Ebhh02b + Y4JrfDOzHkyL / sINdg895fkvwDdpQgqUPG9McAAAAASUVORK5CYII = "/> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23" height="27" viewBox="0 0 23 27"> <defs> <style> .cls-1 { opacity: 0.33; } </style> </defs> <image id="Vector_Smart_Object" data-name="Vector Smart Object" class="cls-1" width="23" height="27" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAbCAMAAACgNuTpAAAABGdBTUEAALGPC/+DQyaAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB+AJGQ01GTQTMmMAAAEXSURBVCjPbZBrV4JAEIaHIsPsKrJILZErSUKZZmZiAt1LzO7ZPev//4i4qB/YfT+8O+c5O+/MGYCkpqb5cTmTmhXSc1GZmV9YXIrp8kpWzElIziuryhpWU+uiFuKNAhGKoG+WDJVs5csmWHg7wDvZyu44z4yfai0wac9MTq5VA6vvUxs18AFAU9WT/FBsAdjtI6qh3gFwCE9xReUAXI/ix+gEQChQC5mkBHCKzqgGzwDQpfMk1i/UwI3oTlbj8sqJ6XXXD7/2ZA0yN9gXEXH76du7brsSJd+jh8en55eB9sp7EkbkzebiuPePz74zSra+vidjfobAVNkfMHnRb7Ebhh02b+Y4JrfDOzHkyL/sINdg895fkvwDdpQgqUPG9McAAAAASUVORK5CYII="/> </svg>

open svg you could pull out in base64 format and the display via svg will not, see the svg code <image xlink: href = "data: img / png; base64, if it starts like this, then not svg
If not, then maybe you know how to pull out of Rhotoshop SS without this base64?
here it is natural that it will not display in any way, depending on how you were given the design and it is not advisable to convert it into a smart object, but immediately pull it clean and pull it from Photoshop CC or persuade the designer to provide you with icons in this format

Accepted Answer · 2016-10-13T09:32:21

Photoshop saved you an icon in an svg-file, but containing inside itself a png-picture in base64 format.

A quick solution is to put this base64 code on the background of the block you need, like this:

 & :nth-child(1) { background-image: url("data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAbCAMAAACgNuTpAAAABGdBTUEAALGPC/+DQyaAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB+AJGQ01GTQTMmMAAAEXSURBVCjPbZBrV4JAEIaHIsPsKrJILZErSUKZZmZiAt1LzO7ZPev//4i4qB/YfT+8O+c5O+/MGYCkpqb5cTmTmhXSc1GZmV9YXIrp8kpWzElIziuryhpWU+uiFuKNAhGKoG+WDJVs5csmWHg7wDvZyu44z4yfai0wac9MTq5VA6vvUxs18AFAU9WT/FBsAdjtI6qh3gFwCE9xReUAXI/ix+gEQChQC5mkBHCKzqgGzwDQpfMk1i/UwI3oTlbj8sqJ6XXXD7/2ZA0yN9gXEXH76du7brsSJd+jh8en55eB9sp7EkbkzebiuPePz74zSra+vidjfobAVNkfMHnRb7Ebhh02b+Y4JrfDOzHkyL/sINdg895fkvwDdpQgqUPG9McAAAAASUVORK5CYII="); } : img / png; base64, iVBORw0KGgoAAAANSUhEUgAAABcAAAAbCAMAAACgNuTpAAAABGdBTUEAALGPC / + DQyaAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1 + / AAAAAd0SU1FB + AJGQ01GTQTMmMAAAEXSURBVCjPbZBrV4JAEIaHIsPsKrJILZErSUKZZmZiAt1LzO7ZPev // 4i4qB / YfT + 8O + c5O + / MGYCkpqb5cTmTmhXSc1GZmV9YXIrp8kpWzElIziuryhpWU + uiFuKNAhGKoG + WDJVs5csmWHg7wDvZyu44z4yfai0wac9MTq5VA6vvUxs18AFAU9WT / FBsAdjtI6qh3gFwCE9xReUAXI / ix + gEQChQC5mkBHCKzqgGzwDQpfMk1i / UwI3oTlbj8sqJ6XXXD7 / 2ZA0yN9gXEXH76du7brsSJd + jh8en55eB9sp7EkbkzebiuPePz74zSra & :nth-child(1) { background-image: url("data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAbCAMAAACgNuTpAAAABGdBTUEAALGPC/+DQyaAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB+AJGQ01GTQTMmMAAAEXSURBVCjPbZBrV4JAEIaHIsPsKrJILZErSUKZZmZiAt1LzO7ZPev//4i4qB/YfT+8O+c5O+/MGYCkpqb5cTmTmhXSc1GZmV9YXIrp8kpWzElIziuryhpWU+uiFuKNAhGKoG+WDJVs5csmWHg7wDvZyu44z4yfai0wac9MTq5VA6vvUxs18AFAU9WT/FBsAdjtI6qh3gFwCE9xReUAXI/ix+gEQChQC5mkBHCKzqgGzwDQpfMk1i/UwI3oTlbj8sqJ6XXXD7/2ZA0yN9gXEXH76du7brsSJd+jh8en55eB9sp7EkbkzebiuPePz74zSra+vidjfobAVNkfMHnRb7Ebhh02b+Y4JrfDOzHkyL/sINdg895fkvwDdpQgqUPG9McAAAAASUVORK5CYII="); }

And you do not need a svg-file.

Perhaps it makes sense for you to contact the author of the PSD layout and ask him to drop the png-files of the icons that he inserted into the layout. It will be easier than cutting out smart objects from a layout and embedding base64 into styles.

Also, when you set the background of a block (whether it is a solid color, a gradient or an image), you only affect the background of the block, not its size. And if the block sizes are not explicitly specified, you get a block of 0px 0px size that is not visible.

Set the block size explicitly through height and width , taking the values from the svg sizes in your PSD layout.

Of course, I have already done all such manipulations with size and color.
Then please complement your question with the styles that you assign to the block besides background-image .
} &: nth-child (1) {background-image: url ("/ images / advantages-1.svg");
base64 is provided for small details on the page, and the background is not completely desirable to pour, it gives the opportunity not to make extra http requests for various trivia
I was just sure that this is a vector icon, and that’s what I suffered.

Answer 2 · 2016-10-13T09:31:15

Check for xmlns="http://www.w3.org/2000/svg" tag svg .
Check for <?xml version="1.0"?> At the beginning of the file.

 <svg xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; width="23" height="27" viewBox="0 0 23 27"> <defs> <style> .cls-1 { opacity: 0.33; } </style> </defs>

There is some garbage in the attributes, plus a couple of extra. Try this:

 <?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://w3.org/1999/xlink" viewBox="0 0 23 27"><defs>

<svg xmlns = " w3.org/2000/svg " xmlns: xlink = " w3.org/1999/xlink " width = "23" height = "27" viewBox = "0 0 23 27"> <defs> <style > .cls-1 {opacity: 0.33;
@ Eugene I wrote to you above what to do: no changes in this answer will help if you pulled out base64
@LieutenantJimDangle, using base64 for text data is a perversion.

Wonders with svg icons

2 answers 2

More articles: