Jump to: navigation, search

Canvas SVG Parser

4,157 bytes added, 11:48, 10 December 2018
no edit summary
{{Infobox subsystem
|name = Scripted SVG parser for Canvas
|image = Canvas SVG demo.png
|alt = svg.nas at work
|description = Implements a scripted SVG parser in [[Nasal]] space for the [[Canvas]] system by mapping a subset of SVG to Canvas elements (text, OpenVG, raster images)
|status = Under active development
|maintainers = {{usr|TheTom}}
|developers = TheTom
|changelog = {{Git File History|project=fgdata|path=/Nasal/canvas/svg.nas}}
{{Template:Canvas Navigation}}
=== Vector Image Support ===
The '''scripted SVG parser ''' basically just maps the SVG xml structure to the property treeby adding corresponding Canvas elements as child nodes. It is implemented in [[Nasal ]] on top of the XML parsing facilities already provided by FlightGear/Nasal (see $FG_ROOT/Nasal/io.nas). There's a tiny Nasal module named svg.nas (see $FG_ROOT/Nasal/Canvas) that will read those SVG/XML files and convert them into Canvas nodes (OpenVG/ShivaVG paths) - in other words, depending on the nature of the differences in the output, it should be possible to patch up the svg parser to also support the new format.To make changes to that module, you need to understand how parsing works and how a stack works (the data structure).<ref> {{cite web | url = | title = <nowiki>Re: Strange thing with font mapper</nowiki> | author = <nowiki>Hooray</nowiki> | date = Mar 28th, 2016 | added = Mar 28th, 2016 | script_version = 0.25 }}</ref> * a Canvas represents an actual OpenGL texture (2D)* is hardware-accelerated* is using OSG for most of its features* there is an actual scenegraph* uses Nasal instead of ECMAScript/JavaScript A FlightGear Canvas is primarily a property tree in the main property tree, where attributes of the texture, and each element, are mapped to "listeners" (or updated via polling).Internally, this will dispatch events/notifications to the current texture/event.A Canvas in texture is an invisible offscreen rendering context (RTT/FBO) - it is made visible by adding a so called "placement" to the main FlightGear scenegraph, where the static texture will be replaced with one of the dynamic Canvas textures.A FlightGear Canvas supports events for UI purposes, so that listeners can be registered for events like "mouseover" etc.The Canvas scenegraph is a special thing, its root is always a Canvas group - each group can have an arbitrary number of children added, i.e. other elements (or other groups).The primary Canvas elements are 1) raster images, 2) osgText nodes, 3) map, 4) groups and 5) OpenVG paths.The FlightGear Canvas system does not understand SVG images - instead, it is using the OpenVG back-end to translate a subset of SVG/XML to Canvas properties by mapping those to OpenVG primitives.There are many features that are not supported by this SVG parser (svg.nas), but it is written in Nasal and can be easily extended to also support other features, e.g. support for raster images and/or nested SVG images.Apart from OpenVG, there's no lower level drawing support (think pixels).<ref>{{cite web | url = | title = <nowiki>Re: Canvas documentation</nowiki> | author = <nowiki>Hooray</nowiki> | date = Feb 27th, 2016 | added = Feb 27th, 2016 | script_version = 0.25 }}</ref> for the supported commands, refer to $FG_ROOT/Nasal/canvas/api.nas and the segments listed in the canvas.Path hash (OpenVG should support arc/circle paths, not sure if those are currently made available or not)For reference, you can look up the corresponding ShivaVG/OpenVG examples on the web, all primitives listed in api.nas should also be supported by the Canvas/ShivaVG implementation.BTW: Once you know how to draw a circle using OpenVG paths, you can also extend svg.nas to parse the &lt;circle&gt; tag<ref> {{cite web | url = | title = <nowiki>Re: Drawing a circle</nowiki> | author = <nowiki>Hooray</nowiki> | date = Mar 20th, 2016 | added = Mar 20th, 2016 | script_version = 0. 25 }}</ref> == Vector Image Support ==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.
If you find some SVG feature not working, please check the console for errors - our SVG parser is hand-written and only supports a limited subset of SVG instructions, so may need to be extended, or simply use supported inkscape primitives instead (see svg.nas). $FG_ROOT/Nasal/canvas/svg.nas is our existing example on populating a canvas procedurally by parsing an XML file.
var preview=, y:400, svg:"Nasal/canvas/map/Images/boeingND.svg");
print("SVGPreviewer loaded ...!");
== Supported SVG features ==
The SVG file used for this demo has been created using [ 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 [{{fgdata/blobs/master/source|path=Nasal/canvas/svg.nas |text=implementation] }} and also improve it if you want ;-) )
{{note|Support for SVG circle and ellipse has been added to "next" branch in 12/2018 and is expected to be officially available in release 2019.1}}
== Known Limitations ==
|Referring to the [https://{{|proj=fg/|repo=canvas-hackers-fgdata/|commit/=7d249ce9556d52fb7ae066775023087fbd4daa2f#c106578 |view=commit|text=gitorious discussion about having a styleable SVGSymbol class] }} - that is something that will be hard to support/integrate with pre-defined styling unless we patch svg.nas to accept a list of optional SVG attributes that are mapped to a transformation/rewrite-callback so that SVG attributes can be dynamically "rewritten" by the parser based on looking up a certain id (e.g. "background-color") and changing CSS stuff there.
|{{cite web |url=
|title=<nowiki>MapStructure styling</nowiki>
[[Category:Canvas SVG]]

Navigation menu