SVG – Scalable Vector Graphics is most suitable for the Responsive page as it can be scaled high and keeping almost same Quality and that is the Reason these images suit the New UCI Responsive page. 

Below are some advantage for Using SVG

• SVG images can be created and edited with any text editor
• SVG images can be searched, indexed, scripted, and compressed
• SVG images are scalable
• SVG images can be printed with high quality at any resolution
• SVG images are zoomable
• SVG graphics do NOT lose any quality if they are zoomed or resized
• SVG is an open standard
• SVG files are pure XML

What are the changes we need to do

1. No change required for OOB system buttons when Transition happens it automatic updates
2. For Custom Button and Icon we need to Add SVG image in MorderImage Property from Ribbon workBench and we can keep Image 16 and image 32 if you want but it recommended we change them too.

So now we have 3 Properties control

1. Image 16 for 16*16 png or jpg image and used in classic Legacy WebClient
2. Image 32 for 32*32 png or jpg image and used in Classic Legacy WebClient
3. ModernImage SVG format independent of Resolution used in New UCI

Below are the steps to add SVG image in Modern Image

1. Create a New Web Resource with type as Vector Format (SVG) and Upload image

   

2. Now Open Ribbon WorkBench, If not installed install it from here
3. If button properties are disabled. right-click a select Customise button

   

4. Publish the Ribbon and we can now see the correct image in our Button at UCI.