Here’s a simple demo of using SVG to annotate an existing (raster) image. To view this you will need a web browser which groks SVG; so far I have tested it with Microsoft Internet Explorer 5 for the Mac, and MSIE 4 for Windows, using Adobe’s SVG Plug-In 3.0.
66 entries tagged 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...
A new on-line quiz for all you people out there:
How tall are you?
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.
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.
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).
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...
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
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.
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...
This week’s installment of the Alleged Tarot 2002 consists of The Papess and The Empress. I have also added half-baked commentary on the cards so far. This has not been added to the PNG versions of the pages yet; I’ll get around to that.
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!
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....
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!
This week, just in time for St Valentine’s Day, my on-going tarot deck project reaches VI. The Lovers and VII. The Chariot. The main innovation this week (don’t get too excited...) is I have added a definition for the letter ‘v’ to the font used for the card titles.
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
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
all. I hope that I can thereby avoid causing trouble
on older SVG viewers, since they presumably will simply ignore
the animation elements.
What with visiting friends and misecllaneous babies in London (not to mention the V&A, the illuminated float at the British Museum, and the newly-opened Millenium Bridge), I almost neglected to draw this week’s installment of my ongoing virtual tarot-deck project, which is two more of the trumps: VIII. Justice and VIIII. The Hermit.
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
.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.
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.
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 CMYK→RGB 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...
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!
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.
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.
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.
This week’s slightly delayed installment of my virtual tarot deck is the Eights of Wands, Cups, Swords, and Coins. This week’s main advance is behind the scenes—the algorithm used for generating the tables for mapping Sketch’s colour space to Adobe Illustrator’s so that it works better.
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 (14 February 2004).
My note on the
object tag has been updated to
reflect the fact that Safari 1.0 (released 2003) cannot handle
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.
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
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
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...
Here is the beginnings of an SVG version of Jo’s idea of an Oxford-based property-trading board game that is not as lame as the Oxford Monopoly® set. It is only just started—like the tarot deck, it will have to come in installments.
Jeepers, only a couple of weeks to COMICS 2002.
Better late than never—here is the latest installment of my virtual tarot deck: the final two trumps, XX. Judgement and XXI. The World. Since last week’s episode was the last of the pips cards, that leaves just the sixteen court cards (the Page, Knight, Queen and King of each of the four suits).
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...
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....
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
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.
In this case I gave the root element a
attribute but no
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
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.
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.)
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
SVG-powered simulated deal now works on Safari. In the
end I achieved this by using the special attribute that
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
location.search (which fails on Safari
All I want to do is print my fucking graphics files at a particular size on the fucking page. Nothing fancy. This image at this position at this size. That image at that position at that size. Read more
Good news, everyone! Mozilla now has a working SVG implementation thanks to Alex Fritze of croczilla.org. It even has suppport for plugging in platform-specific back-ends so that in principle the Mac OS X version might be able to exploit Quartz Extreme. Cool! This could mean a working SVG-enabled release of Mozilla sometime before I die of old age. Read more
I have belatedly updated my
note on using
object tags to display SVG to reflect my
tags from the Alleged Tarot because Safari cannot cope with them..
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
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.
I am still in the process of converting my website-maintaining scripts to work on Debian GNU/Linux rather than Mac OS X. Last episode left me with a conundrum as how to convert SVG files to PNG for the sake of browsers that cannot display SVG properly. Read more
On Debian GNU/Linux I am attempting to use
librsvg2 to render a
few small images (because Mozilla-based browsers cannot display SVG),
and the wrong font is being used. How do I find out how to correct this?
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
As of today, there is light at the end of the tunnel: the beta of Mozilla Firefox 1.5 not only has SVG support, said SVG support is switched on, and even works a bit. Read more
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
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
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
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
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
The SVG files generated by Lineform have a
viewBox attribute 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
height attributes or it assumes
nonsensical values. Here’s my silly recipe for achieving this without
having two copies of every SVG file.
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
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
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