SVG в HTML
Столкнулся с необходимостью создать несколько интерактивных карт, в качестве решения данной задачи использовал SVG, в современных браузерах она отлично воспринимается. Так как я использую linux ubuntu, для создания шаблона я воспользовался inkscape, поэтому буду описывать работу именно с ним. SVG файл можно открыть в любом редакторе и вставить в HTML код исходники, также его можно подгрузить как изображение, но я бы советовал использовать на базе исходного кода.
Работа началась с создания нескольких слоёв, в один из нижних слоёв было загружено исходное изображение, работал же я поверх слоя с изображением, закрывая его.
Создавал изображение при помощи инструмента Рисовать кривые безье и прямые линии, вызывается он shift + f6. При рисовании контуры можно сцыплять и расциплять при помощи определённых функция расположенных в шапке программы слева, и обозначенных в виде точек. Также можно соединить несколько контуров в один, находится это в разделе контур, в меню где первым идёт файл.
Несколько разных изображений можно связать в один блок, в коде в дальнейшем они прописываются в качестве одного дива, поэтому можно использовать самые разные стили под один блок и при программировании и наведении на этот блок, будет срабатывать один общий стиль. Формируется это при помощи Объект - сгрупировать.