Graph web superpath-2015 - SVG Extension
•Télécharger en tant que PPT, PDF•
0 j'aime•865 vues
Present the implementation of an extension for SVG The extension enables reuse of part of shapes. Presented during The Graphical Web 2015
Recommandé
Contenu connexe
En vedette
En vedette (13)
Similaire à Graph web superpath-2015 - SVG Extension
Similaire à Graph web superpath-2015 - SVG Extension (20)
Dernier
Dernier (20)
Graph web superpath-2015 - SVG Extension
- 1. Institut Mines-Télécom SuperPath SVG extension Jean-Claude Moissinac Graphical Web 2015 September 2015
- 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. Institut Mines-Télécom Benefits of SuperPath page 3
- 4. Institut Mines-Télécom To avoid duplication of shared chunks page 4
- 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. 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. 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. 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. 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. 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. Institut Mines-Télécom What is needed to define SuperPath page 11
- 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. 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. 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. 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. 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. 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. 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. Institut Mines-Télécom To follow https://github.com/moissinac/SuperPath http://jsfiddle.net/moissinac/0bp5wvdk/ 19 25/09/15
- 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. Institut Mines-Télécom Maps and tiling maps 21 25/09/15
- 22. Institut Mines-Télécom Vectorized image… … plus texture or gradient? 22 25/09/15 JPG SVG Detail (colors changed)
- 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. 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
Notes de l'éditeur
- I’m Jean-Claude Moissinac from Telecom ParisTech. I’m associate professor and work on media technologies
- First I will present the motivations behind SuperPath
- As seen previously in the map, we have a lot of shared chunks. With current specification of SVG, we need to replicate the shared chunks. For example, the shared part of the yellow and green region must be completely repeated in the definition of the yellow polygon and in the green one. In this sample, we have a yellow region which share a chunk of contour with the coastline. It shares another chunk with the green region. Such situation is very common in a lot of graphics. Here, some drawings are shared several times like a chunk of the coastline which is a limit for a region, a limit for a big region, and the coastline.
- For a lot of vector graphics, among which maps and cartoon drawings, the main part of the data resides in the representation of the points that define the contours. When a group of points is duplicated, the file size is unnecessarily increased. Using a single representation of duplicated group of points will therefore reduce the file size. Holes are contours inside a contour which define a region excluded from the main contour (and presumably transparent). Using a better representation of duplicated chunks also allows for better re Fig. 5 shows two ways to get a blue shape containing a green shape containing a hole which lets you see what is behind the green and blue shapes. In the first way (first line of the figure), the green shape shares its external contour with the blue shape. In the second way (second line in the figure), the green and blue shapes share the description of the hole. presentation of holes.
- Here we see some results of applying SuperPath to an existing SVG file. The result is: we can benefit of Superpath without making the file grows. In the list of benefits, tqsqssqwwqwwwwwwwwwwhe benefit on the file size is not clear in this case. Such benefit will appear mainly on files created to use SuperPath.
- If the SVG file contains the information that two chunks of contours are the same, both contours can be adapted in a coherent manner, processing it only once and avoiding artifacts produced by divergent adaptations
- A player that knows that two chunks of contours are the same can optimize the rendering operations, for example performing the linearization of Bezier curves into straight segments only once.
- We need to introduce the concept of chunks using the target language model. As a chunk can be used by different contours with different display styles, a chunk must not be dependent on a style. The chunk therefore only contains geometrical data (points and control points).
- We need to be able to reuse these chunks in different shapes. This is usually achieved through an explicit or implicit identifier for the chunk and further referencing in each shape which uses this chunk. Obviously, if the targeted language has syntax to express references, we need to be coherent with that syntax for chunk referencing (e.g., SVG xlink or BIFS DEF/USE mechanisms).
- As illustrated in Fig. 6, duplicated chunks could be used as they are first defined or in the reverse order. The syntax must enable such usage. We propose the following new SVG elements: &lt;superpath&gt;: this element has no specific attribute. It supports traditional SVG attributes such as id, transform, class… It is used as a container element for the elements below and defines its own styling. &lt;subpath&gt;: this element declares a chunk used in a SuperPath . Its syntax is the same as the standard SVG &lt;path&gt; element, but the semantics are different. This element is only displayed when it is a child of a &lt;superpath&gt; element. A subpath can have two forms: It can contain a d attribute, analog to the one in the path element; if it has an id attribute, then the d part can be reused by referencing another SuperPath; It can contain an xlink:href attribute which references the id of another subpath. In this case, its geometry is defined by the d attribute of the referenced subpath. In addition, the geometry of a subpath can be used in the reverse order, as explained in 4.A. An “order” attribute is therefore defined with possible values ‘direct’ or ‘reverse’; the ‘direct’ value is the default. In both forms, the “cmd” attribute expresses how the subpath is joined with the previous one. There is currently only one possible value “line”, indicating that a straight line is used to join the chunks. Please note that the definition of a chunk can be similar to the definition of the corresponding part of the original content. An overhead will come from the size of the references to the chunk. As an example, Fig. 4 can be represented as follows: The subpath with id sp1 is the one shared by the green and red shapes; the subpath with id sp2 is shared by the red and blue shapes; the subpath with id sp4 is shared by the green and blue shapes.
- Note the bar