tutorials/www/svg-images.xml - pivot - Git at Google

 <?xml version="1.0" encoding="UTF-8"?>
 <!--
 Licensed to the Apache Software Foundation (ASF) under one or more
 contributor license agreements.  See the NOTICE file distributed with
 this work for additional information regarding copyright ownership.
 The ASF licenses this file to you under the Apache License,
 Version 2.0 (the "License"); you may not use this file except in
 compliance with the License.  You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->

 <document id="svg-images">
     <properties>
         <title>SVG Images</title>
     </properties>

     <body>
         <p>
             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:
         </p>

         <application class="org.apache.pivot.wtk.ScriptApplication"
             width="640" height="480">
             <libraries>
                 <library>core</library>
                 <library>wtk</library>
                 <library>wtk-terra</library>
                 <library>tutorials</library>
             </libraries>
             <startup-properties>
                 <src>/org/apache/pivot/tutorials/labels/svg.bxml</src>
             </startup-properties>
         </application>

         <p>
             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.
         </p>

         <p>
             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.
         </p>

         <p>
             Below is the BXML source for the application:
         </p>

         <source type="xml" location="org/apache/pivot/tutorials/labels/svg.bxml">
             <![CDATA[
             <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>
             ]]>
         </source>
     </body>
 </document>
	<?xml version="1.0" encoding="UTF-8"?>
	<!--
	Licensed to the Apache Software Foundation (ASF) under one or more
	contributor license agreements. See the NOTICE file distributed with
	this work for additional information regarding copyright ownership.
	The ASF licenses this file to you under the Apache License,
	Version 2.0 (the "License"); you may not use this file except in
	compliance with the License. You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing, software
	distributed under the License is distributed on an "AS IS" BASIS,
	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	See the License for the specific language governing permissions and
	limitations under the License.
	-->

	<document id="svg-images">
	<properties>
	<title>SVG Images</title>
	</properties>

	<body>
	<p>
	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:
	</p>

	<application class="org.apache.pivot.wtk.ScriptApplication"
	width="640" height="480">
	<libraries>
	<library>core</library>
	<library>wtk</library>
	<library>wtk-terra</library>
	<library>tutorials</library>
	</libraries>
	<startup-properties>
	<src>/org/apache/pivot/tutorials/labels/svg.bxml</src>
	</startup-properties>
	</application>

	<p>
	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.
	</p>

	<p>
	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.
	</p>

	<p>
	Below is the BXML source for the application:
	</p>

	<source type="xml" location="org/apache/pivot/tutorials/labels/svg.bxml">
	<![CDATA[
	<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>
	]]>
	</source>
	</body>
	</document>