How to make letters in SVG to be animatable individually?
I have a logo that needs to be animated, most of the logo consists of shapes which of course I can draw in illustrator but then at the bottom of the logo there is the following text:
In a graphic text editor if I go ahead and type those letters, I get something like:
<text id="XMLID_1_" transform="matrix(1 0 0 1 417 293)" class="st0 st1">FairBridge</text>
That's not really what I want , I would really like each letter to be animatable, so do I have to draw the letters too? That would be quite a difficult task !! How exactly I go about making each letter animatable and at the same time part of the SVG?
P.S. : I know this question in a way pertains to graphic design, but since it takes a very beginner level of understanding and also since eventually I want the logo to be used with CSS-3 animation, I thought it would be fit to ask on SO rather than a graphic design forum.
<svg> <text x="30" y="30">FairBridge <animate attributeName="dy" from="0 0 0" to="0 -20 20" dur="1s" repeatCount="indefinite"/> </text> </svg>