filtered.ink: Creating Dynamic Illustrations with SVG Filters

Document Title

filtered.ink: Creating Dynamic Illustrations with SVG Filters

Document Information

• Domain: Human-Computer Interaction, Graphics, Dynamic Illustration Tool Design
• Keywords: Dynamic Illustration, SVG, Animation, Vector Graphics, Dynamic Textures, Node Graph Interface, Creativity Tools
• Conference: CHI 2023 - ACM Conference on Human Factors in Computing Systems
• Authors: Tongyu Zhou, Connie Liu, Joshua Kong Yang, Jeff Huang

Research Background and Problem

• Background:
  • Dynamic illustrations can capture fleeting impressions of time by combining static backgrounds with localized animated elements. However, traditional raster formats like GIFs or videos have resolution limitations, making them unsuitable for large-screen displays or detailed editing.
  • Vector graphics formats such as SVG offer advantages like pixel-free scaling and post-editing capabilities, but tools supporting dynamic textures and animations in SVG are insufficient.
• Problem:
  • Creating dynamic illustrations in SVG format has a high barrier to entry, requiring programming knowledge and lacking intuitive editing tools. Compared to raster tools, vector tools face limitations in dynamic textures and artistic expression.
• Importance:
  • Providing artists with tools for dynamic vector illustrations can enhance creative expression and promote the broader adoption of vector graphics in multimedia fields.
• Motivation and Related Work:
  • Existing vector tools, such as Adobe Illustrator and Inkscape, fail to simplify the creation of dynamic textures and animations. Academic tools like DeepSVG focus on automated vector generation but restrict user freedom in expression.
  • Research in dynamic illustration shows that robust tools can quickly generate designs combining static images and animations, but solutions supporting vector illustrations are lacking.

Solution

• Method:
  • Introduced a web application named filtered.ink, which simplifies the construction of SVG filters and animation design through a node graph-based interface and real-time preview.
  • Filters are composed of multiple SVG primitives (e.g., feTurbulence, feColorMatrix) and animation parameters.
• Innovations:
  • Integration and Extension: The system merges drawing and animation into a unified workflow, allowing users to create complex dynamic effects through parameter adjustments and node graph editing.
  • Preset and Remixing: Offers a collection of shareable and remixable filters, enabling users to quickly draw inspiration from community-designed samples.
  • Low Learning Curve: The UI design is inspired by block-based programming, directly displaying the relationship between user operations and graphical effects, reducing the entry barrier.
  • Enhanced Expressiveness: Achieves high-quality, dynamically changing vector illustrations, addressing the lack of tools in this domain.
• Implementation Steps and Techniques:
  • Filter Editor: Provides an intuitive graphical node interface where users manage primitives, parameters, and animations through interactive modules.
  • Drawing Interface: Allows users to draw vector graphics in real-time while incorporating dynamic textures and animation effects.
  • Sharing and Collaboration: Users can upload their designed filters as presets for others to use, fostering creative iteration through remixing.

Research Outcomes

• Specific Results:
  • Designed a complete system and conducted task-based usability studies to analyze the creation process of filter-based dynamic illustrations.
  • Developed a new user workflow model comprising four stages: observe (see), explore (want), re-explore (rewant), and remix.
• Advantages:
  • Supports vector-based dynamic illustration tools, addressing the gap in existing vector tools for dynamic texture and animation design.
  • Operable without technical expertise, balancing intuitiveness and flexibility, significantly lowering the creation barrier.
• Experimental Evaluation Results:
  • Participants expressed richer dynamic effects using the tool, with animation functionality recognized as a key innovation.
  • Users adopted new mental models during usage, learning to rethink their illustrations in terms of time and dynamic representation.
  • Motivation was sparked by immediate examples (e.g., preset filters), with remixing behavior widely observed, inspiring creative ideas.
• Limitations and Future Directions:
  • As an independent platform, UI functionalities (e.g., layers, selection tools) are basic, and users expressed interest in integrating it as a plugin into professional tools.
  • Current platform support for vector dynamic files (e.g., SVG animations) is limited, as social media and publishing websites predominantly support raster formats.
  • Future work could explore long-term usage effects in more complex user scenarios and expand export compatibility to enhance practical applicability.