Stateful Scalar Vector Graphics

Also known as "SSVG"

Sylvain Fargier (CERN)

15/02/2022

Animated Graphics

"SSVG"

Stateful SVG

Example: SVG demonstrating logical state versus graphical state

  • Add a logical state to a graphical object
    • Embedded within the SVG file​
    • Describes its relations with the graphical state
  • Portable
    • ​Additional metadata on a self-contained SVG file
    • Can be implemented with any framework (Java, Qt, Web ...)
    • With different animation technologies (SMIL, CSS3, JS, C++ ...)

Stateful SVG

  • ​Declarative
    • Separate description from operation
    • Focus on what not on how
  • Modular
    • Low dependency standalone "engine"
    • Direct DOM integration​
  • Easy to use domain-specific language
    • 3 main tags (7 in total)
  • Example
    • I have a "temperature" logical property [-30, 100]
    • I map its domain to the height and color of a #gauge element

Stateful SVG

<state>
  <property name="temperature" min="-30" max="100" type="number" initial="0">
    <relation query-selector="#gauge" attribute-name="height" from="0%" to="100%" />
    <relation query-selector="#gauge" attribute-name="fill" from="blue" to="red" />
  </property>
</state>

Example: SSVG state declaration

  • Yet Powerful
    • CSS and SVG 3D transforms
    • text and data formatting and processing
    • embedded logic
    • non-linear relations
    • transitions and easing
    • automated domain mapping ...

Stateful SVG

Example: non-linear relations

Example: CSS transforms

Example: computed properties

Example: operational dashboards

Example: operational dashboards

 

Stateful SVG: State of Art

Demo !

TIDVG5 dashboard (restricted access)

Stateful SVG: Next Steps

  • SSVG Widget Editor
    • ​Web based metadata editor
    • Does not replace SVG editors, focuses on animations
    • Designed for basic animations (translations, rotations, scaling ...)​
  • Purpose
    • To ease and fasten widget development
    • To lower the tech learning curve

SSVG editor draft project

Questions ?

Stateful Scalar Vector Graphics

By Sylvain fargier

Stateful Scalar Vector Graphics

SSVG Presentation

  • 645

More from Sylvain fargier