SVG Format

The SVG (Scalable Vector Graphics) format is a widely used format for vector graphics. It is a text-based format that describes the paths of the shapes in the image. The SVG format is supported by all modern browsers and is the format used by Synoptic Panel to render the maps, with the guarantee of no loss of quality at any resolution or zoom level.

<!-- A sample SVG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175 175">
    <path id="layer1" d="M14.62,..." style="fill:#797774" />
    <path id="layer2" d="M158.99,..." style="fill:#444" />
    <path id="layer3" d="M14.62,..." style="fill:#c8c6c4" />
</svg>

If you are new to SVG, here are some useful resources:

• How to create, edit and export SVG files
• SVG tutorial on MDN Web Docs

Below is a reference guide to the SVG format and the custom attributes supported by Synoptic Panel.

Shapes

Shapes are the basic elements of an SVG file. They can be used to define areas in the map. These elements are defined with tags <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, or <rect>.

Groups

Groups are used to group multiple shapes together. They can be used to define areas in the map. The <g> tag is used to defines groups and it encloses shapes or other groups.

Areas

In Synoptic Panel, an area is a shape or group of shapes that has been linked to a specific data point.

You can “transform” an SVG element into an area by setting the element id, set the data-okviz-strong attribute (see below), or assign the element to a data point through the Map Editor. Areas can be highlighted, colored, or labeled based on the underlying data, allowing interactivity and drill-down capabilities.

Id Attribute

The id attribute is used to uniquely identify an element in the SVG file. This attribute can be used to automatically bind the element to a data point.

Note that:

• The id must be a valid XML ID, which means it must start with a letter or underscore, followed by letters, digits, hyphens, underscores, colons, and periods. Spaces are also allowed, but not recommended. If the id starts with a digit, it must be escaped with an underscore (1 should become _1).
• The value of each id must be unique within the map, as defined by the SVG specification. If you have multiple elements with the same identifier, all of these elements will be linked to the same data point (in the case of successfully automatic binding). If this is the desired behavior, it is generally recommended to use unique id values for each element and to use the data-okviz-strong attribute (see below) or the Map Editor to bind multiple areas to the same data point.

Custom Attributes

Here is a list of custom SVG attributes supported by Synoptic Panel.

Note that most of these attributes have an equivalent setting in the visual interface, but using the custom attribute can save time and avoid errors, especially when using remote maps or generating maps programmatically. Also, custom attributes have precedence over the visual settings.

Example:

<!-- A sample SVG with a custom attribute -->
<svg data-okviz-svg-copyright="Copyright OKVIZ">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Unsupported Elements and Attributes

SVG format supports a wide range of elements and attributes, but not all of them are supported by Synoptic Panel, due to security and performance reasons. These are not supported:

• Event handler attributes like onclick, onload, onerror, etc.
• JavaScript-enabled attributes like href with JavaScript protocol (javascript:)
• Scripts (<script>)
• Foreign objects (<foreignObject>)