Easy as one, two, three
1. Pick an SVG graphic
First, either load up a locally saved SVG file by clicking the 'Open SVG' button or copy the SVG markup and click the 'Paste markup' to paste it. The animation will play once, once the graphic loads.
You can change the SVG elements class, background color and the animation type in the sidebar's main panel.
Element class is a utility CSS class assigned to each of the elements inside your SVG. It is used to control the animation of individual elements (e.g. to create a staggered animation effect). Default value is svg-elem.
If the SVG graphic isn't visible due to poor contrast, you can change the main stage background color. This option is here for your convenience (e.g. to see how the SVG graphic looks on your page) and will not change the SVG code or affect it in any way. The default value is dark gray.
You can also change the generated CSS code to use either transitions or animations. The default value is transition.
2. Play
Click the 'Play' toolbar button to see the animation. If you are happy with the result, proceed to the next step. Otherwise, you can tweak various settings in the fill and stroke panels in the sidebar. You can also flip the 'draw / erase' switch in the toolbar to reverse the animation.
3. Copy the code
Once you are happy with everything, click the 'Get Code' toolbar button. Then copy both the SVG and the CSS code and paste it into your editor.
The rest depends on what you want to do. In case of an intro animation, you can simply assign the active to the SVG on page load event.
Below is a basic example that uses the generated code (CSS transition variant), just to give you an idea (try clicking the 'erase' and 'draw' buttons):
You could also use one of the popular JS libraries to trigger the animation on scroll or you could come up with a custom solution.
General information
SVG Artista does its best to sift through the SVG code and find all shapes and paths that have strokes and/or fills set to anything other than none. In the case of strokes, stroke-width property needs to be greater than 0.
If it does find them, it loads the graphic and tries animating it using the default options. Most of the time it works fine without the extra work on your part. There are certain things however that you need to pay attention to when it comes to animating SVG with CSS.
The first thing to do is to check whether your SVG is properly formatted. Make sure you have at least one stroke if you want to animate strokes. Same with fills, it would be difficult to animate them if there are none :)
Optimizing your SVG files would also be a good idea, regardless of which editor you use. Be careful, however, as optimizing SVG can sometimes break the animation.
If you would like to learn more about how to prepare your SVGs, you might find the following articles interesting: