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:
- A W3C standard (SVG-1.1 in 2011)
- An XML-based document that describes a two-dimensional vector graphics (source: MDN) composed of graphical elements, ex: rect, circle ...
-
A DOM compatible document that:
- Integrates Javascript
- Can be navigated using CSS selectors (ex: id, class ...)
- Can be styled using CSS
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
SSVG Project
SSVG Project Status
SSVG: Project Info
- Project management : SSVG Jira project
- SSVG Specification : v1.1 (PDF / HTML)
- SSVG-Engine : GitLab / Playground / Distribution
- SSVG-Editor : GitLab / Production / Beta / UserGuide (PDF / HTML)
- 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:
-
Direct support for path animations
SSVG: What's next
SSVG Editor Presentation
By Sylvain fargier
SSVG Editor Presentation
SSVG Editor Presentation
