SVG: Difference between revisions
(various cleanup) |
(→Tools: mention SVG-edit) |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 4: | Line 4: | ||
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. |
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''). |
(There is also a .svgz gzip-compressed format that some SVG readers will automagically unpack ''unclear if [[Browse]] does this for local files''). |
||
JavaScript in an HTML page or within the SVG file itself can manipulate an SVG drawing, allowing interactive diagrams in [[Browse]]; see [[#Resources]] below for examples. |
|||
== 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. |
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. |
||
| Line 15: | Line 19: | ||
More info can be found in [[wikipedia:SVG]]. |
More info can be found in [[wikipedia:SVG]]. |
||
==Tools== |
==Tools== |
||
;SVG-edit |
|||
:This web-based SVG editor runs entirely in any modern browser, including Browse. http://code.google.com/p/svg-edit/ |
|||
;Inkscape |
;Inkscape |
||
:This is an [http://www.inkscape.org/ 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. |
:This is an [http://www.inkscape.org/ 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 |
;Flash converter |
||
:If you have artwork in Flash format, you can convert it to SVG using this [http://www.eprg.org/~sgp/swf2svg.html online converter] or [http://www.titan.napier.ac.uk/~05011301/ this tool] whose source is available from the ''Files'' tab in the documentation. |
:If you have artwork in Flash format, you can convert it to SVG using this [http://www.eprg.org/~sgp/swf2svg.html online converter] or [http://www.titan.napier.ac.uk/~05011301/ this tool] whose source is available from the ''Files'' tab in the documentation. |
||
== Other programs that can output SVG == |
== Other programs that can output SVG == |
||
;chemtool |
;chemtool |
||
| Line 47: | Line 54: | ||
Many of the images on Wikipedia were uploaded to Wikimedia commons as SVG files. |
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. |
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. |
|||
== Resources == |
== Resources == |
||
* [http://developer.mozilla.org/en/SVG_in_Firefox SVG in Firefox] |
|||
* [http://jwatt.org/svg/authoring/ SVG authoring guidelines] |
|||
* [[FindTheCountry]] interactive game in SVG |
* [[FindTheCountry]] interactive game in SVG |
||
* http://www.carto.net/papers/svg/samples/canvas.shtml is code to show/hide map layers. |
* http://www.carto.net/papers/svg/samples/canvas.shtml is code to show/hide map layers. |
||
Latest revision as of 05:40, 22 September 2009
- See Resources for presentations and other media for some of the SVG files on our wiki.
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).
JavaScript in an HTML page or within the SVG file itself can manipulate an SVG drawing, allowing interactive diagrams in Browse; see #Resources below for examples.
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.
- 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.
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.
Tools
- SVG-edit
- This web-based SVG editor runs entirely in any modern browser, including Browse. http://code.google.com/p/svg-edit/
- 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.
Resources
- FindTheCountry interactive game in SVG
- http://www.carto.net/papers/svg/samples/canvas.shtml is code to show/hide map layers.