SVG Image Replacement (svgIR)

Version 1.21 - 22nd April 2005

Legacy warning: this is a very old script, and may not work correctly in your browser, if it works at all.

svgIR uses a mixture of techniques to replace plain text with Scaleable Vector Graphics (SVG). If the script is supported then the heading below will be a fancy font (Agent Orange):

Hello World

In Opera 8 the image is appended directly as an imported SVG node (because Opera now has native support). The same functionality applies to SVG-enabled mozilla builds, however the replacement element doesn't show up (it's there in the DOM inspector, but you can't see it; I don't know why).

In other browsers, if the Adobe SVG Viewer is detected, the image is included using an <object> element. This works in Firefox (if you're using Viewer 6.0 beta), Safari, Win/IE5-6 and Mac/IE5.

If scripting (or this script) is not supported, the heading will be plain text.

Get the script

Download the zipfile [8K] and unzip it into your site directory. Then there are four includes to put in the <head> section of your page - the main svgIR script, a short VBScript (to detect the Adobe Viewer in IE), the configuration script and a stylesheet:

<!-- SVG Image Replacement (svgIR) by brothercake - http://www.brothercake.com/ 
     the core scripts must come first and in this order -->
<script type="text/javascript" src="svgir.js"></script>
<script type="text/vbscript" src="svgir.vbs"></script>

<!-- svgIR configuration script -->
<script type="text/javascript" src="svgir-key.js"></script>

<!-- svgIR stylesheet -->
<link rel="stylesheet" type="text/css" href="svgir.css" media="screen, projection" />

The stylesheet only contains 2 lines of CSS, which you could just as well put with your main styles; it doesn't matter where that goes. However the three scripts must come in the specified order or the replacement won't work.

Individual image replacements are defined using an object constructor; this takes three arguments, the last of which is optional:

//create a new svg image replacement ("element-id", "svg-url", [plugin,dimensions])
var hello = new svgIR('test', './hello.svg', [223,29]);
Element ID

Specify the ID of an element where the SVG will be inserted.

SVG URL

Specify the URL of the source SVG document. How to create this may well be the $64,000 question - I made the demo by saving a rasterized image from Adobe Illustrator.

But of course the beauty of SVG is that it's just XML, and can be created using any plain-text editor. The best resource I know of for SVG clipart is the Open Clipart Library, or if you fancy diving in at the deep end, the W3C documentation is the definitive source.

Remember that if you're using the technique for fancy fonts, you can't use literal text in the form of SVG <text> elements, because these will have the same system-font dependency as regular HTML text.

Plugin dimensions

This argument is optional, but if included should be an array-literal with two numbers. The presence of this array enables the secondary functionality to embed the SVG as an <object>, and the array values themselves are the width and height of that object.

If it's not included, the replacement will only happen in browsers with native SVG support.

You can create any number of replacements, and they can use the same source documents, as long as each has a unique ID. The constructors don't have to be in their own file - you can put them with other scripting as part of another onload function - providing that they come after the two core scripts ("svgir.js" and "svgir.vbs", in that order), you'll be fine.

Once you've configured the replacement, you simply need to attach the applicable ID and class to the element in question:

<!-- svgIR replacement element -->
<h2 class="svgir" id="test">Hello World</h2>

The ID attribute is needed by the script, as we've already seen, but the "svgir" class name is used only to apply the positioning CSS - so if you've taken care of the necessary styles in other rules, you don't need it.

How it works

In browsers which support SVG natively, the source document is loaded using XMLHttpRequest, and then imported as a single node from the responseXML. The node is then appended directly to the heading, which results in a mixed XML document, therefore the document should be served (to those browsers) as application/xhtml+xml.

Since the replacement is happening dynamically, and native support is a condition of the script, it can safely create a mixed XML document even if the page is served as text/html to browsers that don't have native support.

In browsers which are using the Adobe Viewer, the image is included by dynamically creating an <object> element, with its data attribute pointing to the source SVG document.

Accessibility considerations

The replacement SVG is positioned directly on top of the original text, without hiding it. That's not for the sake of images being off, because vector graphics are not affected by conventional image support; I've done it to avoid introducing accessibility problems (if the script is run in a browser-based screenreader that has the Adobe Viewer, the readable text will still be there) and to avoid the possibility of making the underlying text unselectable.

The replacement image-text itself is not directly selectable, because it's not really text. But since the original text is not hidden, it will be included if it comes within a larger selection - such as in the middle of several highlighted paragraphs, or select-all.

The image-text is scaleable, because it's a vector format, but in browsers using the Adobe Viewer the image is constrained and clipped by the dimensions of the <object>

Get the script

BSD License → Terms of use

Categories...

Website gadgets

Bits of site functionality:

Usability widgets

Images

Image manipulation scripts:

Local network apps

Web-applications for your home or office network:

Game and novelties

Our internal search engine is currently offline, undergoing some configuration changes in preparation for a major site overhaul. In the meantime, you can still search this site using Google Custom Search.


In this area

Main areas


[brothercake] a round peg in a square hole, that still fits