Designer 10.7 | webMethods Mobile Development | Creating a Mobile Project | Defining Resources for a Mobile Project | Adding Graphical Assets | Creating a Scalable Vector Graphic
 
Creating a Scalable Vector Graphic
You can define an asset that is based on a Scalable Vector Graphic (SVG).
Tip:
You can open the SVG-document of a library icon. To do so, select a library icon on the Customize a library icon page of the Asset Editor, and click on the Source tab of this page.
*To create an SVG asset
1. Do one of the following:
a. Open the Asset Editor by double-clicking an existing asset file, or right-click an existing asset file, select Open > Open With, and select Asset Editor.
b. Create a new asset file as described in Adding Graphical Assets.
2. In the Asset Editor, click Create Icon in the upper right corner.
3. On the Create a Vector Graphic page, modify the information as required:
For this field, button, or tab
You can do this
Asset Name
Enter or modify a name for the asset.
Source > Width and Height
By default, the asset is exported with a dimension of 24 x 24 dp. You can scale it to a different size by modifying the width and height value or by selecting a different asset size in Asset Size.
Source > Path
Specify the path definitions for the SVG asset. You can also load and modify an example by clicking Try an example? Click here. For more information on path definitions, see https://www.w3.org/TR/SVG/.
Source
Click to load an SVG asset that is stored on your machine.
Properties > Name
Enter a name for the path, group, etc. of your SVG asset.
Properties > Path Data
Modify the path data.
Properties > Stroke Color
Click the field, enter a Hex color code, or select a color from the list of colors defined in the application model to specify a stroke color for the graphic.
Or
Click . In the color picker, select a color from the Delite (Software AG) or Material (Android) color palette.
Properties > Fill Color
Click the field, enter a Hex color code, or select a color from the list of colors defined in the application model to specify a fill color for the graphic.
Or
Click . In the color picker, select a color from the Delite (Software AG) or Material (Android) color palette.
Properties > Opacity
Modify the opacity of the graphic.
Properties > Scale To, Translate To, Shear To
Modify the vector definitions as described in https://www.w3.org/TR/SVG/.
Asset Size
Select one of the predefined asset sizes Small Icon, 24 dp, 48 dp, Tab Icon, or Navbutton Icon.
4. Click CTRL + S to save the asset.
When saving the asset, Mobile Development automatically creates icons for every screen resolution. Those icons are located within the your_project/gen/.assets/graphics directory. Make sure to commit this directory when working with a source code management system.
Related Topics