Canvas SVG parser: Difference between revisions

Jump to navigation Jump to search

Canvas SVG parser (view source)

Revision as of 13:48, 16 July 2013

1,106 bytes removed ,  16 July 2013
Remove some old stuff...
(Remove some old stuff...)
Line 1: Line 1:
{{Template:Canvas Navigation}}
{{Template:Canvas Navigation}}


=== Background: Vector Image Support (Status 07/2012:SVG parser implemented and available) ===
=== Vector Image Support ===
'''TheTom''': I already have some experimental code for an old version of the canvas. But basically it is just mapping the xml structure to the property tree. I though have no plans to support the full SVG standard, but only a subset. Maybe we should implement this in Nasal so its easier to add suport for new SVG features if someone needs it. As there is already support for parsing xml in Nasal parsing SVG should be pretty straight forward. Just a boring programming exercise :-) But using separate canvas elements instead of a single image will always be slower as every little piece of the canvas hat to be triangulated and afterwards rendered every time the canvas gets updated instead of just copying an image. On the other hand you if you use the canvas you can dynamically update the contents of the image and also get (theoretically) unlimited resolution, even changeable at runtime.


'''TheTom''': Currently I use [http://svgconv.sourceforge.net/ svgconv] for converting SVG files to OpenVG compatible path syntax.
The SVG parser basically just maps the xml structure to the property tree. It is implemented in Nasal on top of the XML parsing facilities alread provided by FlightGear. Using separate canvas elements instead of a single image will always be slower as every little piece of the canvas hat to be triangulated and afterwards rendered every time the canvas gets updated instead of just copying an image. On the other hand you if you use the canvas you can dynamically update the contents of the image and also get (theoretically) unlimited resolution, even changeable at runtime. For SVG already existing tools (Inkscape) can be used to create images and then just load them via Nasal and add some dynamic features to them.


Regarding SVG, the advantage would be that people could use existing tools (GIMP, Inkscape) to create their images and then just "load" them via Nasal and add some dynamic features to them. Specifying all these things in Nasal would be very tedious, and this is something that most of us coders are really not too good at (i.e. artwork).
<!-- Integration-wise, there are some lessons to be learnt from the way SMIL works via SVG and ECMAScript (JavaScript). -->
 
This is not to say that all of SVG would need to be supported, but there's already code in OSG to support such image formats - and if we could find a way to leverage native OSG code to handle such things, we would gain lots of flexibility: We have LOTS of users here who are really good at using tools like GIMP or Inkscape, so if they have a way to reuse such artwork, it would be great.
 
Integration-wise, there are some lessons to be learnt from the way SMIL works via SVG and ECMAScript (JavaScript).


== Basic example ==
== Basic example ==
Line 42: Line 37:
== Supported SVG features ==
== Supported SVG features ==


The SVG file used for this demo has been created using [http://inkscape.org Inkscape]. Using paths (also with linestipple/dasharray), text, groups and cloning is supported, but don't try to use more advanced features like gradients, as the SVG parser doesn't interpret every part of the SVG standard. (You can always have a look at the [https://gitorious.org/~tomprogs/fg/toms-fgdata/blobs/canvas/Nasal/canvas/svg.nas implementation] and also improve it if you want ;-) )
The SVG file used for this demo has been created using [http://inkscape.org Inkscape]. Using paths (also with linestipple/dasharray), text, groups and cloning is supported, but don't try to use more advanced features like gradients, as the SVG parser doesn't interpret every part of the SVG standard. (You can always have a look at the [https://gitorious.org/fg/fgdata/blobs/master/Nasal/canvas/svg.nas implementation] and also improve it if you want ;-) )




TheTom
166

edits

Retrieved from "https://wiki.flightgear.org/Special:MobileDiff/61607"

Navigation menu