Add Dynamic SVGs in Service Portal

[wow-on-now]

Add Dynamic SVGs in Service Portal without embedding SVG code in every widget

 

Introduction

SVGs are a great way to add vector images to Service Portal and they can be super light weight and versatile for most applications. SVGs can be uploaded as an image in ServiceNow and be used within standard <img> tag in your markup. But the real power of SVG code comes in when you can interact with your SVG images with CSS and use advanced methods to control color and even animate these images with custom events and more.

Problem

If you are currently using SVGs then chances are that you are embedding your SVG markup within your widgets or just using them as embedded images and thereby losing the dynamic capabilities. 

Solution

We created an Angular Directive that embeds the SVG image as an Object and use CSS to drive colors right from the SASS and/or CSS variables available in Service Portal. 

We have shared the SVG Embed Directive on Share Portal and here is a video that walks you through the process.

About Me/Us

I have been in frontend development for about two decades and have played just about every role in the SDLC. What I enjoy the most is building solutions that are not just functional but delightful to use. To bring that to the ServiceNow ecosystem, I founded Intellective!

Intellective is a ServiceNow partner specializing in User/Employee Experience development on the NOW Platform. If you are a user in the ServiceNow ecosystem, you have definitely used something we have built. We help customers extract the most ROI in their ServiceNow investment while bringing WOW on NOW.

If you need help with your ServiceNow Development, feel free to reach out by tagging @serviceportalpro