SVG: Conclusions (for now)
This series has barely begun to scratch the surface of what you can do with SVG. As much SVG as we've covered, We've barely scratched the surface.
There are things like the GSAP library that I deliberately did not cover because I wrote about it before and because I don't want to push yet another third party library into my codebase.
The list below shows links to tutorials and examples of things that I've either used as inspiration or would like to play with at a later time.
If you have comments, criticisms or ideas for further projects, feel free to contact me on twitter at elrond25.
I look forward to hearing from you :)
Links and resources #
-
Filters
-
Clipping and masks
- Clippy
- CSS Masking (uses SVG to generate the mask)
-
Compositing
- Compositing Digital Images, T. Porter and T. Duff. SIGGRAPH '84 Conference Proceedings, Association for Computing Machinery, Volume 18, Number 3, July 1984.
-
Animations
- Interactive Data Visualization: Animating the viewBox
- GSAP + SVG for Power Users: Motion Along A Path
- GSAP + SVG for Power Users 2: Complex Responsive Animation
- Snap SVG
- Communicating Animation
- 5 steps for mastering web animation
- Animating Clipped Elements In SVG
- How I stopped worrying and learned to animate SVG
- The Illusion Of Life: An SVG Animation Case Study
- Creating Cel Animations With SVG
- Animated line drawing in SVG
-
The Web Animations API: One Animation API to rule them all
-
Books
- Practical SVG — A Book Apart
- SVG Essentials - Second Edition — O'Reilly
- Using SVG with CSS3 and HTML5 — O'Reilly
- SVG Colors, Patterns & Gradients — O'Reilly
- SVG Animations — O'Reilly
-
Other links
-
Codepen Examples (not all examples are created with SVG but they provide good ideas and examples of how to use animations)
