Embedding SVGs on CSS

HTML & CSS
1

Hello everyone.

Currently 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 SVG icon? I have tried replacing the data portion for:

(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>);

But it doesn’t work (at best, I have gotten it to show a broken image, using all type of combinations on “ and ‘ within the <svg …> tags.

Help, anyone?

2

How about applying it as a background to the pseudo element?

3

Could you elaborate (with an example, changing the original code, if possible)? Any reason why it would not work the way I am using it? What is the correct way to include inline SVGs on CSS?

4

I have never had any need to have an svg in-line in css, I would reference it by url. The only time I use in-line svg is in html when I want to use css on the image.
I suppose in-line will cut down on requests.

5

Maybe this article will help?

6

It helped, @PaulOB. Adding xmlns="http://www.w3.org/2000/svg” to the <svg…> and base64 encoding it did the trick. Thanks!

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.