Creating a scalable image using the Picture widget
This procedure is only applicable for the external SVG image (which is not available in the kitPxN4svg palette). You can easily create a scalable image using an SVG image in a Picture widget with the scale property set to Fit.
Prerequisites:
- A recent HTML5 compliant browser , for example: FireFox, Chrome, Opera, IE and Safari.
- The svgBatik module (
svgBatik.jar) must be in the!modulesfolder. - The SVG images must be created outside of
SVG images are vector graphic images. You can certainly save BMP, GIF, PNG, etc. images as SVG images. However, if other images are not vector graphics to begin with, their quality degrades when scaled.
NOTE: Interactive features of SVG images, such as embedded Javascript-based animations, are not supported.
Perform the following steps:
- To create a new Px view, right-click a component in the Nav tree and click .
- In the Palette sidebar, open the bajaui palette and expand the Widgets folder.
- Drag a Picture widget to the Px Editor canvas.
- Double-click the Picture widget to display its Properties pane (right side of the canvas).
- Click the File Chooser icon (
) to the right of the imageproperty, browse to select an SVG image and click OK. - Set the
scaleproperty toFitand 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.