Embedding it on CSS

[Fastidious]

Hi there! I am not sure this question relates to the project directly, but I wonder if someone will have an answer. Right now I am using:

a[href^="http://"]:not([href*="example.com"]):after {
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAALCAYAAABLcGxfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHVJREFUeNqUj9ENwCAIRMX4rxt0Dfb/0TW6gU5AMZGWGrTpS4wYOe4AInJCKeV52CTQgh08rPJ1hM1n1JOlgJzzywIRwRB2wSkOrRfc2KwIo/FmFYnEiWu3FejmETFpoZ8F8w584mckC3Hy7ifiUOflVlwCDAD7aDdkNyNkZQAAAABJRU5ErkJggg==);
}
a[href^="https://"]:not([href*="example.com"]):after {
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAALCAYAAABLcGxfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHVJREFUeNqUj9ENwCAIRMX4rxt0Dfb/0TW6gU5AMZGWGrTpS4wYOe4AInJCKeV52CTQgh08rPJ1hM1n1JOlgJzzywIRwRB2wSkOrRfc2KwIo/FmFYnEiWu3FejmETFpoZ8F8w584mckC3Hy7ifiUOflVlwCDAD7aDdkNyNkZQAAAABJRU5ErkJggg==);
}

To add a PNG on external URLs. How could I go to replace the PNG with a bytesize icon? I have tried:

(data:image/svg+xml;utf8,<svg id="i-external" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke width="6.25%"><path d="M14 9 L3 9 3 29 23 29 23 18 M18 4 L28 4 28 14 M28 4 L14 18" /></svg>);

Using many combinations (replacing " with ', escaping them, \", \') on the <svg> to no avail.

Update:

I tried using one of the icons in an image tag, and it shows broken. I used:

<img src='data:image/svg+xml;utf8,<svg class="i-external" viewBox="0 0 32 32" width=“24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin=“round" stroke-width="6.25%"><path d="M14 9 L3 9 3 29 23 29 23 18 M18 4 L28 4 28 14 M28 4 L14 18” /></svg>'>

Yet, trying with other SVGs work:

<img src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px"><g><path d="M28.1,36.6c4.6,1.9,12.2,1.6,20.9,1.1c8.9-0.4,19-0.9,28.9,0.9c6.3,1.2,11.9,3.1,16.8,6c-1.5-12.2-7.9-23.7-18.6-31.3 c-4.9-0.2-9.9,0.3-14.8,1.4C47.8,17.9,36.2,25.6,28.1,36.6z"/><path d="M70.3,9.8C57.5,3.4,42.8,3.6,30.5,9.5c-3,6-8.4,19.6-5.3,24.9c8.6-11.7,20.9-19.8,35.2-23.1C63.7,10.5,67,10,70.3,9.8z"/><path d="M16.5,51.3c0.6-1.7,1.2-3.4,2-5.1c-3.8-3.4-7.5-7-11-10.8c-2.1,6.1-2.8,12.5-2.3,18.7C9.6,51.1,13.4,50.2,16.5,51.3z"/><path d="M9,31.6c3.5,3.9,7.2,7.6,11.1,11.1c0.8-1.6,1.7-3.1,2.6-4.6c0.1-0.2,0.3-0.4,0.4-0.6c-2.9-3.3-3.1-9.2-0.6-17.6   c0.8-2.7,1.8-5.3,2.7-7.4c-5.2,3.4-9.8,8-13.3,13.7C10.8,27.9,9.8,29.7,9,31.6z"/><path d="M15.4,54.7c-2.6-1-6.1,0.7-9.7,3.4c1.2,6.6,3.9,13,8,18.5C13,69.3,13.5,61.8,15.4,54.7z"/><path d="M39.8,57.6C54.3,66.7,70,73,86.5,76.4c0.6-0.8,1.1-1.6,1.7-2.5c4.8-7.7,7-16.3,6.8-24.8c-13.8-9.3-31.3-8.4-45.8-7.7   c-9.5,0.5-17.8,0.9-23.2-1.7c-0.1,0.1-0.2,0.3-0.3,0.4c-1,1.7-2,3.4-2.9,5.1C28.2,49.7,33.8,53.9,39.8,57.6z"/><path d="M26.2,88.2c3.3,2,6.7,3.6,10.2,4.7c-3.5-6.2-6.3-12.6-8.8-18.5c-3.1-7.2-5.8-13.5-9-17.2c-1.9,8-2,16.4-0.3,24.7   C20.6,84.2,23.2,86.3,26.2,88.2z"/><path d="M30.9,73c2.9,6.8,6.1,14.4,10.5,21.2c15.6,3,32-2.3,42.6-14.6C67.7,76,52.2,69.6,37.9,60.7C32,57,26.5,53,21.3,48.6   c-0.6,1.5-1.2,3-1.7,4.6C24.1,57.1,27.3,64.5,30.9,73z"/></g></svg>'>

[Fastidious]

OK, I found a way to do it. The trick is to use xmlns="http://www.w3.org/2000/svg”, and I also base64 encode it. That works. Now I have run into another issue, which I believe it can’t be fixed. It seems stroke=“currentcolor” will not work, the icon will be rendered black. Does anyone knows a way so that the icon will inherit the colour?

[danklammer]

Since you are rendering the SVG as an image you won't be able to manipulate fills or stroke from DOM.

[saboorazizi]

Hi ! I am new to html, css and others, and I am sorry if my question is not appropriate.

I search a lot to fine hoe could I load the SVG icons in to a CSS file and then use it in a project or a php file. I don't want to have the SVG tag inside my php or html tags.

Before I use glyphicon with bootstrap, inside a span tag. Can I load it in a span/id or class and the source should be out side of the file: <link href="../style/css/bytesize.css" rel="stylesheet">

Thank you!

[danklammer]

@saboorazizi You can load the entire SVG library once (even as n external file for cache advantages), and use the tag to show the icons you want. Demo: https://cdn.rawgit.com/danklammer/bytesize-icons/master/examples/bytesize-symbols.html

<use xlink:href="/icons/bytesize-icons.svg#i-search" />

Note: This doesn't work for IE, so you'd you need to use a polyfill like SVG4Everybody: https://github.com/jonathantneal/svg4everybody