Working with SVG in m-Power

As you may already be aware, SVG (or Scalable Vector Graphics) is an XML based vector image format. This document will explain how you can customize your applications to include SVG images.

To start, please place your .svg image in the following location /mrcjava/mrcclasses/DATADICTIONARY/images (Replace DATADICTIONARY with your actual dictionary name).

To implement with your application, edit the source code of your application and place this code where you would like your svg to be rendered:
${SVG(“filename.svg”, “name_of_image”, “DATADICTIONARY”)}

As you can see there are 3 base (and 1 optional) parameters to include, they are:

1. Name of svg (Listed in example as filename.svg) — This file must exist in the path described above.
2. Name of image — As you are aware, your SVG document can have multiple images embedded within. Specifically, if you want to include one specific image, place the value found within your <symbol id=””> value as this parameter.
3. Represented above as DATADICTIONARY, this option allows you to references SVGs found in other Data Dictionaries. This parameter points to the specific DATADICTIONARY listed in the first step above.
4. An optional fourth parameter is available. This option allows you to apply additional CSS classes to your svg image. For instance, if you wanted to change the color of your image, you could control that with a CSS class and place the value as a fourth parameter. For example, if I wanted to apply the class of “largeBright” to my svg, my syntax would look like this:
   ${SVG(“filename.svg”, “name_of_image”, “DATADICTIONARY”,”largeBright”)}

Note: If you prefer to include the entire svg, you can leave your second parameter as an empty string, such as “”. Using my example above, that would look something like this:
${SVG(“filename.svg”, “”, “DATADICTIONARY”)}