Creating SVG from ground upIf you've just gotten started, then the first dirty tips to answer your questions (which you might have in mind as a beginner):
- SnapSVG can help writing pure SVG code from scratch (yes, for simple SVG, but I don't think this is a proper way to write your big animated SVG project from scratch)
- (my gut tells me) For large SVG project, start SVG project with editor like Adobe Illustrator or Affinity Designer (follow your preferences) then export as SVG file
- Yes, for every tiny movement/animation has to be coded from scratch (no shortcut, so try to reuse code if possible)
- Speed development - utilise handy tool like CodePen to help your development!
Steps required (when you get started):
- (If you plan to start from scratch) Start learning adding shape/line/text into your element
- Animating SVG (mostly achievable by using the ELEMENT.animate())
var poke = Snap(230,230)
Once you are done declaring required elements, the rest of the code is written to style up your elements and properly group related elements for animating purpose.
Why Group Up Elements?
As you animate element, you have to animate related elements together, so grouping them in a "g" makes our job easier to animate them altogether and more useful for chaining a sequence of continuous animations.
Thanks SnapSVG for the great tool!