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>
The Digital Essentials, Part 3
The Digital Essentials, Part 3

Developing a robust digital strategy is both a challenge and an opportunity. Part 3 of the Digital Essentials series explores five of the essential technology-driven experiences customers expect, which you may be missing or not fully utilizing.

Get the Guide

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!
 
 

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