Ba+SVG

= SVG  =

From OLPC
Scalable Vector Graphics (SVG) is a W3C standard for vector artwork or drawings as opposed to bitmap images. An SVG document is a sequence of drawing commands in plain text. When the commands are rendered by a browser or other SVG rendering app, you see the image. These sequences of drawing commands usually take up less space than a bitmap. In addition, the SVG files, being plain text, can be compressed further by tools like gzip or a [|JFFS2] filesystem. (There is also a .svgz gzip-compressed format that some SVG readers will automagically unpack //unclear if [|Browse] does this for local files//).
 * == Contents ==
 * [|1 Use SVG files]
 * [|2 Tools]
 * [|3 Other programs that can output SVG]
 * [|4 Free SVG images]
 * [|5 Mozilla SVG]
 * [|6 Resources] ||

Use SVG files
Since the OLPC has limited storage, SVG imagery is a major part of the content for the OLPC. SVG is very effective in displaying diagrammatic content on the XO. Authors of OLPC content should try to use SVG wherever possible. [|Choosing image formats] will help you to understand the differences and how to know which format will be best for the intended use. See also [|Making SVG Icons for Sugar]. More info can be found in [|wikipedia:SVG].
 * Only use bitmaps such as [|JPEG] or [|PNG] where it is not possible to use SVG.
 * Prefer SVG to PDF for single-page content images such as [|maps] . A link to an SVG file will display in [|Browse], while a PDFs must be downloaded, saved in the Journal, then launched in [|Read] . There are tools to [|convert PDFs to SVG].

Tools
Inkscape This is an [|open source drawing program] that supports much of the SVG standard. The project goal is to have complete support for SVG, XML and CSS. Extensions for Inkscape can be written in [|Python] so application developers may be able to make creative use of this in developing educational software. Flash converter If you have artwork in Flash format, you can convert it to SVG using this [|online converter] or [|this tool] whose source is available from the //Files// tab in the documentation.

Other programs that can output SVG
chemtool 2D chemical structure editor FontForge Font editor for PS, TrueType and OpenType fonts. It is also a font format converter and can convert among PostScript (ASCII & binary Type 1, some Type 3s, some Type 0s), TrueType, and OpenType (Type2), CID-keyed, SVG, CFF and multiple-master fonts. Ploticus A Script driven business graphics package potrace A utility to transform bitmaps into vector graphics RLPlot GUI based program for displaying scientific data in standard formats. Scribus Open source desktop page layout program with the aim of producing commercial grade output in PDF and Postscript. SVG vector file output is also provided. Skencil An interactive vector drawing program Xara LX   Versatile and mature piece of graphics software, tailored for web, print and publishing. Xtreme combines advanced and powerful vector illustration with integrated photo manipulation and DTP features Since other vector graphics formats can be converted to SVG, many other tools can be used. There are also clipart libraries in SVG format, including the DiaCanvas2 package for Linux, and the [|Open Clip Art Library]. Sugar activities can be given SVG capabilities with libraries such as python-qt4 (PyQt4), python-biggles and python-pychart.

Free SVG images
The people at [|freedesktop.org] have a lot (~800) of free svg's, released under gpl. To download them with the correct directory-structure, try [|this script] Many of the images on Wikipedia were uploaded to Wikimedia commons as SVG files. For example http://commons.wikimedia.org/wiki/Image:African_continent-de.svg displays as a PNG at a particular resolution, but the underlying file ( http://upload.wikimedia.org/wikipedia/commons/7/77/African_continent-de.svg at the time of writing) is a scalable SVG.

Mozilla SVG
If you provide content for the XO, it will be rendered by the Mozilla [|XULRunner] engine that the [|Browse] activity uses (unless you write your own activity). So you should create files geared towards the Mozilla interpretation of the SVG 1.1 specification. Many SVG applications and files continue to use the idiosyncracies of the Adobe SVG player, particularly when it comes to embedding SVG images in HTML.  Now that you have a basic understanding of Sugar and how to get the developer's console up, you can write a simple activity (Sugar application) and then install it to make it available on the Sugar desktop. First, you need to be root and navigate to the activities directory from the developer's console terminal window, as shown in Listing 2.  code code code [olpc@xo-12-34-56 /]$ ** su - ** code code -bash-3.1# ** cd /usr/share/activities ** code code -bash-3.1# code || If you run an ls  command in this directory, you'll see a number of directories that contain the Python source for Sugar applications. You're going to put your activity here as well, so create the two directories that are needed, as shown in Listing 3.  code code code -bash-3.1# ** mkdir TestActivity.activity ** code code -bash-3.1# ** cd TestActivity.activity ** code code -bash-3.1# ** mkdir activity ** code code -bash-3.1# ** cp ../Web.activity/setup.py. ** code code code || As part of the setup, you need a standard file called setup.py. You copy this from an existing activity, as shown above. Next, you need to create four files that are used to implement and describe an activity. The first is your activity source file, which is a Python script. This is shown in Listing 4 and is named TestActivity.py. This file will be located in the TestActivity.activity directory. This Python activity creates two methods. The first, click , is a callback function that is called when the button is clicked. The __init__  function is called when the bundle is started. This function simply creates a button using GTK and adds it to the current view.  code code code code code import logging code code from sugar.activity import activity code code import sys, os code code import gtk code code code code class TestActivity(activity.Activity): code code code code def click(self, widget, data=None): code code logging.info('Button clicked') code code code code def __init__(self, handle): code code activity.Activity.__init__(self, handle) code code code code self.button1 = gtk.Button('Button1') code code self.button1.connect("clicked", self.click, None) code code code code self.add(self,button1) code code self.button1.show code || Next, you create a manifest file called MANIFEST. It contains a single line, the source files that make up the activity (TestActivity.py). If you run an ls  command in your directory (TestActivity.activity), you see the listing output shown in Listing 5.  code code code -bash-3.1# ** ls ** code code MANIFEST TestActivity.py  activity  setup.py code code -bash-3.1# ** cat MANIFEST ** code code TestActivity.py code code -bash-3.1# code || Now you go into the activity subdirectory and add your icon and information file. The icon file defines the image that's used for the activity. It's an SVG file and is shown in Listing 6 (activity-TestActivity.svg).  code code code  code code  code code  code code ]> code code  code code  code code  code code code || Finally, you need to create an activity information file (activity.info). This file describes your activity bundle, as shown in Listing 7.  code code code [Activity] code code name = TestActivity code code service_name = com.test.TestActivity code code class = TestActivity.TestActivity code code activity-version = 1 code code icon = activity-TestActivity code code show_launcher = yes code || To check file placement, run an ls  command in the TestActivity.activity subdirectory. You should see three files and a directory at the TestActivity.activity level and two files in the activity subdirectory, as shown in Listing 8.  code code code -bash-3.1# ** ls ** code code MANIFEST TestActivity.py  activity  setup.py code code code code activity: code code activity-TestActivity.svg activity.info code || Now that your files are in place, you can build the activity bundle. For this you use the bundle builder, which is provided by the setup.py file. The following command installs and makes a distribution of the activity to share: code -bash-3.1# ** ./setup.py dev ** code code -bash-3.1# ** ./setup.py dist ** code code code || After you restart Sugar, you can use the activity on the current XO laptop. To install the .xo file (an archive file, like a Java Archive, or JAR, file), use the following command: code -bash-3.1# ** sugar-install-bundle TestActivity-0.xo ** code code code || To use the activity, go back to the Sugar desktop. You can do this by clicking the **X** in the upper right corner of the developer's console. When the Sugar desktop is visible, click the activity on the Action frame (bottom of the desktop). The icon appears as two small squares that are in a diagonal. If you place the mouse cursor over this icon, a menu bar that says TestActivity  appears. Click the icon, and you see the activity loaded into the current view of the frame (the icon is displayed in the Home frame). A short time later, the activity starts and the entire frame becomes a large GTK button. Clicking the button flashes the frame (indicating that the button was depressed). You can go to the developer's console now to look at the TestActivity log and see the message emitted by the button click. To exit the activity, place the mouse cursor in any corner of the frame. This makes the frame periphery visible again. Now go to the top of the frame, place the mouse cursor over the TestActivity icon, and a menu bar appears. Now press the item called Close  and the activity stops. This is not extremely exciting, but you can certainly go on to do a lot more interesting things with Python and GTK.
 * 1) Source for TestActivity.py