SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Формат поддерживается всеми современными браузерами. (из Википедии

SVG файлы можно редактировать в векторных редакторах (например, в Inkscape) или в текстовых редакторах (т.к. SVG основан на формате XML). У SVG файла единственный родительский элемент <svg> с тегами <path> внутри, которые в свою очередь могут быть сгруппированы в тег <g>. Что интересно в SVG файлах, так это то, что к отдельным <path> или к <svg> целиком можно применить CSS стили, а так же можно управлять элементами <path> через JavaScript. Элементам SVG файлов можно задать привычные HTML атрибуты id, class, title и data.

Встраиваем SVG файлы

Если вам не нужна интерактивность (например, вы встраиваете простую иконку), используйте тег <img>:

<img src="icon.svg">

В противном случае у вас два варианта. Первый это открыть SVG файл в текстовом редакторе, скопировать содержимое и вставить код прямо в HTML страницу в то место, где вам нужно изображение:

<html>
    ...
    <body>
        ...

        <div>
            <?xml version="1.0" encoding="UTF-8" standalone="no"?>

            <svg xmlns:dc="http://purl.org/dc/elements/1.1/" 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" mapsvg:geoViewBox="116.927573 20.834769 126.606549 4.640292">

                <path ...>

                ...

            </svg>
        </div>

        ...
    </body>
</html>

Второй - использовать тег <object>:

<object data="map.svg" type="image/svg+xml"></object>

Применение стилей к SVG файлам

К родительскому <svg> или любому другому тегу из SVG файл можно применить как встроенные стили, так и CSS классы.

SVG файлы автономны (закрыты от внешних влияний), поэтому стили с вашей страницы на них не влияют за исключением тех случаев, когда вы вставили код SVG напрямую на страницу.

Остается только определить блок <style> внутри самого SVG файла и написать весь необходимый CSS код там. Это не очень практичный вариант, если вам нужны одни и те же стили в нескольких файлах. Чтобы решить эту проблему, можно импортировать один и тот же сторонний CSS файл внутри множества SVG файлов. CSS из этих файлов не будет применяться к другим элементам страницы, куда включены эти файлы. Для импорта добавьте следующую строку вверху SVG файла сразу после объявления XML:

<?xml-stylesheet type="text/css" href="styles-for-the-svg-file.css"?>

SVG файлы и JavaScript

Допустим, у нас есть SVG файл с родительским элементом <svg id="map"> и кучей вложенных <path>. Первое, что нам нужно сделать, это дождаться полной загрузки SVG файла со всеми его элементами.

let svg = document.getElementById('map');

svg.addEventListener('load', function () {
    console.log('SVG файл загружен.);
});

После этого можно работать с элементами SVG как с любыми другими элементами DOM. Вы можете перемещать их по экрану и вообще делать все, что вам заблагоразумится.

let svg = document.getElementById('map');

svg.addEventListener('load', function () {
    let paths = svg.querySelectorAll('path');

    paths.forEach(function (path) {
        path.addEventListener('click', function() {
            alert('Нажали на path ' + path);
        });
    });
});

Заключение

С помощью SVG файлов вы можете сделать интерактивную карту, паззл, игру, визуализировать данные и многое другое. Уже существуют отличные готовые пакеты (вроде этого ariutta/svg-pan-zoom), которые помогут привнести жизнь в ваши статические векторные файлы. Остается просто включить фантазию.