SVG File Organization

Note: This format relies on an Inkscape-defined attribute; other SVG editors not recommended.

Option 1: external CSS and script

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="filename.css" ?>
<svg
    ...
    xmlns:xlink="http://www.w3.org/1999/xlink"
    >

    ... SVG content ...

    <script xlink:href="svg-script.js" id="script688"></script>
</svg>

Option 2: embeded CSS and script

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg ...>
    <style
        id="style4"
        type="text/css"><![CDATA[
            ... CSS rules ...
    ]]></style>

    ... SVG content ...

    <script
        id="script688"><![CDATA[
            ... javascript ...
    ]]></script>
</svg>

• You create the style sheet. It modifies appearance based on class changes (e.g. button press, indicator true/false change, etc.)
• The script communicates with the controller and adds/removes styles based on the rules in inkscape:label.
• You probably don't need to modify the script when creating custom screens.
• The script tag must be after all content. If Inkscape places content after the script tag, then you must move the tag. Easy way to prevent this: use layers. Once a layer exists, Inkscape won't move it.

inkscape:label property

JSON object with the following members:

Name	Example	CSS Classes	Description
classes	{"classes":["a","b"]}	*	Add classes to element.
remove-styles	{"remove-styles":["fill","stroke"]}		Remove styles from element. This allows CSS rules to control them.
indicator	{"indicator":"alarm"}	true or false	If(value===true) add "true" CSS class. If(value===false) add "false" CSS class.
value	{"value":"mposX"}		Replace <text>'s <tspan>'s content with value.
type:button	{"type":"button"}	type-button	Installs event handlers for button behavior
type:field	{"type":"field"}	type-field	Creates a field on top of element
font	{"font":"bold 10mm sans"}		Font on field
action	{"action":"jog-configured-distance"}	action-*	See button desciptions
axis	{"axis":"x"}	axis-*	See button desciptions
index	{"index":"2"}	index-*	See button desciptions
negative	{"negative":"false"}	negative-*	See button desciptions

Indicators

Fields

Buttons

Cross Origin

• Since this can bring in content from arbitrary URLs, it's cross origin.
• It uses <iframe referrerPolicy='no-referrer' sandbox='allow-scripts' />.
• Cross-origin limit: lw-controller can't directly manipulate the SVG; this is why the SVG needs a script.
• lw-controller and the SVG communicate using postMessage().
• lw-controller doesn't really know that it's an SVG. It can work with HTML as long as the HTML communicates with it.