SSVG Editor

Stateful Scalar Vector Graphics documents Editor

Sylvain Fargier (CERN)

09/01/2023

Introduction

SSVG & Editor Introduction

  • A SVG (Scalable Vector Graphics) document is:

What is SVG ...

  • SSVG (Stateful SVG) is :
    • An extension to SVG documents : 3 main elements, 7 in total
    • A declarative state for a graphical document to describe:
      • logical state properties, ex: temperature, position ...
      • relations between properties and graphical elements

What is SSVG ...

<state>
  <property name="temperature" min="-40" max="80" type="number">
    <relation query-selector="#clipArea" attribute-name="y" from="260px" to="55px" />
    <relation query-selector="#color" attribute-name="fill" from="blue" to="red" />
  </property>
</state>
Example: SSVG state declaration
Example: SVG state animation
  • A SSVG Editor is :
    • A graphical tool to manipulate and edit SSVG state declaration
    • A preview tool to display graphical state for a given logical state
  • A SSVG Editor is not :
    • A SVG editor, it can't be used to edit the graphical part of SSVG, there are tools for this, ex: inkscape, draw.io, boxy ...
    • An animation engine : there are dedicated ssvg-engine implemention(s) that can be embedded in
      your applications

What is a SSVG Editor ...

SVG Editor example

Demo

https://mro-dev.web.cern.ch/ssvg-editor

SSVG Project

SSVG Project Status

SSVG: Project Info

  • SSVG evolution proposals:
    • Direct support for path animations
      • With pre-sampling to support extreme conditions
    • C++/Qt engine implementation ?
    • Offline browser rendering : OffscreenCanvas, CanVG or other approach...
    • 3D Stateful documents:
      • Review existing document standards
      • Dig into three.js (as with D3.js for SSVG)

SSVG: What's next