482

I would like to use ::before to place SVG images before some selected elements:

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

Above code just displays the plaintext.
I checked the spec and there seem to be some restrictions on what content can be. CSS content property solution is preferable.

2
  • 1
    Is something wrong with using it as a background image?
    – cimmanon
    Oct 8, 2013 at 18:23
  • 2
    I want to use it to generate fancy pointers to JQuery UI tooltips. I do that now with CSS pseudo elements hack but that gives me only triangles. Background image will not work in this case as I need something that goes outside the element.
    – Sunny
    Oct 9, 2013 at 17:00

11 Answers 11

547

Yes you can! Just tested this and it works great, this is awesome!

#test::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}

Or if you prefer to put the SVG directly in the CSS:

#test::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180' style='fill:none;stroke:black;stroke-width:3'/%3E%3C/svg%3E ");
  width: 200px;
  height: 200px;
}
<div id="test"></div>

SVG URL encoder to format your own SVGs as shown here.

22
  • 28
    Unless SVGs are special, you should be able to treat them the same as you would an image: content: url(path/to/my.svg). That doesn't necessarily mean it would work with the jQuery UI tooltips library, though.
    – cimmanon
    Oct 9, 2013 at 17:10
  • 7
    unfortunately, i don't believe this solution works with SVG sprites. for instance, content: url(mysprite.svg#my-icon) won't actually pull up your icon. i would love to be proven wrong, however :)
    – Jason
    Apr 27, 2015 at 18:10
  • 4
    @watson, semantic. The HTML = structure, CSS = presentation. If a SVG is decorative then it shouldn't be in the HTML structure, it should be in CSS.
    – deathlock
    Oct 3, 2016 at 12:11
  • 3
    @Jason: sprites with fragment identifiers (content: url(mysprite.svg#my-icon)) will work if you define views in the SVG, e.g. <view id="my-icon" viewBox="0 0 32 32" />: css-tricks.com/svg-fragment-identifiers-work
    – Peter
    Mar 6, 2020 at 13:48
  • 9
    As mentioned in other replies; Its 2020, So does SVG: content:url("data:image/svg+xml,<svg width='10' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><circle cx='4' cy='4' r='4' fill='red'/></svg>"); Mar 6, 2020 at 15:34
275

You can use the url() CSS function.

#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 doesn't contain any # symbols. Use an encoder like this one.

8
  • 28
    Since SVGs often use double quotes, you can also just use outer single quotes. @Jenny's suggestion is a great way of doing it if you don't want to use an external SVG file.
    – Micros
    Jun 1, 2017 at 8:18
  • 3
    This is great. Unfortunately it only works with Chrome for me (tested on Chrome, Firefox and Edge).
    – Arsen
    Aug 16, 2017 at 19:54
  • 18
    What I found important is to add xmlns='http://www.w3.org/2000/svg' in the <svg> part to work in Chrome 66.x. For example - small chevron will be: content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");
    – darth0s
    Jun 25, 2018 at 9:40
  • 11
    fyi # urlencodes to %23, and also have to remove all line breaks.
    – ryanrain
    Aug 22, 2019 at 13:03
  • 14
    Easy way: Use yoksel.github.io/url-encoder for safe encoding SVG images as URL data (background-image or content property).
    – Rafiozoo
    Oct 1, 2020 at 12:38
245

You can add the SVG as background-image of an empty :after or :before.

Here you go:

.anchor:before {
  display: block;
  content: ' ';
  background-image: url('../images/anchor.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}
9
  • 14
    I find this one of the best solutions, after looking for a while. You can control every single aspect of the inserted element and works in the normal way CSS style-sheets works, with separated logic. Great
    – Danielo515
    Nov 6, 2014 at 15:03
  • ...ahh this got my hopes up, until I realize that background-size is not supported in Opera Mini. This is so frustrating.
    – deathlock
    Oct 3, 2016 at 13:27
  • 1
    Should be the accepted answers since the question says "in a pseudo element :before or :after" Oct 24, 2018 at 10:02
  • 8
    @NicolasBoisteault I tried it but what worked for me was actually to use this structure as one of the answers : url("data:image/svg+xml; utf8, <svg.. code here</svg>");
    – Max
    Jul 19, 2020 at 23:14
  • 1
    I couldn't get Max 's tip to work until I put my in a file, then base64-encoded it. Example (adds "External Link" icon after links): a:after{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSIjMzU2IiBzdHJva2Utd2lkdGg9IjIuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHlsZT0ibGluZS1oZWlnaHQ6MDsgY3Vyc29yOnBvaW50ZXIiPjxwb2x5bGluZSBwb2ludHM9IjE3LDE0IDE3LDIwIDUsMjAgNSw4IDExLDgiPjwvcG9seWxpbmU+PHBhdGggZD0iTTE0LDVMMjAsNSBMMjAsMTFNMjAsNUwxMSwxNCI+PC9wYXRoPjwvc3ZnPg==);}
    – ashleedawg
    Feb 13, 2021 at 11:12
47
<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>

Convenient tool for SVG encoding url-encoder

36

Making use of CSS sprites and data uri gives extra interesting benefits like fast loading and less requests AND we get IE8 support by using image/base64:

Codepen sample 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......);
9
  • 1
    But this isn't scalable, isn't it? I can't resize it to 16px or 320px at will.
    – deathlock
    Oct 3, 2016 at 11:21
  • @deathlock Of course it scales, though not my sample as it has a fixed size set, 80px wide/high.
    – Asons
    Oct 3, 2016 at 15:00
  • 1
    @deathlock May I ask if you downvoted because the above sample didn't scale?
    – Asons
    Oct 3, 2016 at 15:09
  • how would you make it scale? And no, I didn't.
    – deathlock
    Oct 6, 2016 at 12:28
  • @deathlock Thanks, and here is one way to scale svg: jsfiddle.net/ess6ywce ... using percent. Also, search SO with scale svg and you'll find many more ways
    – Asons
    Oct 6, 2016 at 16:16
18

To extend further this topic. In case you want to add Font Awesome 5 icons you need to add some extra CSS.

Icons by default have classes svg-inline--fa and fa-w-*.

There are also modifier classes like fa-lg, fa-rotate-* and other. You need to check svg-with-js.css file and find proper CSS for that.

You need to add your own color to css icon otherwise it will be black by default, for example fill='%23f00' where %23 is encoded #.

h1::before{

  /* svg-inline--fa */
  display:inline-block;
  font-size:inherit;
  height:1em;
  overflow:visible;
  vertical-align:-.125em;
  
  /* fa-w-14 */
  width:.875em;
  
  /* Icon */
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23f00' d='M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zM264 408c0 22.1-17.9 40-40 40s-40-17.9-40-40v-48c0-22.1 17.9-40 40-40s40 17.9 40 40v48z'%3E%3C/path%3E%3C/svg%3E");
  
  /* Margin */
  margin-right:.75rem;
}
<h1>Lorem Ipsum</h1>

6

Be careful all of the other answers have some problem in IE.

Lets have this situation - button with prepended icon. All browsers handles this correctly, but IE takes the width of the element and scales the before content to fit it. JSFiddle

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

Solution is to set size to before 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 works as well, but is little unhandy, since you have to specify the same sizes twice.

The result in IE11:

IE rendering

5

Although this was many years ago, I'd like to also share this.

The answers above are correct, you can directly attach the encoded svg string into the css content property. For those having any issues with the URL it may be due to spaces and characters not valid for such, in that case paste your decoded SVG code into: https://mothereff.in/url

Use the encoded SVG URL and it should work fine. Incorrect & Correct Examples:

#incorrect::before {
  content: url(
    data:image/svg + xml,
    <svgid="Layer_1"data-name="Layer 1"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 15.37 188.41"><defs><style>.cls-1{fill:#aeadad;}</style></defs><circleclass="cls-1"cx="7.69"cy="7.69"r="7.69"/><rectclass="cls-1"x="6.69"y="27.72"width="2"height="160.69"/></svg>
  );
}
#correct::before {
  content: url(data:image/svg+xml,%0A%3Csvg%20id%3D%22Layer%5f1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015.37%20188.41%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23aeadad%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%227.69%22%20cy%3D%227.69%22%20r%3D%227.69%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226.69%22%20y%3D%2227.72%22%20width%3D%222%22%20height%3D%22160.69%22%2F%3E%3C%2Fsvg%3E%0A);
}
4
  • It works, thanks! However yet i can't modify several svg properties with css. :( So it's width i needed to hardcode as html attribute, like: <svg width="30" ... It's color or fill property i also fail to change by external css sheet. Positioning works at least. Any idea? Jan 6, 2022 at 19:07
  • Are you applying the css properties via class or id? & also, is the bag within an Object element ? If so apply the changes to the object > svg - Also if your rendering the svg via content method ^ you’ll need to apply it to the svg first as the css won’t effect the content properties as it’s an external link and the paths etc are not rendered within the page as such
    – JCrook
    Jan 7, 2022 at 20:20
  • 1
    Got it man! Works. So we truly NEED to add each property (attribute) to the svg html itself. No other way with external css.. Here seems to be more details on the reason here: stackoverflow.com/a/4505130/9022150 "Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing)." Thanks again. Jan 8, 2022 at 9:24
  • So if i choose to have N pieces of svg-s each injected via content methods, then later for e.g. changing the color for all of them, I'd need to copy the svg out, url decode, modify color attr, url encode, paste back to content method.. Haha, probably, thanks no ;) Jan 8, 2022 at 9:33
3

using a background mask image with empty content, you can control the color from within css: (Don't forget the position, width and height that you prefer)...!

background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
content:'';
1

I just today noticed that a newspaper here used direct injection of the SVG into the ::before and ::after pseudo-elements to render stylized quotes for highlighted content in the article. I tried to find that paper's CMS via whatcms.org but to no avail. I can say however that the owner newspaper - a large national, even international, paper uses a CMS called DM Polopoly.

It seems so much more laborious to enter SVG data into the content element rather than blank the content and use the SVG as a background image. I wonder why they chose this method - what advantage went with this. I've seen some people on Google links who said it made it easy to manipulate the SVG image on hovering upon the pseudo-element . . . But I saw no killer example of this 'benefit'.

This article has a simpler method for inserting the SVG as content. It uses a zoom property to get size adjustment for the image.

-1
.myDiv {
  display: flex;
  align-items: center;
}

.myDiv:before {
  display: inline-block;
  content: url(./dog.svg);
  margin-right: 15px;
  width: 10px;
}
1
  • 5
    You should explain a little more your answer. Just from this, it's really hard to tell how or why your answer works.
    – ifconfig
    Jul 30, 2019 at 18:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.