Software: Limitation Of Using SVG Plugin

Is this a limitation of displaying content using a MSIE browser plug-in: elements can't be shared between plug-ins? For example, using MSIE + ASV, I can't seem to define elements in one SVG element, then use them in another SVG tag. What I wanted to do was to define some SVG elements, then use a XHTML table to lay them out in a grid:

<svg>
  <defs>
    <g id="myElement"> … </g>
  </defs>
</svg>

<table>
  <tr>
    <td>
      <svg>
        <use href="xlink:#myElement" > … </g>
      </svg>
    </td>
    <td>
      <svg>
        <use href="xlink:#myElement" > … </g>
      </svg>
    </td>
  </tr>
</table>

While Firefox 1.5 can display my SVG elements in a table, MSIE + ASV shows nothing.

Software: 2xExplorer Remove Search Results

Nikos Bozinis' 2xExplorer (a Windows Explorer replacement) has a neat but not so obvious feature. When you search for all files or folders with a certain pattern, 2xEplorer will display the search results window. Selecting an item in that window will cause the main window to jump to that item in your filesystem. The not-so-obvious feature is that when you delete items in the search results window, those items are deleted in your filesystem! This feature came in handy when I wanted to delete all CVS folders (to set up a new module) or all obj folders (to work around a Visual Studio bug).

Software: Basic SVG Shapes and Javascript

Once I realised that I can reference SVG objects in Javascript by using object = document.getElementById(), it became a straightforward task to change any attribute of an SVG object using object.setAttribute(). I added a control panel to my Basic SVG page, which I started last weekend, to interactively set the attributes of the SVG objects on that page. Now, I can immediately see the effects of setting different values to fill, fill-opacity, fill-rule, stroke, stroke-linecap, stroke-dasharray, stroke-linejoin, stroke-opacity, stroke-width.

Software: Basic Inline SVG At Last!

It seemed like such a simple task: put some SVG code into an XHTML document on my hobby web site. I managed to do it but it required jumping through several hoops. The best source of information on inline SVG can be found in this Wiki article. Here's some extra gotchas that I found while developing this simple page. Note that I'm using Firefox 1.5, IE6.0, ASV 3.03 and Windows XP Professional SP2.

Create your XHTML + SVG document

Follow the Wiki article and create an XHTML document (one with DOCTYPE and the required namespaces) and insert your SVG fragment with its own namespace. Save your file with a .xhtml extension.

The .xhtml extension is required otherwise Firefox will load your file in HTML standards compliance mode and you will not see any SVG image at all. On the other hand, if you use the .xhtml extension and try to open that file in IE6.0, IE6.0 will show the XML tree view! In the end, I stuck with the .xhtml extension because there's a web server workaround (see the Wiki article) and made a copy with a .html extension for testing with IE6.0.

Add special tags for IE6.0

The extra <object> tag and <?import?> processing instructions tell IE6.0 to use ASV for the svg namespace elements. The only gotcha is that IE6.0 leaves a blank space for the tag and processing instruction.

Add web server support

Fortunately, my hobby site is running on an Apache server, so it was easy to add the required changes to the .htaccess file.

Finally …

After spending some hours setting things up and working through the gotchas, I finally got a simple draft page on my hobby site. It isn't much to see at the moment, just a yellow disk. Still, it's a start!

Software: Javascript Text to HTML Update 1

After using the text to HTML convertor for a bit, I found it useful and easy to add the following features:

• Convert ampersand (&) into an HTML entity.
• Convert whitespace to &nbsp;.
• Add <pre> tags at the start and end of the output.

Nethack: Death by Green Elf Gang

Gunthur the Barbarian was going about his business of pillage and amulet hunting when he goes down some stairs and four Green Elves pounce on him. He tries to escape but the elves stand between him and the stairs (that's where he was placed when he descended the stairs). Even worse, they box him into a corner and proceed to zap him with wands of sleep while chopping him to bits. In three moves, it's RIP Gunthur.

The final tableau looked like this (with Gunthur in the top right corner):

########
.....@@#
....@@@#
..<.....
.......#

As usual, it was going passably well until the unexpected end. Gunthur had cleared out the Gnome Mines and Sokoban levels, and he had Cleaver and Dragonbane. Annoyingly, the Sokoban level had neither an amulet of reflection nor a bag of holding!

Software: Javascript Text to HTML Convertor

When entering bugs in our local bug reporting system, I forget to enter reserved HTML characters such as < (less-than) and > (greater-than) as character codes &lt; and &gt;. When I submit my bugs, our server swallows up these reserved characters and my bug reports look rather silly (mind you, a lot of bugs are silly to start with). A similar problem happens when I write a blog with code fragments containing these characters or if I want my source code to be indented nicely. So, here's a simple Javascript Web page to handle these conversions.

The nice bit of code (IMHO) is using string.slice() in the regular expression to replace tabs with a user-specified number of space characters: sIn.replace(/\t/g, '        '.slice(0,iTabSpace)).

Software: WinCVS Compare Versions in Graph

In WinCVS, I can select two versions of a file in the Graph view, then find their differences using the Diff menu item. Upon hindsight, it seems obvious but I hadn't thought I could select multiple versions in the Graph view. Should've read the manual!

Software: SVG Red Circle Test

Can I include SVG pictures in blog entries without mucking around with <embed> tags and separate files? If you have an SVG- and Namespace-aware browser such as Firefox, can you see a red circle below this paragraph?

Probably not. If you check this page's properties (context menu View Page Info) Blogger has sent this file with Content-Type: text/html, so Firefox goes into quirks mode and displays this file as old-fashioned HTML, ignoring the svg elements. I tried changing the template's <meta> element to change the file's Content-Type but no go.

2 March 2006: Wiki describing the horrors of inline SVG coding.

21 August 2015: Yay, nine years later, I can see a red circle after reading Making SVG work with Blogger.