In AX-3.8, you can easily create a scalable image using an SVG image in a Picture widget with the scale property set to Fit.
Prerequisites:
- Target platform is running NiagaraAX-3.8
- A recent HTML5 compliant browser (issued 2011 or later), for example: FireFox, Chrome, Opera, IE (v.10 or later) and Safari.
- svgBatik module (
svgBatik.jar) must be in the !modules folder.
- SVG images must be created outside of Workbench, using vector graphic software, and copied to the station file system
SVG images are "vector graphic" images. You can certainly save images in other graphic formats, such as BMP, GIF, PNG, etc.,
as SVG images. However, it is important to realize that if those images are not a vector graphics format to begin with, the
image quality will degrade when scaled.
NOTE: Interactive features of SVG images, such as embedded Javascript-based animations, are not supported.
- In the Nav tree, right-click a component and select to create a new Px view.
- In the Palette sidebar, open the bajaui palette and expand the Widgets folder.
- Drag the Picture widget to the Px Editor canvas.
- Double-click the Picture widget to display the Properties dialog box.
- Click the File Chooser icon to the right of the
image property field and browse to select your SVG image and click OK.
- Set the
scale property to Fit and click OK.
- In the Px view, click and drag a corner of the widget to resize it smaller and/or larger.
The Picture widget scales perfectly without degrading the graphic quality.