note: if you are looking to do more with SVG than animate the drawing of text: I highly suggest checking out this article to find an SVG framework with built in tools that suit your needs.

=======

#Animate Text with SVG Paths This technique allows you to animate the drawing of text via converting text to SVG paths.

Preview:

SVG path animation is a trending technique in web-design allowing designers to draw simple and elegant icons (as seen here). Now, designers can easily apply SVG animations to text.

1. Download and Install the vector graphics editor, Inkscape.
2. Open a new Inkscape Document.
3. Create your desired Text in the Top-left corner of the document .
4. Select your text with selection tool.
5. From the Path menu, select Object --> Path
6. Save as SVG
7. Open SVG in a text-editor and remove extraneous code (seen below).

See index.html for an example of what SVG code is needed. There is A LOT so cleaning it up makes life easier.

1. Make a div that wraps the SVG element. Give the div an id and add the following CSS to your div:

		#YOUR-SVG-CONTAINER { //ADJUST NAME TO MATCH YOUR ID
   		position: relative;
   		width: 360px;   //ADJUST WIDTH TO MATCH WIDTH OF YOUR TEXT
   		height: 110px;  //ADJUST HEIGHT TO MATCH HEIGHT OF YOUR TEXT
   		margin: 40vh auto 0 auto;
   	}

2. Give your SVG element an id and add the following CSS to your SVG element

#svg-canvas { //ADJUST NAME TO MATCH YOUR ID
   		position: relative;
   		width: 360px; //ADJUST WIDTH TO MATCH WIDTH OF YOUR TEXT
   		height: 110px; //ADJUST HEIGHT TO MATCH HEIGHT OF YOUR TEXT
   	}

3. Make each path element look like:

<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"

4. Add the following CSS to your stylesheet: This CSS will take care of animating the text being drawn. A concise but thorough explanation of this code can be found here

.title {
		stroke-dasharray: 500;
				stroke-dashoffset: 500;
		animation: draw 5s linear forwards;
		-webkit-animation: draw 8s linear forwards;
		-moz-animation: draw 8s linear forwards;
		-o-animation: draw 8s linear forwards;
		font-weight: bold;
		font-family: Amatic SC;
		-inkscape-font-specification: Amatic SC Bold"
		}
		@keyframes draw {
		to {
			stroke-dashoffset: 0;
			}
		}
		@-webkit-keyframes draw {
		to {
			stroke-dashoffset: 0;
			}
		}
		
		@-moz-keyframes draw {
		to {
			stroke-dashoffset: 0;
			}
		}
		@-o-keyframes draw {
		to {
			stroke-dashoffset: 0;
			}
		}

this link will help you install Inkscape on Mac OS X.