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>

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

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!