URL in CSS getting shortened

[Amogh_Aggarwal]

We have added a simple image to the CSS of form options which adds an image of a tick mark to the box instead of just filling it in a solid color. The issue we are having is that when deployed on SIT, the URL is shortened automatically which leads the image failing to load.

This is the link showing on Local which is an image of tick mark and is working fine.

data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e

But this same link on SIT and dev is wrong as the whitespace in the link is being deleted.
For example, in viewBox, ‘0 0 20 20’ is being changed to ‘002020’.

data:image/svg+xml,%3csvgxmlns='http://www.w3.org/2000/svg'viewBox='002020'%3e%3cpathfill='none'stroke='%23fff'stroke-linecap='round...

 

How can we prevent this URL from being shortened automatically when we deploy our code ?

[gkalyan · Accepted solution]

Hi @Amogh_Aggarwal 

To prevent this from happening, you can try encoding the SVG image as a base64 string and then using it in your CSS. This can help avoid issues with automatic URL shortening and ensure that the image loads correctly across different environments. 

You can check if there are any configurations in dispatcher, Apache sling rewriter module that cause this URL shortening and prevent it for images.

[Amogh_Aggarwal]

Thank You very much, it works perfectly after adding it to CSS in base64.