Использование библиотеки SVGPan для встраивания векторной графики в HTML

Комментариев нет

Предпосылки

О преимуществах векторной графики против растровой говорить излишне. Разумеется, не всегда представляется возможным использовать только векторную графику, но во многих применениях именно масштабируемая графика обеспечивает наилучший результат.

В настоящий момент, большинством современных программ-браузеров поддерживается векторная графика (svg), и не пользоваться этим, когда это возможно, пожалуй, не разумно.

Увеличение векторного изображения в программе-браузере можно осуществить изменением масштаба всей страницы (Ctrl+; Ctr-; Ctr+0). Но в этом случае в размере будут изменяться и прочие элементы на странице.

Есть более изящный вариант – создания своего рода лотка под svg-объект и отслеживание событий от манипулятора “мышь” на этом “лотке”. Для этого и существует мини-библиотека SVGPan.

Загрузка библиотеки

Библиотека “SVGPan” распространяется в лучших традициях “Open Source” с лицензией “New BSD License” (https://opensource.org/licenses/BSD-3-Clause). Сама библиотека доступна здесь: https://code.google.com/archive/p/svgpan/.

Подготовка svg-файла

Можно, конечно, подготовить файл и в текстовом редакторе, т.к. SVG – это XML-файл. Но проще, конечно же, воспользоваться графическим редактором, например Inkscape (http://inkscape.org/).

Запустить редактор, создать файл, наполнить его требуемым содержимым, сохранить файл и закрыть редактор.

Note Если по замыслу необходимо, чтобы перетаскивалась и масштабировалась только часть объектов в svg-файле, то эти объекты нужно разместить в отдельном слое

Далее, открыв файл уже в текстовом редакторе, очень внимательно и вдумчиво внести следующие изменения:

  • в корневом элементе, т.е. в <svg>:
    • добавить пространство имён: xmlns:xlink=”http://www.w3.org/1999/xlink”;
    • добавить перехватчиков событий “мыши”: onmouseup=”handleMouseUp(evt)” onmousedown=”handleMouseDown(evt)” onmousemove=”handleMouseMove(evt)”;
    • удалить, если есть, параметр “viewBox”;
  • после служебной информации, сразу перед описанием графического содержимого, добавить ссылку на библиотеку “SVGPan”: <script xlink:href=”SVGPan.js” id=”myScript” />;
  • заменить идентификатор слоя, который должен изменяться/перемещаться, на “viewport”.

Пример параметров корневого элемента:

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"   <1>
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="200"
   height="200"
   onmouseup="handleMouseUp(evt)"               <2>
   onmousedown="handleMouseDown(evt)"           <2>
   onmousemove="handleMouseMove(evt)"           <2>
   id="svg2"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="testSvgPan.svg">
  1. Добавление пространства имён
  2. Добавление перехватчиков событий “мыши”

Добавление ссылки на библиотеку:

...
  </metadata>
  <script xlink:href="SVGPan.js" id="myScript" />
  <g inkscape:label="Layer 1"
...
Warning Файл библиотеки “SVGPan” при таком добавлении должен находиться там же, где и svg-файл

Изменение идентификатора слоя:

  <g inkscape:groupmode="layer"
     id="viewport"                  <1>
     inkscape:label="Layer 2"
     style="display:inline">
  1. Параметр “id” должен иметь значение “viewport”

Внедрение svg-объекта

Самым простым способом добавления рисунка на html-страницу является использование тэга “img”, но в таком случае, сценарий JavaScript работать не будет, поэтому векторный рисунок должен быть встроен/внедрён в html:

<!doctype html>
<html lang="ru">
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=1024" />
  <title>Проверка масштабирования</title>
 </head>
 <body>
    <div>
        <object id="testSVG" data="testSvgPan.svg"></object>
    </div>
 </body>
</html>

Пример