Local SVG definitions

Description

Specify any local SVG image definitions you want to include in this component.

Preview SVG Icons 

If you add some SVG to the 'Import SVG definition' page then you can then preview that SVG by pressing the 'Preview SVG Icons' button. The icon will be displayed in a SVG Icon dialog. You can alter the fill color and stroke color of the Icon on the page but any changes you make here will NOT be saved.

Import SVG definition 

The Import SVG definition button allows you to paste SVG directly into an Import SVG Definition dialog. You can also click 'Insert sample' to add some sample SVG that generates a headphone icon. The definition will need an Icon name. When you click OK the SVG should appear in the SVG Text dialog.

Import folder of SVG files 

This option allows you to import a folder full of SVG icons.

On Creating and Altering SVG files 

There exists a range of software that can help in creating scalable vector graphics, like Inkscape.

The color of SVG icons is typically controlled by two properties of the SVG: fill and stroke. These properties can either be set by attributes in the SVG or by properties in a style attribute. For example:

fill="red"
style="fill:red;"
If the fill color for an SVG icon is not explicitly set, it defaults to black. If the stroke color for an SVG icon is not explicitly set, it defaults to none.

It is common to dynamically change the color of an SVG icon when it is used by setting the fill color or the stroke color on the SVG. For example, you might define the icon for a button using the following setting:

svgIcon=#Iconwrench:24{ fill: red; stroke: blue;}

The intention here is to display the with a red fill color and a blue stroke color. You can only dynamically control the fill and stroke color of an SVG icon (as shown in the above syntax) if the fill and stroke color in the SVG definition are set to 'inherit'. If the fill and stroke color in the SVG definition are set to explicit values, then you will not be able to override these values when you use the SVG icon.

Therefore, after you import SVG you might want to perform a Search and Replace operation to change the fill and stroke color on the SVG to 'inherit' so that you can dynamically set these colors when you use the SVG icons.

Import a SVG Icon and Add it to a Button Control 

  1. In the UX Builder on the UX Controls open the 'Other Controls' menu. Click on the [Button] option to add a button control to the component.

  2. Open the UX Properties page and scroll down to the CSS/SVG section. Click the [...] button next to the 'Local SVG definitions' property

  3. Click the 'Import SVG definition' button.

  4. Click the 'Insert sample' button and enter a name like 'myIcon' into the 'Icon name' textbox. Click OK.

  5. Click the 'Preview SVG Icons' to see the SVG icon.

    If you change the fill or stroke color on the preview page it will change the color of the icon on the preview page but will have no effect on the fill color or stroke color of the SVG icon when it is actually loaded into the control. These aspects of the SVG icon can either be added to the svg inline or defined on the UX Controls page when the SVG icon is assigned to a particular control and instance of that control.
  6. Click OK and OK again to return to the UX Properties page.

  7. Open the UX Controls page again and highlight the button control you defined.

  8. In the properties list on the right click the drop-down next to the 'Advanced button control type' property, in the Button Properties section, and select 'Image'.

  9. In the Image Appearance section click the [...] button next to the 'Image name' property.

  10. Choose the 'SVG' radio button and then click 'Select'.

  11. In the 'SVG Icon' dialog scroll to the bottom of the icons list. Highlight the icon you defined in the 'Local SVG Icons' section and click OK. Click OK again to return to the UX controls page.

  12. Click the [...] button next to the 'Hover image name' property.

  13. Again select the 'SVG Icon' option and click Select.

  14. In the 'Local SVG Icons' section select the icon you defined.

  15. Click the arrow next to the 'Fill color' control in the top right corner of the SVG Icon dialog. Select a new fill color.

    When you set the fill color and stroke color in this case you will see all of the icons on the page turn to the color that was selected. This will not affect the final result when you run the actual application because you are defining only a instance for the SVG icon and only on this particular button control.
  16. Click the arrow next to the 'Stroke color' control and select a new stroke color for the icon. Then click OK and OK again to return to the UX Controls page.

  17. Click the [...] button next to the 'Pressed image name' property.

  18. Select the SVG option and click 'Select'.

  19. Highlight the same icon and change the 'Fill color' and 'Stroke color' to something new. Click OK and OK again.

  20. Run the component in Live Preview. You should see the SVG Icon that you imported (sampled) appear on a button.

  21. Hover over the button and the color should change to match the color instance you defined.

  22. Click on the button and you should see the color change again.