Index | Prev | Next

About SVG support

The Workbench supports SVG (Scalable Vector Graphics) rendering. With the svgBatik module installed, you can use SVG images in your Px pages just as you would use a GIF, PNG, or JPG image.

SVG images are supported as:

  • the image and background properties of a Label or Button
  • the image property of a Picture
  • the background property of a CanvasPane 

The benefit of using an SVG image is that you can scale it up to a larger size without the image quality degrading, becoming pixelated, as happens with other image formats. Also, large SVG images scale down in size, to fit mobile device displays, retaining image quality and legibility. In order to provide this scaling functionality, a new widget called a Picture has been added to the bajaui palette. You can create a Picture by a number of methods:

  • by dragging it from the bajaui palette
  • by dragging an image file from the Nav tree
  • or through the right-click menu

A Picture has a scaleMode property that you can use to stretch and skew an image to fit within the Picture widget’s borders. A Picture can be backed with any image, including JPGs and PNGs, but to get the most benefit out of Picture scaling, SVGs are recommended.

 NOTE: Labels, Buttons, and CanvasPanes support SVG display, but not scaling. These widgets will only display the SVG at its original size. 

Related Links

  • About SVG rendering
  • Browser compatible SVG images
  • Px graphics reference (Parent Topic)

    • Related Tasks

  • Creating a scalable image using the Picture widget

    • Index | Prev | Next