This mixin allows you to embed SVG code within CSS files using LESS. The techniques within this mixin relate to the insights found at CSS Tricks' article "Probably Don't Base64 SVG"

inline-svg-code.less

// Inline SVG code images in LESS CSS
// @author Matt Scheurich <[email protected]> (http://lvl99.com)
// Github: https://github.com/lvl99/less-inline-svg-code
.inline-svg-code( @code ) {
  @-svg-code: escape(~'<?xml version="1.0" ?>@{code}');
  @-inline-svg-code: ~'data:image/svg+xml,@{-svg-code}';
  @-inline-svg-url: ~"url('@{-inline-svg-code}')";
}

// Basic Example
// ---------------
.example-1 {
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  overflow: hidden;
  text-align: left;
  text-indent: -999em;

  // Encode the SVG code into a string which can be used within this class declaration
  .inline-svg-code(~'<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 600" preserveAspectRatio="xMin yMin"><g><rect fill="white" stroke="#000" stroke-width="1.5" x="110.75" y="299.25" width="180" height="180" id="rectangle"/><circle fill="white" stroke="#000" stroke-width="1.5" cx="300" cy="300" r="107.5" id="circle"/><path fill="white" stroke="#000" stroke-width="1.5" d="m430.75,120.75l-123.5,176l242,0l-118.5,-176z" id="triangle"/></g></svg>');

  // Apply the background image using the `@-inline-svg-url` variable
  background-image: @-inline-svg-url;
}

// Dynamic Example
// ---------------
// I've created a dynamic mixin to generate consistent SVG image code that can support color changes
.example-inline-svg( @color-triangle: white, @color-square: white, @color-circle: white ) {
  @example-svg-code: ~'<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 600" preserveAspectRatio="xMin yMin"><g><rect fill="@{color-square}" stroke="#000" stroke-width="1.5" x="110.75" y="299.25" width="180" height="180" id="rectangle"/><circle fill="@{color-circle}" stroke="#000" stroke-width="1.5" cx="300" cy="300" r="107.5" id="circle"/><path fill="@{color-triangle}" stroke="#000" stroke-width="1.5" d="m430.75,120.75l-123.5,176l242,0l-118.5,-176z" id="triangle"/></g></svg>';

  // Here I apply the inline SVG code mixin to retrieve the encoded URL to set as the background-image
  .inline-svg-code(@example-svg-code);
  background-image: @-inline-svg-url;
}

.example-2 {
  display: block;
  width: 100%;
  height: 300px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  overflow: hidden;
  text-align: left;
  text-indent: -999em;

  // Here I set the initial state, which will be based on the default color values
  .example-inline-svg();
  
  // Let's go RGB, bebe
  @media screen and (min-width: 500px) and (max-width: 799px) {
    .example-inline-svg(red, green, blue);
  }
  
  // How 'bout some red, white and blue (Viva la France!)
  @media screen and (min-width: 800px) and (max-width: 1199px) {
    .example-inline-svg(red, white, blue);
  }
  
  // Greyscale for fun
  @media screen and (min-width: 1200px) {
    .example-inline-svg(black, grey, white);
  }
}