Sometimes, you just want (or need) to embed the SVG directly into a css psuedo element. I usually get tempted to do this on links or buttons, but it can be useful in many ways.

Here’s the idea. You want this code:

<!-- HTML -->
<a href="#" class="fancy-link">
    Link Here
</a>

to look something like this:

This is one person’s problem

https://stackoverflow.com/questions/26224858/use-base64-svg-image-as-css-content-source

When i open the “broken” base 64 image into a new chrome tab, this is the resulting error:

This page contains the following errors:

error on line 10 at column 1: Extra content at the end of the document Below is a rendering of the page up to the first error.

https://stackoverflow.com/questions/26224858/use-base64-svg-image-as-css-content-source

now, i’ve never used base64 images, but i have to do something special or it should be just copy and paste the autogenerated code?

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  body:first-of-type pre::after {
    content: 'highlight: ' attr(class);
  }
}

@import url('print.css');
@page:right {
 margin: 1cm 2cm 1.3cm 4cm;
}

@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

div.text,
#content,
li[lang=ru] {
  font: Tahoma, Chunkfive, sans-serif;
  background: url('hatch.png') /* wtf? */;  color: #F0F0F0 !important;
  width: 100%;
}

thanks in advance for the help

.default:after{
    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZD0iTTgsMEMzLjU4MiwwLDAsMy41ODIsMCw4czMuNTgyLDgsOCw4czgtMy41ODIsOC04UzEyLjQxOCwwLDgsMHogTTksMTJjMCwwLjU1Mi0wLjQ0OCwxLTEsMXMtMS0wLjQ0OC0xLTFWNw0KCWMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxVjEyeiBNOCw1LjAxNmMtMC41NTIsMC0xLTAuNDQ4LTEtMWMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxQzksNC41NjgsOC41NTIsNS4wMTYsOCw1LjAxNnoNCgkiLz4NCjwvc3ZnPg0K1422f94715e8d9b67004ad32568deab3');
    position:absolute;
    width:100px;
    height:100px;
  }

In PHP, you can do this for INLINE CSS.

echo "background: transparent url('data:image/svg+xml;base64,"$(openssl base64 < path/to/file.svg)"') no-repeat center center;"

Helpful resources

• https://codepen.io/jakob-e/pen/doMoML
• http://www.opinionatedgeek.com/dotnet/tools/Base64Encode/
• https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
  

I always use SVGOMG

  content: '';
  background: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 49'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M.235 21.572h46.098v6H.235v-6Z' fill='%23000'/%3E%3Cpath d='m18.298.692 23.793 23.792-23.968 23.967h8.486l23.967-23.967L26.784.692h-8.486Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center center;
  display: inline-block;
  height: 100%;
  width: 11px;
  margin-left: 8px;
}