graph web superpath-2015 - svg extension

Institut Mines-Télécom

SuperPathSVG extensionJean-Claude MoissinacGraphical Web 2015September 2015


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


Benefits of SuperPath

page 3


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


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


Examples (2)

Mapfrance.svg

873 KB232 paths40557 points866 KB for the paths99 % = path data/total data

865 KB with SuperPath



Examples (3)

augustin.svg

90 KB48 paths; 49 subpaths19069 points89 KB for the paths98 % = path data/total size

89 KB with SuperPath (old syntax)



To enable coherent processing

Coherent adaptation: two neighboring polygons share a border part; when adapting that part, the adaptation must be coherent


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


What is needed to define SuperPath

page 11


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


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


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


http://jsfiddle.net/moissinac/0bp5wvdk/


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


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


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


How to use it?

<script type="application/ecmascript" xlink:href="Js/SuperPathExpander.js" />

onload="superpath.expandPaths() "• On your svg element

18 03/05/23


To follow https://github.com/moissinac/SuperPath

http://jsfiddle.net/moissinac/0bp5wvdk/

19 03/05/23


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


Maps and tiling maps

21 03/05/23


Vectorized image…… plus texture or gradient?

22 03/05/23

JPG

SVG

Detail (colors changed)


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 [email protected]

23 03/05/23


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