How to add SVG code into pseudo element?

HTML & CSS
1

I try to add SVG code into pseudo element, Need help How to do it without an error.

.smyicon::before {
 content: url(data:image/svg+xml, <svg version="1.1" id="" xmlns="http://www.w3.org/2000/svg" width="30" height="30" xmlns:xlink="" 
	 viewBox="" style="" xml:space="preserve">
<path d=""/>
</svg>);
2

Save the SVG to a file and reference it by URL.

1 Like
3

As @SamA74 suggested. :slight_smile:

SO has a thread about that:

4

Is there any free tool to store SVG into file?

5

notepad? textedit?

Take the SVG html, stick it into a text editor, hit save…

2 Likes
6

It seems to work for me ok. What’s your full svg code?

2 Likes
7

Can you let me know when I check validation and your code:

div:before {
  content: url('data:image/svg+xml;utf8,<svg height="100px" width="500px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polyline fill="none" stroke="gold" stroke-width="3" points="0,45 40,45 44,31 49,44 55,46 61,52 83,8 90,90 100,44 115,44 125,40 139,45 140,45,150,45 180,65 194,31 199,44 205,46 211,52 233,8 240,90 250,44 265,44 275,10 290,45 300,45, 320,45 360,65 394,31 399,44 405,46 411,52 433,8 440,90 450,44 465,44 475,40 490,45 500,45"></polyline></svg>');
  display:block;
  width: 500px;
  height: 100px;
  background-color:black;
  position: relative;
}

Validator:

How to solve this error? Line 1 : Start tag expected, ‘<’ not found

8

That validator is for HTML. If you want to validate the CSS you need to use https://jigsaw.w3.org/css-validator/

2 Likes
10

Thank you for all replies. I have solved this issue. ></path> was not closed.

1 Like
11

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