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.
Tool, Web, SVG, Interactivity, Animations, Data, Responsive, Icons, States
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.
Aside from drawing, the ability to add animations and interactivity to SVG.
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.
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.
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.
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.
- 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
A glimpse of all the cool SVG features built into the tool.
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.