SVG Interact

Project Brief

Static icons are out; animated ones are in. SVG is the best you can get when it comes to using scalable interactive assets anywhere - on a mobile app, a smart TV interface, a game or even your personal web page. Most tools treat SVG as a single graphic component to be embedded into a web page. However, with introduction of recent HTML5 standards, support for inline SVG and the ability to integrate SVG with CSS, numerous opportunities have opened up to create richer experiences for the users. The goal of this project was to design a tool that could leverage on recent SVG technologies to help create smart, responsive and interactive graphics for the modern web.

img04

Tags

Tool, Web, SVG, Interactivity, Animations, Data, Responsive, Icons, States

Summary

Browser-based tool to create smart, responsive and interactive SVG graphics for the modern web.

Areas for Design Intervention

Competitive landscape and shortcomings of existing SVG tools in the market.

Today, adding interactivity to SVG graphics can only be achieved by manually writing code. It is thus a very time consuming process. While a few tools support SVG drawing; they do not draw in SVG, allowing you only to export to SVG. They are not constrained by the browser and, hence, none of them have solved the problem of interactivity while outputting good code. Moreover, with the introduction of recent HTML5 standards, support for inline SVG, and the ability to integrate SVG with CSS; numerous opportunities have opened up to create richer experiences for the users. The SVG DOM is directly accessible and you can make the SVG interact with any part of the website as a group or as individual elements. You can apply CSS animations and transitions on SVG elements and attributes. Also, a tool that draws SVG in the browser from scratch has a unique advantage of adding interactivity to it unlike conventional desktop tools.

img04

Aside from drawing, the ability to add animations and interactivity to SVG.

Nearly every graphical property, such as the element’s shape, stroke, fill, and position, can be declaratively animated in SVG. You can use interpolated time-based animations or frame-based animations to transform any SVG element in a webpage. Moreover, with the ability to add SVG inline, you can make full use of the DOM structure. Web animations and interactivity can now be enhanced with the goodness of HTML5, CSS3, JavaScript, and the SMIL model. Interactivity can also be enhanced using scripting and JavaScript libraries, such as snap.svg.

img04

The potential to make web graphics context-aware, responsive, and intelligent.

We have a plethora of devices and resolutions all around us today. There is a need to create content that not only scales at different sizes but also adapts its detail to its resolution. Just because SVG is scalable doesn’t mean it is legible at all sizes. The CSS property, ‘visibility: hidden’ and media queries can be used to smartly create context-aware responsive graphics. You can also add logic to graphics, such that the graphics change their properties based on the direction of the mouse, If-then logic, the time of day, etc. Parallel and sequential conditions can also be added to make SVG intelligent.

img04

Data integration with SVG for better infographic and mathematical graphic generation.

SVG is XML-based. This creates numerous opportunities to dynamically modify graphics based on data. Mathematical equations can be used to generate Spirographs. Complex dynamic patterns can be created using automation. Customizable infographics can also be achieved to make distribution, division, and comparison charts instead of the standard pie and bar charts.

img04

Workflows

SVG Interact has 4 panels - Graphics, Styles, Interaction and Data. You can add states for default, hover and click for each of the SVG groups.Properties for each graphics like color, stroke, gradient, visibility, transform etc can be modified for each element across various breakpoints too.

img04

Default state of the application

img04

User adds the phone reciever to the Mobile state with media query max-width:480px

img04

User creates a new Tablet state with media query max-width:786px

img04

User customises the Tablet state

img04

User creates a new Desktop state with media query min-width:1200px

img04

He adds a hover state for the Desktop breakpoint

img04

Likewise, user adds all states and media queries to his SVG graphics

img04

The DOM of the SVG graphics is exposed to make further tweaks.This mock-up has an extensive list of all the style attributes supported by the tool.

img04

This mock-up highlights the interaction panel in the tool.

img04 img04

How does it Work ?

The below video is a working prototype of the work in action along with a brief overview of the value proposition.

    A glimpse of all the cool SVG features built into the tool.

  • Creation of gradients and patterns
  • Generation of tessellations by repeating an elemet on a path
  • Making a 2D graphics 3D
  • Usage of web components in SVG
  • Editing a smart polygon (Eg. star) to create interesting shapes
  • SMIL animations such as move on path and draw a path
  • Adding equations to help create see-saw, trajectory and parabolic animations
  • Transformations like move, skew, rotate and scale
  • Data Visualization and Info graphics
  • Use of image maps and image filters
  • Use of media query to intelligently scale a graphics and hide details
  • Automation of a Spirograph to help draw interesting patterns on the fly

Expansion Opportunities

SVG Interact has good expansion opportunities in the consumer space as well. Services like Iconfinder, Flaticon, Findicons etc allow users to either purchase ready-made icons, hire a designer to get their icons customized or purchase the Ai files to customize it themselves. SVG Interact will make the process more user-friendly where attributes like colour, stroke, size, format etc can be batch customized and downloaded. A user can also upload his own icons to our service in any format, customize it, add animations and then export them as SVG.

img04 img04