Advance SVG - adds actions to pictures

Introduction

Advance SVG is a technique for publishing interactive graphics on internet. The technique can be applied for any type of graphics and format e.g. free hand drawings, business process maps, mind charts, technical diagrams etc. - for any matter that can be described with a simple, at-a-glance picture.

Advance SVG utilises the standard modern browsers’ abilities to show high quality, scalable graphics (see the HTML5 SVG specification) and to behave interactively via Cascadin Style Sheets (CSS) and JavaScript programms.

The technique involves three elements:

1. A web page where graphic(s) are embedded - this page for example.
2. A JavaScript programm - ASVG Script - availbale for free from Cloud Content Delivery Network (CDN) and GitHub.
3. Marked-up SVG graphic - a standard SVG graphic with data attributes to let ASVG Script know what actions to do.

ASVG Script works at the background and scans the page content for mark-ups, then it enhances the graphics on the fly. It adds: responsive behaviour, pop-up effects, in-page links and icons. These features are explained further down.

How it works?

Advance SVG is not an authoring tool, hence it does not help to neither create web pages nor to draw graphics. Various tools can be used for these. In order to work, it is necessary to ensure that: first, the ASVG Script is included into the web page; second, the shapes are marked-up as per the ASVG Specification and finally, the web page includes a point(s) to insert the graphic(s).

The workflow steps are as follows:

1. Create web page – can use various methods – from simple text editor to any modern Content Management System (CMS).
2. Add ASVG Script – the following snippet illustrates the simplest method to insert the library into a page.
   

                   
                     <script src="https://d2a8hhqmsel69m.cloudfront.net/bundle.js"></script>
                   
                 

   However, adding the library into a Content Management System (CMS) like WordPress or SharePoint requires System Administrator’s work. In SharePoint the mechanism to use the library requires using a special Webpart. The topic of using the library with SharePoint is outside of the scope of this specification.
3. Add insertion point - the snippet below shows a simple example of adding data attributes to the standard SVG group tag:
   

                   
                     <div data-asvg="page1.svg" data-asvg-show="page1.svg" style="width:100%;"> </div>
                     Optional parameter: data-asvg-filelocation
                   
                 

4. Draw a graphic – can use any software that can export to SVG format. However, marking up shapes requires an easy method for adding data attributes to the group tags. Currently, the technique has a special filter, which allows reading data from MS Visio SVG files.
5. Mark up shapes – add data attributes to groups (g tags) in the SVG code. Here is a simple example of popuplink and the associated popup:
   

                   
                     <g data-asvg-popuplink=”1” …>
                       popup link graphic code ...
                     </g>
                     <g data-asvg-popup=”1” …>
                       associated popup graphic code ...
                     </g>
                   
                 

6. Publish graphics - the SVG file needs to be ona server. It will be loaded dynamically by the ASVG Script and placed into the insertion point (see item 3).
7. A. Content Management - this specification is generic and depends solely on HTML5. In the most real situations, the web pages would be created within a Content Management System (CMS). Therefore items 1 to 3 will depend on the tools and the methods within a specific CMS. Further materials, outside this specification, about using SharePoint are available from the author.
8. B. Graphic Design – this specification depends only on the SVG specification. Many graphic software can save files in the SVG format. However, the method to add data to mark-up shapes depends on a specific software. ASVG Script has a filter that can recognise the data and mark-up on-the-fly graphics created in MS Visio. Materials about using MS Visio are available outside this specification.

Technical Specification (v. 1.0)

Data attributes (mark-ups)

These should be added to the SVG group <g> tag.

Note: Hyperlinks to other pages are working with the standard <a> tag.

Extra parameters specific for MS Visio

These are implemented via ASVG transformation filter:

                  
                    < g >
                      <title >
                        Text to display on mose over
                      </title>
                      ...
                    < /g >
                  
                

                  
                    <a href="...." >
                      <g data-asvg-hreftarget="_blank" > ... </g>
                    </a>
                  
                

ASVG Object.

The library can be used from the source code (from GitHub or NPM). See the snippet below:

            
              import ASVG from './asvg'
              /*
                An instance of the ASVG class, named 'asvg', must be exposed via the window object to make onclick handlers available
              */

              if( !window.asvg ){
                window.asvg = new ASVG() // Accepts a parameter object with these properties: defaultFileLocation, userErrorHandler and iconMargin
                window.addEventListener('load'  , asvg.updateAll )
                window.addEventListener('resize', asvg.updateAll )
              }
            
          

ASVG Object has the following constructor parameters: