Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. All major modern web browsers have SVG rendering support. (from wikipedia)

You can edit SVG files in Inkscape (open-source vector graphics editor) or in a text editor, since it is XML-based. An SVG file has a single parent <svg> element and a bunch of <path> elements inside, which can be grouped into groups with <g> elements. The cool thing about SVG is that you can style the whole file or individual paths with CSS as well as manipulate paths with JavaScript. SVG elements can have id, class, title, and data attributes just like any other HTML element.

SVGs are used when there is a need to add interactivity to graphics. One popular use case in web applications is interactive maps. Another one - icons, since there is no quality loss when scaling SVG files.

Embedding SVG Files

If you don't need interactivity (e.g. if you're embedding an icon), use <img> element:

<img src="icon.svg">

Otherwise you might go two ways. The first one is to open an SVG file, copy its contents and paste it directly into the HTML wherever you need it:

<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>

The other way is to use <object> element:

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

Styling SVG Files

You can apply inline styles or classes to the parent <svg> element, as well as to any other elements of the SVG file.

SVG files are self-contained, and unless you paste your SVGs inline, none of the styles from the external CSS files from your pages will apply.

What you can do is declare a <style> block inside an SVG file and write all the CSS there. Although, it gets inconvenient if you need to apply the same styles to multiple files. And as it turns out, you actually can include external CSS files inside SVG files, which won't affect any elements on the page outside those files. Put this line at the top of an SVG file after the XML declaration:

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

SVG Files and JavaScript

Let's say we have an SVG file with a parent <svg id="map"> and a bunch of <path> elements inside. The first thing we have to do is to wait for the SVG content to load to ensure all the elements are available to us.

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

svg.addEventListener('load', function () {
    console.log('SVG file loaded.);
});

After that you can work with the SVG's elements just like you would with regular DOM elements. You can even move them around - do whatever you want.

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

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

    paths.forEach(function (path) {
        path.addEventListener('click', function() {
            alert('Clicked on path ' + path);
        });
    });
});

Final Words

With SVG files you can build interactive maps, puzzles, games, visualize data, and do many more things. There are nice packages like ariutta/svg-pan-zoom out there which will help you bring your static vector images to life. Just use your imagination.