Post on 12-Apr-2017
Institut Mines-Télécom
SuperPathSVG extensionJean-Claude MoissinacGraphical Web 2015September 2015
Institut Mines-Télécom
What is SuperPath?
Proposed for SVG Open 2010• Smilar ideas by D.Dailey and Chris Lilley
SuperPath is • the capability to describe one path assembling several
smaller chunk of path• the capability to share some smaller chunk of path
between several path
page 2
Today, such capabilities is not available in SVG
Institut Mines-Télécom
Benefits of SuperPath
page 3
Institut Mines-Télécom
To avoid duplication of shared chunks
page 4
Institut Mines-Télécompage 5
To reduce the file size
Representing holes always implies reusing parts of paths
Same hole repeated for each shape in the stack
The internal path of the blue shape is the external path of the green shapeEach shape has a hole that reveals the shapes below it
Holes
Institut Mines-Télécom
Examples (1)
Bretagne.svg
15777 bytes4 paths; 15 chunks
15043 bytes for the paths95%=path data/total size
11 KB with SuperPath(9 KB for paths)
page 6 Jean-Claude Moissinac
Institut Mines-Télécom
Examples (2)
Mapfrance.svg
873 KB232 paths40557 points866 KB for the paths99 % = path data/total data
865 KB with SuperPath
page 7 Jean-Claude Moissinac
Institut Mines-Télécom
Examples (3)
augustin.svg
90 KB48 paths; 49 subpaths19069 points89 KB for the paths98 % = path data/total size
89 KB with SuperPath (old syntax)
page 8 Jean-Claude Moissinac
Institut Mines-Télécompage 9
To enable coherent processing
Coherent adaptation: two neighboring polygons share a border part; when adapting that part, the adaptation must be coherent
Institut Mines-Télécompage 10
And others benefits but more generally…
SuperPath
Which is useful in all the situations seen aboveandpotentially for a lot of other situations not foreseen today
preserves the knowledge that two chunks are identical
Institut Mines-Télécom
What is needed to define SuperPath
page 11
Institut Mines-Télécom
Defining the chunks
We need to define the chunks, the portion of path which can be reused• A chunk will be reused by contours with different display
styles─ => a chunk must not be dependent on a style─ => a chunk must only contain geometrical data
• Our approch─ A chunk is a sequence of standard command defined in a path
page 12
Institut Mines-Télécom
Using chunks references
Mean to identify a chunk to reuse• SVG uses ID to do internal or external references
page 13
Yellow polygon is made of:Chunk C1, C2, C3Coastline is made of:…, C4, C1, C5…Green polygon is made of:…, C6, C2, C4……
C1 C2
C3
C1C2
C4 C4
C5
C5
C6
C6
Institut Mines-Télécom
Reversing the chunk order
<svg … onload="superpath.expandPaths()"><script type="application/ecmascript" xlink:href="SuperPathExpander.js" /> <defs> <path d="M0 0(c1|l100 10 50 0 100 -10)" /> <path d="M300 200(c2|L300 120 320 40 310 10)" /> <path d="M0 0(c4|l100 10 80 0 100 -20 50 20)" /> </defs> <path id="redpath" class="red"
d="M50 200#c1|#c2|l-100 30 -100 50 -50 50z" /> <path id="bluepath" class="blue"
d="M50 200#c1|#c4|l-100 100 -50 50 -100 20 -80 -30 -80 -20z" /> <path id="greenpath" class="green"
d="M300 200#c4|l-10 -80 -80 -50 -100 -40 -130 -30!c2|z" /></svg
page 14 Jean-Claude Moissinac
http://jsfiddle.net/moissinac/0bp5wvdk/
Institut Mines-Télécom
New proposed syntax for SuperPath
(name|…sequence of standard commands…)• A command to define a chunk
#name|• A command to use a chunk in direct order
!name|• A command to use a chunk in reverse order
Note the | as separator• Used to avoid problem with numbers and z following
names of chunks
15 03/05/23
Institut Mines-Télécom
Implementation
We need a parser tolerant to non standard commands
=> I implement an expandable parser in• ExpandableSVGPathParser.js
And the support for the new commands in• SVGSuperPathParser.js• It defines four chars: ( # ! | which can be changed for
other chars not used by the standard path commands
For facility, both sources are joined in• SuperPathExpander.js or SuperPathExpander.min.js
16 03/05/23
Institut Mines-Télécom
How it works
Each chunk definition is internally converted to use only relative commands to the context of the definition of the chunk
expandPaths() process each definition and reference of chunk to get equivalent standard path
expandPaths() must be explicitly called on the load event
expandPaths() is automatically called each time a chunk is redefined
17 03/05/23
Institut Mines-Télécom
How to use it?
<script type="application/ecmascript" xlink:href="Js/SuperPathExpander.js" />
onload="superpath.expandPaths() "• On your svg element
18 03/05/23
Institut Mines-Télécom
To follow https://github.com/moissinac/SuperPath
http://jsfiddle.net/moissinac/0bp5wvdk/
19 03/05/23
Institut Mines-Télécom
Next…
Chunk searcher• To enable the efficient use of SuperPath in existing
content Tools to use SuperPath
• Tiling big svg content• Vectorized bitmap images
Use the parser to add the bearing support• Combined with SuperPath, it could be a great
functionnality for paving
20 03/05/23
Institut Mines-Télécom
Maps and tiling maps
21 03/05/23
Institut Mines-Télécom
Vectorized image…… plus texture or gradient?
22 03/05/23
JPG
SVG
Detail (colors changed)
Institut Mines-Télécom
Demos and contact
http://givingsense.eu/demo/superpath/Demo/BasicSample.svg http://givingsense.eu/demo/superpath/Demo/ChunkViewer3.svg http://givingsense.eu/demo/superpath/Demo/AnimationYY.svg
Contact moissinac@enst.fr
23 03/05/23
Institut Mines-Télécom
Internet Explorer
24
Path.getAttribute(‘d’)
ExpectedM50 200#c1|#c2|l-100 30 -100 50 -50 50z
Returned by IEM50 200
And then I can’t do nothing to standardized a non-standard content. I will explore solutions
03/05/23