66 entries tagged svg

I want my, I want my SVG

As noted below, I have been experimenting with SVG. So far I have been forced to borrow Jeremy’s NT box because I cannot get any of the Linux-based SVG viewers to work. Mozilla with SVG (Alex Fritze’s build #6, based on Mozilla 0.9.3) cannot run on my RedHat-6.1-based desktop, because I lack some libraries. I have downloaded Mozilla+SVG for Windows NT, which annoyingly does not display (1) the examples in the W3C recommendation for SVG, (2) the SVG test suite, (3) Adobe’s SVG samples, or (4) my hand-written SVG files. I’m not even going to try to install any of the Java-based SVG viewers until I have thoroughly upgraded my Linux box. Sodipodi sounds attractive, but again I need more libraries. (I understand Debian GNU/Linux’s package manager will automatically acquire missing dependencies—is this true?) So for now I will have to do my cross-platform development on a borrowed Windows NT box...

Quiz: How tall are you?

A new on-line quiz for all you people out there: How tall are you? I have added Javascript code to the page so that it works out the answer for you (if you have Javascript disabled in your browser you should still be able to read the page, you just won’t get any help counting your answers). I have also taken the liberty of decorating the page with SVG doodles. This may or may not give your browser conniptions...:-)

SVG notes. I have tested it on Mozilla on Linux sans SVG; the fall-back PNG images display correctly. MSIE 4.0 on Windows NT with Adobe SVG plug-in 3.0 displays the SVG correctly—you can zoom in and view SVG in another window etc. And at work I verified (in MSIE 5½) you can print the page, in which case the pictures are rendered with the printer’s resolution, not the screen’s. Cool! MSIE/Mac 5.0 on my decrepit Performa sort of goes loopy while the SVG files download, then each doodle turns blank when you scroll the page; frobbing the the zoom or quality causes the image to redisplay. Weird.

SaVaGe Christmas Cards

Here’s a Christmas card in SVG. Don’t worry, though, I have also made a GIF version for those people who cannot view SVG yet. In this particular case, the ‘fancy’ SVG animation is 23 KB (I could have compressed it to make a 2-KB svgz file), whereas the GIF is 76 KB, and is a simpler animation (you get the blinking lights, but the SVG version also has the tree growing out of nothing an a very amusing manner). That said, the SVG animation needs more client-side CPU, and begins to get jerky on a 200-MHz Pentium-compatible NT box, so I have also supplied a simpler version (missing the background picture) in case that helps.

Alleged Tarot project

A while back I produced a minicomic (on paper) which depicted the 22 major arcana and the aces of the traditional tarot deck. I have decided to start a new project, which is to produce a colour version of this deck, to be published in SVG format. (OK, I will also include versions of the images in good old-fashioned PNG for the sake of people with older browsers.) When I have a complete deck I intend to make some sort of automated generator of readings.

So far the Alleged Tarot 2002 has two cards drawn: the Fool (number 0) and the Magician (number I).

Alleged Tarot (2)

Still tweaking the first two entries in the Alleged Tarot 2002: I am still having trouble with my crude tools, which consist of an obsolete version of Adobe® Illustrator (on Mac OS 9), a free Python-based sketch program called Sketch (which can output in a near-SVG format, but which has trouble converting Illustrator’s CMYK colours), and a script for fixing up the namespaces in SVG files...

SVG fonts; SVG Problems

I have created proper card mock-ups of my two Alleged Tarot 2002—adding the title of the card in a font I have cobbled together for the occasion. The SVG format allows for the creation of fonts using SVG primitives, and just this once I have elected to write a font by entering the numbers by hand, viewing some sample text, and changing the numbers til it looks right (yes, I know this is crazy). To do this I an using a text editor on Jeremy’s NT box, displaying the SVG in MSIE with Adobe’s plug-in. It works so long as I include the font definition in the same SVG file; my attempts to use indirect @font-face definitions (so the font data can be in one file shared by all the SVG files) have so far failed. Also, after repeated reloads of slightly broken SVG files, the plug-in eventually crashes and takes MSIE with it.

I also discovered a strange anomaly when using the image element to include one SVG file in another: it all worked OK while I was viewing SVG in files (file://... URLs), but when the same images were installed on my test server, the referenced image vanished! Worse, after I had tried viewing them from the web server, the same problem manifested when I viewed the corresponding files on disc. After closing MSIE and restarting it I was able to view the files again. The workaround for this problem is to not use images indirectly, and instead to copy the referenced SVG direct in to the referring image. At some point I will make a script for doing this automatically...

I have tried viewing these images with Mozilla 0.9.7 with SVG. The simple images are partially displayed, but the viewBox attribute is ignored; as a result you see only the top-left corner of the image! Also, the colours are all replaced with shades of blue and magenta. The fancy versions with the title displayed in my special font do not display at all.

Alleged Tarot: Aces

I have added the four Aces to the Tarot project. I have also hand-corrected the colours in the SVG files (to adjust for the oversimplified CMYK-to-RGB conversion). Because I have not yet defined some letters in the title font, there are some blanks in the titles on the cards...

Alleged Tarot (4): The deuces

The fourth installment of this work in progress is the Twos of Wands, Cups, Swords , and Coins. For a while I have been debating whether the ‘pips’ cards should be decorated or not I happen to prefer the graphic purity of having the pips alone on a white card, like old eighteenth-century playing cards, but you don’t have to read much about Tarot to know thjat undecorated Minor Arcana are not rated highly. In the end I have compromised: the SVG version has a little blue button which you can click on to toggle the decorations on and off!

Alleged Tarot (5): Emperor and Pope

In the latest installment of the Alleged Tarot 2002 I have decided to try to reward people visiting in SVG by adding a couple of pointless details to the Emperor and the Pope that cannot be seen without zooming in!

As I work on the cards I am also doing little bits of scripting to automate the repetative parts of the process of taking the picture I produce in Adobe Illustrator and turning it in to a complete card image (basically the additon of the card border, the keywords, and the title in the custom font). The Pope is assembled automatically; the Emperor I did by hand. The main thing missing is an automated colour correction step; until I manage that, the Pope’s lawn is a bit garish....

Alleged Tarot (Week 6): 3333

This week’s instalment of my on-line tarot deck is the four Threes: Wands, Cups, Swords, Coins. This week also sees a behind-the-scenes change to the way I convert the simple images in to the complete cards. Up until now I edited the fancy image file by hand in a text editor using cut & paste. Now I have a Tcl script that does this step automatically. The idea is that I spend more of my time drawing and less of it fiddling with the SVG code!

SVG interaction sans Javascript

In my SVG tarot deck, I could not decide between drawing the pips cards plain or with pictures on, so I added a button to toggle the picture on and off. People using Adobe’s SVG plug-in version 2 have reported problems with the Javascript—something about its not understanding getElementById. I did not want to start getting in to an endless struggle to remain compatible with what is after all an obsolete browser (version 3 is available gratis from Adobe); I have enough compatibility nightmares with HTML on Netscape Navigator 4. But it occurred to me to try to instead use SVG’s built-in animation features, so that I was not using Javascript at all. I hope that I can thereby avoid causing trouble on older SVG viewers, since they presumably will simply ignore the animation elements.

More on SVG’s intrinsic animations (XML.com).

Alleged Tarot (10): A bunch of fives

This week’s installment of my ongoing tarot-deck project features the fives our all four suits: Wands, Cups, Swords, and Coins. As it turns out, three of the four use the brush tool from Adobe Illustrator, a relative new addition to the intentionally limited repertoire I have allowed myself in this project. (Mostly I use the freehand tool to draw the heavy outlines, and then colour them in using coloured shapes made using the pen tool. I use the brush for coloured shapes in the background like the painting in the Four of Wands, and backgrounds in the Fives of Wands, Coins and Swords this week.) Live and learn, eh?

Tonight I discovered that my web site was full—I have reached my 20 Mbyte quota! As a stop-gap measure, I have made format changes to my tarot sections. First, I have removed the ‘simplified’ SVG versions; your choice is now simply SVG vs. PNG. If you have a burning need for the font-free versions (this being the major difference), let me know and I will see if anything can be arranged. Second, I have switched to compressed SVG (.svgz). This format is identical to SVG, except that it is compressed with ZIP (the format used by GNU zip and by PKZIP). This SVG variant is understood by Adobe’s viewer plug-in (versions 2.0 and 3.0), Batik, and, I hope, other viewers as well. Since the reduction in size is typically from 69 K to 16 K bytes, I don’t think I can afford to ignore this option. Again, please let me know if this ruins your enjoyment of the graphics.

Three SVG Articles on XML.com

The three headline articles on XML.com all concern SVG: The Visual Display of Quantitative XML (Fabio Arciniegas A.) transforms data using XSLT (and uses JavaScript for interaction that I have shown can be done with intrinsic animation); Server-Side SVG (J. David Eisenberg) describes using Java with Batik to serve SVG graphics, with fall-back to JPEG or PNG should the user’s browser not support SVG; Doing that Drag Thang (Antoine Quint) gives a system for making draggable objects in SVG (using EcmaScript); this is the second in his series, which starts with Digging Animation, where he compares SVG with SWF (Macromedia Flash) and shows how to suplicate a simple interactive animation.

Alleged Tarot (11): Wheel of Fortune and Strength

The latest installment of my on-going project to create a virtual tarot deck consists of two more trumps: X. The Wheel of Fortune, and XI. Strength. I flirted with using the older name (Fortitude) for the latter, but in the end Strength is such a stronger title, even if it is a little misleading.

The Wheel is probably the most complex image to date—especially in the SVG version, which has details that are lost in the raster version (the Ace of Diamonds card tucked in to Fortune’s hat-band, and the labels on the Wheel). Strength was tricky in a different way—it took me a few tries until I could get the lion to look more or less right.

It turns out that the title of The Wheel of Fortune is a little long for the way I have designed the cards, annoyingly. On the other hand it is time for bed, so I shup upload a corrected version later in the week.

Alleged Tarot (11a)

I have redesigned the layout of the cards so that the titles are on the left side rather than the right—and this way they read up from the bottom of the card rather than from some point part-way down. This means I can fit in the Wheel of Fortune without the rest of them looking lop-sided. Also, I have decided that the titles will no longer overlap the artwork.

I have also fixed a few bugs—the Ace of Coins had not had its colours adjusted after the CMYKRGB translation; Five of Coins had changed the figure’s hair from pink to white; The Chariot was cropped wrongly.

To explain the colour issue: I am using an old version of Adobe Illustrator which does not seem to have an RGB option. To convert to SVG I use a freeware drawing program called Sketch, which is happy to translate CMYK to RGB, but does not take account of the fact that Adobe’s screen display simulates the printed paper, rather than showing mathematically correct CMYK colours. My brute-force solution to this is to cobble together a Python script that takes as inputs Adobe Illustrator’s Targa image and a screen shot of the ‘bad’ SVG, and examines them pixel-by-pixel to generate a map from the ‘bad’ colour space to the correct one. It then generates a new SVG file with the adjusted colours. Sounds complicated? I’m hoping the new version of Sketch will make it unnecessary...

Alleged Tarot (12): All the sixes

This week my on-going on-line tarot deck reaches the sixes: Wands, Cups, Swords, and Coins. Alas! the font I am using for the titles is missing the letter x, so there is a blank square for now. I will fix this when I have a free evening—I spent most of this evening finishing off the drawings themselves. Far too tired to do it now. I also need to see if I can think of a better way to combine the pips with the drawings, since the pips are now obscuring most of the artwork...

Update: I have added x to my title font, after covering excessive quantities of paper with mathematical workings as I try to reconstruct enough of my geometrical and trigonometrical knowledge to calculate the intersections of all the lines...

Update: I have added an animation to the pips so that when you click the button to show the interpretation, the pips shrink and shuffle out of the way!

PocketSVG! etc.

The CSIRO in Australia have an SVG Toolkit for PocketPC. Yahoo have a Group for SVG Developers, but so far I have failed to register with Yahoo (their clever on-line forms fail on Opera/Linux 5). This leaves me forced to subscribe to the mailing list, which (given I hardly ever find time to read may email at home) is likely to flood my inbox to little effect. Oh, well. There is also the SVG Wiki, where the distilled wisdom of the mailing list is already emerging.

Alleged Tarot (13): Lucky for some

This is the thirteenth installment of my tarot project. Naturally this means an appearance of the famousest tarot card, XIII. Death, as well as the card that seems most mysterious to most people: XII. The Hanged Man.

This installment also represents the appoximate half-way point in the project—fourteen out of 22 trumps and 24 out of 56 of the minor arcana (38 out of 78 total). By way of celebration, I have rearranged the descriptive pages a little and expanded on the technical info.

Allegd Tarot (14): 7 seventy-seven 7

The virtual tarot deck continues with all the sevens (Wands, Cups, Swords, and Coins). For some reason these have been the toughest cards so far—the concepts they embody proved elusive when it comes to devising a stick-figure illustration. Luckily for ’their’ weekend I have had an extra day or so in which to draw them (because it is the Easter break).

I have also tweaked the navigation between the pages for pips cards—each now has links at the bottom to the same number in the other three suits.

SVG: embed or object?

I have been forced to post a response to a page in SVGWiki, because my attempts to enter a response using the Wiki page itself have failed with a VBScript error. I also have to say that while I think the Wiki concept of universal editorship is great, its reliance on its own quirky syntax is a little annoying. (On the other hand, HTML is not as amenable to hand-editing as it might be. This is a result of its being based on the splendidly verbose SGML syntax.)

Update (8 May 2002). I have updated SVGWiki—after connecting to it with MSIE rather than Mozilla or Opera. Perhaps there is some MSIE-specific JavaScript code involved?

Update (14 February 2004). My note on the object tag has been updated to reflect the fact that Safari 1.0 (released 2003) cannot handle objects containing embed.

Alleged Tarot (17): Tower and Star

This week’s installment of the Alleged Tarot project is two more trumps: XVI. The Tower and XVII. The Star. That makes for quite a contrast—the Tower represents sudden, disruptive change, the Star peace and tranquility. At the same time, both have origins in ancient Babylon: the Star is related to the Babylonian goddess Ishtar, and the Tower is obviously an allusion to the Tower of Babel, a story from that early part of the Bible that is rooted in pre-Judeo-Christian mythology.

Alleged Tarot (19): Moon and Sun

This week’s installment of my on-line tarot deck is two more of the trumps: XVIII. The Moon and XVIIII. The Sun. The Moon proved a little tricky, not just because of the number of weird symbols that need to be included, but also because I used a lot of CMYK colours with nonzero black (K) components. It seems that this (or some other property of the colours I picked) caused Sketch’s screen colours to differ from the numbers written in to the SVG file, which broke my automatic palette-adjustment program. I had to edit several colour entries by hand...

¶ Perhaps you are wondering why I have numbered the Sun XVIIII rather than the more conventional XIX. There is method to this madness. For one thing, the form VIIII did once upon a time exist, until the more concise form IX gained popularity. Using the longer forms has the interesting side-effect that the Roman numerals up to XXXXVIIII can be sorted alphabetically (I comes before V, V before VI, VIIII before X, and so on). The theory was that this would make the file names for the trumps neatly sort in to the correct order in directory listings (because I use names like iii-empress and xviiii-sun). That works if hyphens are considered to precede letters in the alphabetical sequence (as they do in ASCII). It turns out that Microsoft Windows NT has other ideas—it sorts punctuation characters after letters, which totally undoes my clever trick.

Alleged Tarot (20): Four Tens

This week’s entry in the tarot project is the four Tens: Wands, Cups, Swords, and Coins. Talk about being overcommitted. This set is being uploaded a few hours late, on account of I added some fancy animation to the Ten of Swords card (as with the other animations, this is trigged by pressing the small blue button at the bottom of the card—and uses SVG’s intrinsic SMIL-based animation). Hope this works on whatever SVG viewer you are using...

Alleged Tarot (22): The court of Wands

After a one-week hiatus, we are in to the last chapter of my on-line tarot project: the court cards. This week’s installment is the court cards for the suit of Wands: Page, Knight, Queen, and King. As you can see, I have stuck with the old-fashioned names, consistent with the use of mediaeval names for other cards like The Pope. For no particular reason I have given the King and Queen chairs by Charles Rennie Mackintosh (the tall, narrow shapes are suggestive of Wands, I thought). Whether I can follow through with the other courts remains to be seen...

Two things are missing however: the font for titles has no K and no Q. I shall implement thos as soon as I have another evening free...

Alleged Tarot (23): Court of Cups

This week’s installment of the on-going tarot deck project is the last four cards in the suit of Cups: Page, Knight, Queen, and King. As with the Ace, the cup is represented as a china tea-cup with a heart on the side (to remind us of that the suit of Cups corresponds to the modern suit of Hearts). Again I have illustrated the King and Queen seated on famous designer chairs—this time round, organic shapes by Arne Jacobsen and Eero Aarnio. There is an extra cup hidden in one of the cards for SVG enthusiasts to discover....

Alleged Tarot (25): The Court of Coins

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.

SVG slideshow, attempt 1

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.

Mozilla doesn’t do SVG yet

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).

SVG index attempt 2

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?

SVG-powered index page attempt 3

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.

Alleged Tarot: SVG index

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!

No text-transform in SVG

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.

Wordsworth London Bicentennial

Today is the 200th anniversary of Wordsworth’s ode to London (luckily he could not afford to ride inside the coach, so got a view worth writing about...).

It is also the 101st anniversary of the raising of the flag of the then shiny-new Australian commonwealth (3 September 1901). As it happens, when it came to making up quizzes for some testing software at work, I whimsically chose the Australian flag as a topic, which meant I ended up drawing my own. The one up at the top right there is the 1901 edition; it is largely similar to the current National flag—can you spot the differences? (See also my entry for 31 May.)

Alleged Tarot brush-up

I have been tweaking the formatting of the Alleged Tarot section of my site. Apart from replacing the style sheet, thus giving it a completely different appearance, I have also divided the pages in to SVG and PNG sections. Before this, the index pages for the different formats were mixed up together on the introductory page. Read more

Alleged Tarot brush-up (3)

The SVG-powered simulated deal now works on Safari. In the end I achieved this by using the special attribute that signals to Adobe that it should use its own JavaScript engine, not its host’s (in this case, Safari’s). I have also belatedly switched the script to using document.URL to find its URL rather than the HTML-style location.search (which fails on Safari as well). Read more

Website tweaks

I've started a gradual redesgin of my personal webspace. Anyone who actually visits the page will have noticed I added a background pattern taken from Squidfingers.com. I am in the process of revamping the links to other stuff I do on-line. Read more

Migrating my website workspace, part 1

My website is maintained by a rather complex amalgamation of software, accreted over generations. Having migrated it from my old desktop lickity to my new(ish) PowerBook Ariel, I now want to migrate it again to my new server Tranq (a Tranquil PC T2); this will allow me to use cron to keep some parts up-to-date automatically. Read more

SVG works with FireFox 1.0 on Mac OS X

More than once I have moaned about the lack of useful SVG support in Mozilla browsers such as FireFox. I installed FireFox 1.0 on my PowerBook this morning, and when I visited my front page I was surprised and delighted to see that the SVG graphics are being displayed! Read more

More on Firefox SVG

Since I wrote my 'First Impressions of Firefox 1.5B1', Jeff Schiller has written a 'Guide to Deploying SVG with HTML', with some workarounds for differences between the Firefox and Adobe views of how compound documents work. He has also linked to the Compound Document Formats working group at the W3C, whose mission is to sort out some of the confusion caused by the glib assumption that we can just mix XML document formats together and Namespaces will sort it out. Read more

Flickr Badge in SVG

In October 2004 I added a Flickr 'badge' to my home page. Now that someone's asked me how this is done, I am going to explain in a reasonable about of detail how the SVG file is generated automatically from information on Flickr. Even if you don't feel a pressing need to create a SVG file celebrating your Flickr photos, the techniques described herein are fairly widely applicable if you happen to maintain your own web site. Read more

Another SVG Roadblock

It is about ten years now since the need was recognized for a standard vector-graphics language for the web; about five since Mozilla rejected Adobe's offer of a free plug-in; a couple of years since they identified SVG support as a key differentiator between Mozilla and Microsoft Internet Explorer---and every time I try to use SVG in a web page, I discover a new, show-stopping bug. Read more

SVG Tarot in Safari 4

I created the Alleged Tarot in 2002 using SVG, which I was confident at the time was the next big thing in web graphics. Seventy thousand years later, I notice that Safari 4 supports SMIL-style animations in SVG, which means that the commentary and animations I incorporated in to the card designs now work again for the first time since Adobe abandoned their SVG Viewer plug-in. Read more

Self-Curation and the Fall and Rise of SVG

I have started converting my weblog to use a new Django-based system. The old system used text files, one per entry, to generate static HTML; the new system uses the same text files as before—warts and all. Read more

Recipe for SVG to PNG with svg2png

The SVG files generated by Lineform have a viewBox attribute and no width and height attributes on the outermost svg element. This is good because it means that is necessary to get Webkit browsers (at least) to treat them as scalable (apparently the S in SVG was not enough of a hint). Alas! the svg2png utility I want to use to downgrade SVG files to PNG requires width and height attributes or it assumes nonsensical values. Here’s my silly recipe for achieving this without having two copies of every SVG file. Read more

Attic Pluck: Alleged Tarot 2002

It has taken only ten years but we now have SVG support as good as it was ten years ago using Adobe’s SVG Viewer plug-in in Netscape 4. I have decided it is about time I resurrected my 2002 project, the Alleged Tarot. Read more

Inline SVG in HTML5

In my quest to reduce the bandwidth used by my blog entries, I have reduced the user-pic from 42 KB to 6 KB using inline SVG. Read more

Plato, a Python module for plotting plates

As part of my new hobby to build a computer keyboard, I have to draw the instructions for the cutting of the plate the switches are held in (see previous post for more on what the plate is). Rather than learn how to install and use a CAD system to do this, I have written a Python module to do it for me. Read more