Adobe

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>

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!
 
 

Leave a Reply

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

Ahmed Musallam, Adobe Technical Lead

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

More from this Author

Subscribe to the Weekly Blog Digest:

Sign Up
Follow Us
TwitterLinkedinFacebookYoutubeInstagram