How to Force AEM to Not Process CSS URLs

By default, AEM CSS processor will transform the CSS URL functional notation “url()” into a relative URL to the ClientLibrary, if the URL was relative to begin with, ie, it does not start with “/”
This poses an issue when using the CSS fill property for SVG and providing a gradient id (read more here)

The following was tested on AEM 6.2 and AEM 6.3.

For example:
if you had the following SVG markup:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
  <path class="svg-icon" d=""></path>
</svg>
<svg class="svg-helpers" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0">
 <linearGradient id="svg-gradient" gradientUnits="userSpaceOnUse" x1="24.602" y1="44.404" x2="24.602" y2="5.599">
 <stop offset="0" stop-color="#a81d36"></stop>
 <stop offset=".768" stop-color="#d52805"></stop>
 </linearGradient>
</svg>

Inspired Digital Experiences for Manufacturing & Automotive

Whether you’re just beginning your digital transformation journey or are well on your way, we invite you to explore our partnership with Adobe and our diverse capabilities in manufacturing and automotive.

Download Lookbook

and the following ClienLibrary:
ClienLibrary path: /etc/design/clientlib/test

# css.txt
main.css

/* main.css */
.svg-icon{
  fill: url(#svg-gradient) /* use the defined svg gradient with id:#svg-gradient to fill this shape */
}

Because AEM will rewrite URL’s to the relative path, the resulting CSS on the pag would actually be:

/* AEM generated css after rewrite */
.svg-icon{
  fill: url(test/#svg-gradient) /* use the defined svg gradient with id:#svg-gradient to fill this shape */
}

But this is not desired as the browser will now try to resolve that relative path to: /etc/design/clientlib/test/#svg-gradient
To overcome this, we need to tell AEM to not process this url, we can do so by adding the string “absolute:” to the beginning of the url:

/* adjusted main.css */
.svg-icon{
  fill: url(absolute:#svg-gradient)
}

AEM will now refrain from processing the url and generate the following desired CSS:

/* adjusted main.css */
.svg-icon{
  fill: url(#svg-gradient)
}

cheers!