0

I am trying to use a svg inside content of :before pseudo element as outlined here. But I cannot for the life of me get it to work.

This is my SVG:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.54 64.81"><defs><style>.cls-1{fill:blue;}</style></defs><polygon class="cls-1" points="49.17 0 44.56 4.61 69.12 29.17 0 29.17 0 35.7 68.99 35.7 44.49 60.2 49.1 64.81 76.93 36.98 81.54 32.37 49.17 0"/></svg>

This is my CSS:

a:link::before {
content: url("data:image/svg+xml;charset=UTF-8, <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.54 64.81"><defs><style>.cls-1{fill:blue;}</style></defs><polygon class="cls-1" points="49.17 0 44.56 4.61 69.12 29.17 0 29.17 0 35.7 68.99 35.7 44.49 60.2 49.1 64.81 76.93 36.98 81.54 32.37 49.17 0"/></svg>");
display: inline-block;

}

Nothing is appearing when I view the page. Just to test if it works I tried a different more simple SVG found on this site:

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /></svg>

If I use that SVG instead of mine, it works. So something with my SVG definition is breaking things.

Can anyone figure out what is going on? It would be extremely helpful.

fmotion1
  • 237
  • 4
  • 12
  • One uses single quotes, the other double quotes around attributes. Your url() around it uses double quotes so the double quotes surrounding the url are interrupted by the double quotes in the content. If you use double quotes for svg attributes then your url must be single quotes or vice versa. – Robert Longson Aug 18 '21 at 06:36
  • in the CSS code you are sharing: 1. you need to use single quotes inside the svg part of the code. 2. you need a width either for the svg element or for the ::before – enxaneta Aug 18 '21 at 06:37

0 Answers0