Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Institut Mines-Télécom
SuperPath
SVG extension
Jean-Claude Moissinac
Graphical Web 2015
September 2015
Institut Mines-Télécom
What is SuperPath?
 Proposed for SVG Open 2010
• Smilar ideas by D.Dailey and Chris Lilley
 Super...
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 ...
Institut Mines-Télécom
Examples (1)
Bretagne.svg
15777 bytes
4 paths; 15 chunks
15043 bytes for the paths
95%=path data/to...
Institut Mines-Télécom
Examples (2)
Mapfrance.svg
873 KB
232 paths
40557 points
866 KB for the paths
99 % = path data/tota...
Institut Mines-Télécom
Examples (3)
augustin.svg
90 KB
48 paths; 49 subpaths
19069 points
89 KB for the paths
98 % = path ...
Institut Mines-Télécompage 9
To enable coherent processing
 Coherent adaptation: two neighboring polygons
share a border ...
Institut Mines-Télécompage 10
And others benefits but more generally…
 SuperPath
Which is useful in all the situations se...
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 chu...
Institut Mines-Télécom
Using chunks references
 Mean to identify a chunk to reuse
• SVG uses ID to do internal or externa...
Institut Mines-Télécom
Reversing the chunk order
<svg … onload="superpath.expandPaths()">
<script type="application/ecmasc...
Institut Mines-Télécom
New proposed syntax for SuperPath
 (name|…sequence of standard commands…)
• A command to define a ...
Institut Mines-Télécom
Implementation
 We need a parser tolerant to non standard
commands
 => I implement an expandable ...
Institut Mines-Télécom
How it works
 Each chunk definition is internally converted to
use only relative commands to the c...
Institut Mines-Télécom
How to use it?
 <script type="application/ecmascript"
xlink:href="Js/SuperPathExpander.js" />
 on...
Institut Mines-Télécom
To follow
 https://github.com/moissinac/SuperPath
 http://jsfiddle.net/moissinac/0bp5wvdk/
19 25/...
Institut Mines-Télécom
Next…
 Chunk searcher
• To enable the efficient use of SuperPath in existing
content
 Tools to us...
Institut Mines-Télécom
Maps and tiling maps
21 25/09/15
Institut Mines-Télécom
Vectorized image…
… plus texture or gradient?
22 25/09/15
JPG
SVG
Detail (colors changed)
Institut Mines-Télécom
Demos and contact
 http://givingsense.eu/demo/superpath/Demo/BasicSample.svg
 http://givingsense....
Institut Mines-Télécom
Internet Explorer
24
Path.getAttribute(‘d’)
Expected
M50 200#c1|#c2|l-100 30 -100 50 -50 50z
Return...
Prochain SlideShare
Chargement dans…5
×

Graph web superpath-2015 - SVG Extension

649 vues

Publié le

Present the implementation of an extension for SVG
The extension enables reuse of part of shapes.
Presented during The Graphical Web 2015

Publié dans : Internet
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Graph web superpath-2015 - SVG Extension

  1. 1. Institut Mines-Télécom SuperPath SVG extension Jean-Claude Moissinac Graphical Web 2015 September 2015
  2. 2. 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
  3. 3. Institut Mines-Télécom Benefits of SuperPath page 3
  4. 4. Institut Mines-Télécom To avoid duplication of shared chunks page 4
  5. 5. 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 shape Each shape has a hole that reveals the shapes below it Holes
  6. 6. Institut Mines-Télécom Examples (1) Bretagne.svg 15777 bytes 4 paths; 15 chunks 15043 bytes for the paths 95%=path data/total size 11 KB with SuperPath (9 KB for paths) page 6 Jean-Claude Moissinac
  7. 7. Institut Mines-Télécom Examples (2) Mapfrance.svg 873 KB 232 paths 40557 points 866 KB for the paths 99 % = path data/total data 865 KB with SuperPath page 7 Jean-Claude Moissinac
  8. 8. Institut Mines-Télécom Examples (3) augustin.svg 90 KB 48 paths; 49 subpaths 19069 points 89 KB for the paths 98 % = path data/total size 89 KB with SuperPath (old syntax) page 8 Jean-Claude Moissinac
  9. 9. 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
  10. 10. Institut Mines-Télécompage 10 And others benefits but more generally…  SuperPath Which is useful in all the situations seen above and potentially for a lot of other situations not foreseen today preserves the knowledge that two chunks are identical
  11. 11. Institut Mines-Télécom What is needed to define SuperPath page 11
  12. 12. 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
  13. 13. 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, C3 Coastline is made of: …, C4, C1, C5… Green polygon is made of: …, C6, C2, C4… … C1 C2 C3 C1 C2 C4 C4 C5 C5 C6 C6
  14. 14. 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/
  15. 15. 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 25/09/15
  16. 16. 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 25/09/15
  17. 17. 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 25/09/15
  18. 18. 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 25/09/15
  19. 19. Institut Mines-Télécom To follow  https://github.com/moissinac/SuperPath  http://jsfiddle.net/moissinac/0bp5wvdk/ 19 25/09/15
  20. 20. 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 25/09/15
  21. 21. Institut Mines-Télécom Maps and tiling maps 21 25/09/15
  22. 22. Institut Mines-Télécom Vectorized image… … plus texture or gradient? 22 25/09/15 JPG SVG Detail (colors changed)
  23. 23. 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 25/09/15
  24. 24. Institut Mines-Télécom Internet Explorer 24 Path.getAttribute(‘d’) Expected M50 200#c1|#c2|l-100 30 -100 50 -50 50z Returned by IE M50 200 And then I can’t do nothing to standardized a non- standard content. I will explore solutions 25/09/15

×