These are cases where your UI doesn't care what the resource elements look like -- it just has to be able to draw them.
Of course, you can always create art for a poker deck (or whatever) and embed it directly in your SVG file. However, it is easier to use an existing resource. Furthermore, you can set up your UI to allow a player-chosen resource. Players like this, since they may have a favorite Tarot deck that they want to use in many games.
If a resource is available on the Web, you can link directly to it.
<use xlink:href="http://example.com/poker/deck.svg#ace_hearts">
This loads the given URL (
To learn what elements are defined in an SVG file, you will have to either read through it, or find documentation for it. (But see "resource rulesets", below.)
If you link to an external resource, the player's client will have to load the data across the network. This can be slow, and it also suffers from the risk that the resource will be deleted or unavailable.
Therefore, you will more likely want to download the resource and put it into your UI bundle. Once you do this, you can use a
The real fun is setting up your UI file to permit the player to choose a resource. You will still have to define a default (internal) resource, since not all players will have a preference set.
To make this work, you need magic in your SVG file's header:
The two magical lines go inside square brackets at the end of the <!DOCTYPE> tag.
The
The
The
(The resource URI is analogous to the game ruleset URI, which abstractly identifies a game.
When your UI is loaded, the client looks through the player's preferences to see if he's set one which matches your URI. (From the player's point of view, he's browsed the web to find his favorite poker deck, which he wants to use in all Volity card games.) If the player hasn't expressed a preference, the client goes with your default -- in this example,
To load elements from the chosen deck, just do this:
Your script code can call one of the
In SVG 1.1, a script in a resource file (that is, a file referred to by a
In SVG 1.2, a script in a resource file is executed. However, it is executed after the main file's
The upshot of this is: do not put scripts in resource files. They will not be run in any reliable or useful way.
Batik seems to apply CSS stylesheets inconsistently in resource files. A
The upshot of this is: do not put stylesheets in resource files either.
http://example.com/poker/deck.svg) and loads the element with id="svg.html" class=wikipagelink>SVG.)
Using an Internal Resource
<use> tag with a relative URL:
<use xlink:href="deck.svg#ace_hearts">
Using a Player-Choosable Resource
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY % deckdef SYSTEM "volresp://resource/deck.svg?http://volity.org/resources/poker#deck">
%deckdef;
]>
deck.svg part of the header refers to the internal resource you have placed in your UI bundle.
#deck part names an XML entity which will be defined.
http://volity.org/resources/poker part is a resource URI. It does not refer to an SVG file on the web. Rather, it's an abstract identifier for the kind of resource you want to load.
http://volity.org/games/eights is a URI identifying the game of Crazy Eights; http://volity.org/resources/poker is a URI identifying the notion of a poker deck, which you can play Crazy Eights and many other games with.)
deck.svg.
<use xlink:href="&deck;#ace_hearts">
Reading Metadata from a Player-Chosen Resource
metadata.get functions to extract metadata from a resource file. See the metadata section of the ECMAScript API.
Scripting in Resources
<use> element) is not executed at all.
<use> statements are evaluated. So you cannot write resource script code that sets up or modifies the elements to be <use>'d. Furthermore -- at least in Batik -- a resource script file is executed only if the main SVG file is SVG 1.2. You cannot ensure that your script will run just by making your resource file a 1.2 file.
Stylesheets in Resources
<use> element will use the resource file's stylesheet initially, but if you make any DOM changes to the <use> element, it is re-evaluated with the main file's stylesheet.
