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
IDof 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 thewidthandheightof 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>
![[php]](/images/php.png "Uses PHP")