Cross-Platform Authoring

From Svg wiki

This page needs to be cleaned up. [http://wiki.svg.org/
Cross-Platform_Authoring?action=edit Edit this page] to help out!

Contents

[edit]

Authoring Across Platforms

[edit]

Introduction

SVG is designed as an open graphics format that works across platforms and applications (such as browsers, authoring tools, etc.). The value of SVG has spawned a great deal of development in a race to implement SVG support in browsers ,viewers and even cell phones and other technologies.

Today the progress of the various SVG implementations has passed a tipping point where the overlap in what the various viewers already support provides enough functionality to indeed write rich cross platform SVG applications.

In this section we attempt to guide you along that narrow but ever widening path of what works XBrowser and to help you avoid the pit-falls of various non-standard vendor "extensions" in a quest to make your SVG application work in as many places as possible.

While all SVG viewers are fair game for discussion the focus here is in covering the behaviors in at least the major Web browsers, including:


Note: This page is out of date. It does not adequately cover FireFox's native implementation, and it references Corel's SVG viewer, which is defunct.

[edit]

Cross Platform SVG applications

This page is dedicated to help SVG application authors to accomplish cross-UA (User Agent) scripting.

Currently we want to mainly cover ASV3, ASV6, FireFox, Opera, CSV2.1, and Batik. Other UA's are welcome to be added.

We strongly encourage people to test their SVG applications in more SVG viewers than just the most popular SVG viewer (currently ASV3). In many cases it appears that the Adobe SVG viewer is more "forgiving" to non-standard DOM methods, than other viewers are - this behaviour encourages SVG application developers to use these non-standard DOM methods. The following guidelines should help to create SVG applications that run across multiple SVG viewers.

Note by Justin: Use Opera 9 for testing.  :) It has much more complete support for SVG (including animation!) than ASV3, Firefox 1.5, and a very useable "error console" that clearly shows the elements in the loaded SVG that it's unhappy with (with reason why). It's really helped for developing the Flame Project (SVG animation GUI) at least. And it's cross platform. :)

We also encourage people to report bugs and missing features to the implementors company or Open Source team. Often, features are implemented on customer's / user's demands.

starter document to help in creating cross-viewer content

[edit]

Use of Namespace-Aware DOM Methods

Use the ...NS(Namespace) methods instead of their corresponding non-Namespace aware versions. Please note that the "null" namespace refers to the host language Namespace (in our case SVG). If you embed SVG in another host language, you would have to exchange "null" with the SVG namespace (currently: "http://www.w3.org/2000/svg")

Currently relevant namespaces:

SVG: http://www.w3.org/2000/svg xlink: http://www.w3.org/1999/xlink

This includes the following DOM methods:

  • .getAttributeNS()

example: 

myX = myNode.getAttributeNS(null,"x");

instead of 

var myX = myNode.getAttribute("x");
  • .setAttributeNS()

example: 

myNode.setAttributeNS(null,"x","100");

instead of 

myNode.setAttribute("x","100");
  • .createElementNS()

example: 

myNewNode = svdoc.createElementNS("http://www.w3.org/2000/svg","rect");

instead of 

myNewNode = svdoc.createElement("rect");

Note:

of course you can replace "http://www.w3.org/2000/svg" with a string variable, in order to avoid retyping this long URL all the time. In Batik the use of the SVGNS is necessary, otherwise the new element will appear in the DOM-tree, but won't be rendered as a SVG element.

[edit]

Getting the target of an event

  • =event.target= in order to get target for triggering event

example: 

myElement = event.target;

instead of 

myElement = event.getTarget();
  • evt.target.ownerDocument in order to get reference to svg-document

example: 

svgdoc = evt.target.ownerDocument;

instead of 

svgdoc = evt.getTarget().getOwnerDocument();
[edit]

Currently-Known Limitations

[edit]

Currently known limitations in ASV 3

  • cursors don't work (resolved in ASV 6)
  • .getScreenCTM() does not work (resolved in ASV 6)
  • Printing causes the SVG to be distorted. Use iframe with link to your SVG.
  • commas don't work in viewBox attribute, use spaces instead
[edit]

Currently known limitations in CSV 2.1

  • If you use =.getURL()= events that are attached to newly included elements, won't work
  • gzip does not work with =.getURL()=
  • SMIL animations don't work
[edit]

Currently known limitations with Batik 1.5 / Squiggle

  • SMIL animations don't work
  • window.innerWidth and innerHeight don't work (you can use =.getScreenCTM()= for most cases)
[edit]

Related Links

SVG authoring guidelines (hints on cross-platform SVG)

Adobe SVG viewer 3, current support documentation

CSV2.1, current support documentation no longer on-line at original address.

SVG UA test suite and results

COMPATIBILITY ASV3 - ASV6beta - Squiggle 1.5 - CSV 2.1 - by Michel Hirtzler

Retrieved from "http://wiki.svg.org/Cross-Platform_Authoring"