How I Made a Generator for SVG Loaders With Sass and SMIL Options

This article details the creation of an SVG loader generator offering both SMIL and Sass animation options. The project, born from a confluence of learning experiences, provides a versatile tool for generating customizable SVG loaders.

Genesis of the Generator

Three key factors inspired the development:

1. Sarah Drasner's "SVG Animations"

The author's initial exposure to Sass loops came from Sarah Drasner's book, specifically the chapter on animating data visualizations using Sass functions to stagger animations. This sparked an interest in the possibilities of Sass loops for animation.

2. A Loader Replication Request

A request to replicate an Apple-style loader provided a practical application for the newfound knowledge. The author implemented a Sass loop to efficiently manage the animation delays:

@for $i from 1 to 12 {
  .loader:nth-of-type(#{$i}) {
    animation: 1s $i * 0.08s opacityLoader infinite;
  }
}
@keyframes opacityLoader {
 to { opacity: 0; }
}

This concise Sass code achieves the same result as a much longer equivalent in vanilla CSS:

.loader:nth-of-type(1) {
  animation: 1s 0.08s opacityLoader infinite;
}
.loader:nth-of-type(2) {
  animation: 1s 0.16s opacityLoader infinite;
}

/* ... */

.loader:nth-of-type(12) {
  animation: 1s 0.96s opacityLoader infinite;
}
@keyframes opacityLoader {
  to { opacity: 0; }
}

3. A Gallery Idea

The combination of Sass loop proficiency and the need for a loader led to the concept of a loader generator, addressing a perceived gap in readily available online resources.

Dual Animation Output: SMIL and Sass

Initial development challenges with Sass output led to the inclusion of SMIL animation as an alternative. However, both options were ultimately integrated, despite the occasional divergence in output.

SMIL vs. CSS/Sass: Key Differences

The development process highlighted several key distinctions:

• Resource Independence: SMIL animates directly within the SVG markup, unlike CSS or Sass.
• Image Embedding: SMIL animations persist when the SVG is used as an image or background.
• Animation Fluidity: SMIL animations often appear smoother, though the precise reason remains unclear.
• Animation Chaining: additive="sum" in SMIL adds animations sequentially, while CSS/Sass prioritizes the last animation declaration for conflicting properties.
• Transform Handling: Transformations required a workaround in Sass to achieve parity with SMIL's behavior, necessitating the use of <g></g> elements to encapsulate shapes.

Technology Stack: Vue.js and Nuxt.js

The project leverages Vue.js for its component-based architecture, intuitive data binding, and ease of handling HTML and SVG. Nuxt.js provides a streamlined development environment with features like automatic routing and SEO optimization.

Example Loader Usage

The generator's flexibility allows for diverse integration methods:

• SMIL SVG as Background Image: Download the generated SVG and use it as a CSS background image.
• Direct HTML Embedding: Embed the generated SVG code directly into the HTML.
• Sass Loop Integration: Use the generated Sass loop to animate the inline SVG.

Ongoing Development and Future Enhancements

Future plans include adding a third styling option for simpler, single-element SVG manipulation, addressing challenges in handling custom animation parameters and improving code clarity. The open-source nature of the project welcomes contributions and feedback.

The project's journey, initiated by a simple Sass loop, showcases the power and versatility of SMIL animations, despite past deprecation concerns. While browser support should be checked (using resources like Caniuse), the current situation indicates continued viability. Detailed browser support tables are omitted here for brevity.

The above is the detailed content of How I Made a Generator for SVG Loaders With Sass and SMIL Options. For more information, please follow other related articles on the PHP Chinese website!