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="" viewBox="0 0 50 50">
  <path class="svg-icon" d=""></path>
<svg class="svg-helpers" aria-hidden="true" xmlns="" 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>

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

# css.txt
/* main.css */
  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 */
  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 */
  fill: url(absolute:#svg-gradient)

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

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


About the Author

Ahmed is an Adobe Technical Lead and expert in the Adobe Experience Cloud.

More from this Author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up