Creating SVG from ground up
If you've just gotten started, then the first dirty tips to answer your questions (which you might have in mind as a beginner):- Yes, you can import external SVG file/code into your SnapSVG Javascript code
- 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())
Simple SVG Project with SnapSVG, HTML is not the first priority
As you can see from the example above, there is no HTML code available. It starts right into Javascript code with Snap() and canvas size for your svg
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!
