SVG Images

In addition to common bitmapped image formats such as PNG and JPEG, Pivot also supports Scalable Vector Graphic (SVG) images. For example, the following application displays an SVG image containing the Pivot logo, alongside a PNG equivalent:

The primary advantage of using SVG images rather than bitmapped images in an application is scalability (i.e. resolution independence). When a bitmapped image is scaled, it becomes pixelated and grainy, whereas a vector image does not.

To see an example, try scaling the Pivot display by clicking on the application and using the mouse wheel or pressing the +/- keys while holding down Control-Shift. The SVG image and text scale smoothly, while the PNG image quickly becomes unreadable.

Below is the BXML source for the application:

            
            <Window title="SVG Images" maximized="true"
                xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns="org.apache.pivot.wtk">
                <Border>
                    <ScrollPane horizontalScrollBarPolicy="fill_to_capacity" verticalScrollBarPolicy="fill_to_capacity">
                        <BoxPane styles="{horizontalAlignment:'center', verticalAlignment:'center'}">
                            <BoxPane orientation="vertical" styles="{horizontalAlignment:'center', spacing:10}">
                                <ImageView image="@logo.svg" preferredWidth="64" preferredHeight="64" styles="{fill:true}"/>
                                <Label text="SVG"/>
                            </BoxPane>

                            <BoxPane orientation="vertical" styles="{horizontalAlignment:'center', spacing:10}">
                                <ImageView image="@logo-64x64.png"/>
                                <Label text="PNG"/>
                            </BoxPane>
                        </BoxPane>
                    </ScrollPane>
                </Border>
            </Window>