Возникла задача создания документации в виде XHTML-страниц.
Документация представляет собой чередующиеся пошаговые скриншоты и текстовые инструкции.
На скриншотах нужно красными прямоугольниками и линиями выделять те кнопки и флажки/радиокнопки/поля, которые подлежат нажатию/заполнению. Вместо того, чтобы рисовать эти пометки прямо на рисунке, я хочу наложить на рисунок сверху слой векторной графики.
Варианты, которые отпали:
1. VML
2. Какой-то-способ с использованием клиентского java-скрипта и <map>, <area>. (Не разбирался глубоко)

Вариант, на котором я пока что остановился:
SVG, возможно inline SVG.

По самой реализации вопросов нет, вопрос в том - лучший ли это способ? Все должно работать в Firefox, в IE - желательно, но не обязательно, на остальные браузеры - плевать.
Спасибо.

или вообще так, если нужны только прямоугольники да линии

<div style="position: relative">
<img src="01.png" />
<span style="position: absolute; left: 10px; top:10px; border: solid 4px red; width: 5px; height: 3px;"></span>
<hr style="position: absolute; left: 10px; top:60px; border: solid 1px red; width: 50px; height: 3px;" />
</div>

что посоветуете выбрать?

Насчет статичной графики - да, именно так.
xslt (предполагается исполняться на веб-сервере?) - овчинка выделки не стоит , ибо не хочется завязываться на веб-сервер, сейчас страницы открываются даже на локальной файловой системе.
Спасибо за мнение.