How to Force AEM to Not Process CSS URLs

By default, the 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>

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)
}