Critical issues presentations/Dynamic SVG for Wikimedia projects: Exploring applications, techniques and best practice for interactive and animated vector graphics

Dynamic SVG for Wikimedia projects: Exploring applications, techniques and best practice for interactive and animated vector graphics

Presentation 1 Techniques   1.1 Animation   1.2 Tooltips   1.3 Hyperlinks   1.4 Progressive disclosure 2 Applications   2.1 Interactive timelines   2.2 Simple 3D viewer 3 GIF animation to SVG converter 4 Best practice 5 Cheers

Video

Static slides

Submission no. 131

Title of the submission

Author of the submission

• CMG Lee

Country of origin

United Kingdom of Great Britain and Northern Ireland

Topics

Outreach, Projects, Research, Technical

Keywords

• SVG
• Scalable
• Vector
• Graphics
• dynamic
• interactivity
• animation
• Wikimedia

Abstract

Though Wikimedia projects such as Wikipedia, Wikibooks and Wikiversity are excellent in describing concepts textually and graphically, some material is better explained interactively, such as when comparing members of a set or showing components of a system. We have been traditionally limited to video clips and GIF animations but now that Scalable Vector Graphics (SVG) is becoming well-supported in web browsers, I think it an opportune time to explore ways to enhance articles with dynamic SVG.

JavaScript or ECMAScript allow almost limitless interactivity, but uploads with it are barred for security reasons. Fortunately, SVG provides two other techniques for interactivity and animation: Synchronized Multimedia Integration Language (SMIL) and Cascading Style Sheets (CSS), each of which has its pros and cons.

I have explored applications, techniques and best practice for the last two years and contributed over 300 SVGs, some animated and interactive, and aim to create demonstrations and tutorials to allow users to create their own dynamic content. The specific areas of interactivity and animation I have identified are progressive disclosure, interactive timelines, tooltips, hyperlinks, and a simple 3D object viewer.

I believe the above Wikimedia projects stand to gain if I am given the opportunity to present my work at Wikimania 2016 to raise awareness in the community and meet potential collaborators.

Please see my proposal and samples of my work at http://en.wikipedia.org/wiki/User:Cmglee/Dynamic_SVG_for_Wikimedia_projects

Result

Accepted

Interested attendees and comments

Interested attendees:

• Sebastian Berlin (WMSE) (talk) 09:23, 17 June 2016 (UTC)
• --Dyolf77 (talk) 00:40, 20 June 2016 (UTC)
• Dschwen (talk) 08:42, 23 June 2016 (UTC)
• --MB-one (talk) 10:34, 23 June 2016 (UTC)
• --Tobias1984 (talk) 21:14, 24 June 2016 (UTC)
• --Gikü (talk) 14:25, 25 June 2016 (UTC)
• Vitor Mazuco (talk) 17:28, 7 July 2016 (UTC)