Best IT Recipes

Is there a way to use SVG as content in a pseudo-element: before or: after

I want to place some SVG images in front of some selected elements. I use jQuery, but that doesn’t matter. I would like to have: before an element like:

#mydiv:before { content:"<svg.. code here</svg>"; display:block; width:22px; height:10px; margin:10px 5px 0 10px; }

If I do this as shown above, it will simply display the line. I checked the specs and there seem to be some limitations on what content might be. Is there any work on this limitation? Only css content is relevant to my question.

+86
css svg
08 Oct '13 at 18:17
source share
6 answers

Sorry, no, the spec says the content property only supports generated text content, no html, svg stuff or tags at all.

Yes, you can! Just experienced it and it works great, it's awesome! It still does not work with html, but it works with svgs.

In my index.html, I have:

 <div id="test" style="content: url(test.svg); width: 200px; height: 200px;"></div>

And my test.svg looks like this:

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /> </svg>
+109
Oct 08 '13 at 18:26
source share

Yes. You can add SVG as the background image of an empty: after or: before. Here you are:

 .anchor:before { display: block; content: ' '; background-image: url('../images/anchor.svg'); background-size: 28px 28px; height: 28px; width: 28px; }
+41
Aug 20 '14 at 17:09
source share
 #mydiv:before { content: url("data:image/svg+xml; utf8, <svg.. code here</svg>"); display:block; width:22px; height:10px; margin:10px 5px 0 10px; }

make sure your svg does not contain double quotes and uriencode any # characters.

+34
Mar 26 '15 at 10:46
source share

Using CSS sprites and uri data provides additional interesting benefits, such as faster loading and fewer requests. And we get IE8 support with image / base64:

Sample Codepen Using SVG

HTML

 <div class="div1"></div> <div class="div2"></div>

CSS

 .div1:after, .div2:after { content: ''; display: block; height: 80px; width: 80px; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E); } .div2:after { background-position: -80px 0; }

For IE8, change to this:

  background-image: url(data:image/png;base64,data......);
+16
Nov 21 '14 at 18:38
source share

Be careful, all other answers have some problems in IE.

Lets have this situation - a button with an added icon. All browsers handle this correctly, but IE takes the width of the element and scales the content to its content. Jsfiddle

 #mydiv1 { width: 200px; height: 30px; background: green; } #mydiv1:before { content: url("data:url or /standard/url.svg"); }

The solution is to set the size to the element and leave it where it is:

 #mydiv2 { width: 200px; height: 30px; background: green; } #mydiv2:before { content: url("data:url or /standard/url.svg"); display: inline-block; width: 16px; //only one size is alright, IE scales uniformly to fit it }

The background-image + background-size solutions also work, but are not very convenient, since you must specify the same sizes twice.

Result in IE11:

IE rendering

+4
Apr 18 '15 at 6:45
source share
 <div class="author_">Lord Byron</div> 

 .author_ { font-family: 'Playfair Display', serif; font-size: 1.25em; font-weight: 700;letter-spacing: 0.25em; font-style: italic; position:relative; margin-top: -0.5em; color: black; z-index:1; overflow:hidden; text-align:center; } .author_:after{ left:20px; margin:0 -100% 0 0; display: inline-block; height: 10px; content: url(data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D%2220px%22%20viewBox%3D%220%200%201200%20200%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20d%3D%22M1145%2085c17%2C7%208%2C24%20-4%2C29%20-12%2C4%20-40%2C6%20-48%2C-8%20-9%2C-15%209%2C-34%2026%2C-42%2017%2C-7%2045%2C-6%2062%2C2%2017%2C9%2019%2C18%2020%2C27%201%2C9%200%2C29%20-27%2C52%20-28%2C23%20-52%2C34%20-102%2C33%20-49%2C0%20-130%2C-31%20-185%2C-50%20-56%2C-18%20-74%2C-21%20-96%2C-23%20-22%2C-2%20-29%2C-2%20-56%2C7%20-27%2C8%20-44%2C17%20-44%2C17%20-13%2C5%20-15%2C7%20-40%2C16%20-25%2C9%20-69%2C14%20-120%2C11%20-51%2C-3%20-126%2C-23%20-181%2C-32%20-54%2C-9%20-105%2C-20%20-148%2C-23%20-42%2C-3%20-71%2C1%20-104%2C5%20-34%2C5%20-65%2C15%20-98%2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A); } .author_:before { right:20px; margin:0 0 0 -100%; display: inline-block; height: 10px; content: url(data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D%2220px%22%20viewBox%3D%220%200%201200%20130%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20d%3D%22M55%2068c-17%2C6%20-8%2C23%204%2C28%2012%2C5%2040%2C7%2048%2C-8%209%2C-15%20-9%2C-34%20-26%2C-41%20-17%2C-8%20-45%2C-7%20-62%2C2%20-18%2C8%20-19%2C18%20-20%2C27%20-1%2C9%200%2C29%2027%2C52%2028%2C23%2052%2C33%20102%2C33%2049%2C-1%20130%2C-31%20185%2C-50%2056%2C-19%2074%2C-21%2096%2C-23%2022%2C-2%2029%2C-2%2056%2C6%2027%2C8%2043%2C17%2043%2C17%2014%2C6%2016%2C7%2041%2C16%2025%2C9%2069%2C15%20120%2C11%2051%2C-3%20126%2C-22%20181%2C-32%2054%2C-9%20105%2C-20%20148%2C-23%2042%2C-3%2071%2C1%20104%2C6%2034%2C4%2065%2C14%2098%2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A); } 
  <div class="author_">Lord Byron</div>
+4
Aug 17 '15 at 8:58
source share


More articles:


All Articles