This penultimate installment in my on-going tarot project was delayed a week—but it turns out that the extra week gave me a chance to solve the problem of what famous chairs to give the Queen and King to sit on. So here they are at last: the Page, Knight, Queen, and King of Swords.
This is the final tranche of the on-going tarot project: the court cards of the suit of Coins (often called Pentacles): Page, Knight, Queen, and King. This means that I now have all 78 cards drawn—or at least a first draft thereof (there is a slight temptation to go back over some of the earlier designs). Now I have to work out what the next step is. I think I need to start with an index page designed in SVG, so that you can view the deck in SVG-only browsers like Batik.
My virtual tarot deck is published in
SVG, but the index
pages are still in
HTML,
which is a problem for people trying to visit
using an SVG-only browser like Batik. So I intend to make
an SVG-powered index page.
My first attempt
uses the SVG image tag and intrinsic animation
to switch between cards. This turns out to be unsatisfactory on
two counts. First, it works by rendering the card and then
displaying the result as if it were a raster image—on my
computer that leaves the screen blank for some seconds while the
off-screen rendring takes place. Second, the resulting image
is not interactive—you lose the feature of the pips cards
where the illustration can be switched on and off.
Added a paragraph to my Tarot section about how Mozilla does not support SVG. This is not news, exactly, but it is disapointing that there are no new development on the plug-in fiasco—apart from a succession of duplicate reports of the bug (which I have discovered is difficult to locate if you don’t memorize its number).
Still trying to come up with a clever way to offer an index to 78 images that uses pure SVG (and no HTML). This one (also linked to from this page) has the SVG for the card images embedded within itself, and uses DOM manipulation to bring them to the front. Promising?
Here’s my third attempt at a pure-SVG index page for the virtual tarot deck. Rather than trying to do it all in one page, this one more conventionally has a set of links to the cards; you must press your browser’s Back button to return to the index page. So far this prototype covers the minor arcana, and needs to be extended to cover the trumps...
This might be a good time to mention that from the HTML page, if you are using Adobe’s SVG Viewer, you can right-click on the graphic and choose View SVG to show the graphic full-size in its own window, which makes it easier to read. If you zoom in, you will see that the card images are just raster images (and look fuzzy when magnified); click on them to see the scalable SVG versions.
After several half-baked attempts, I have a working visual index page to the Alleged Tarot 2002 using SVG that uses only static SVG features (no animation or JavaScript), so hopefully should work in specialist SVG browsers that do not grok HTML, such as Batik or XSMILES. (I have not actually tried it in either of these yet.) It actually looks quite pretty, but on the Windows NT box we have here it loads worryingly slowly considering the pages are not very complicated (it does work faster on the bigger box at work).
In this case I gave the root element a viewBox
attribute but no width and height. As
a result—at least with Adobe SVG Viewer on Microsoft
Internet Explorer 5.5—the page automatically
expands to fill the browser window. Nifty!
Because my font is
all-lower-case, I tried using the text-transform
property of CSS to
convert card titles in the SVG-powered index page. This property does
not exist in SVG, which causes Batik 1.1 to balk (Adobe SVG
Viewer merely ignored it). So I have posted revised versions of
the files that hopefully will work better.
