How to make letters in SVG to be animatable individually?

Question

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:

logo 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.

If you want access to the individual letters, place them in an element each – SVG has `tspan` elements for _parts_ of text. — CBroe, Jan 19 '16 at 08:54

score 5 · Accepted Answer · answered Jan 19 '16 at 08:23

You could use animate the dy attribute using SMIL or javascript. Here's an animation of a single letter with no other structural changes.

<svg>
  <text x="30" y="30">FairBridge
    <animate attributeName="dy" from="0 0 0" to="0 -20 20" dur="1s" repeatCount="indefinite"/>
  </text>
</svg>

score 2 · Answer 2 · answered Jan 19 '16 at 06:19

You can use tspan. Split each character and wrap each one in a tspan and animate each character individually.

  <svg width="400" height="400">
    <defs>
    <animate xlink:href="#child1" id="swipe" attributeName="x"
             from="10" to="110" values = "25;120;5" begin="0s" dur="3s" repeatCount   = "indefinite"/>
    <animate xlink:href="#child2" id="swipe2" attributeName="x"
             from="100" to="40" values= "115;320;15" begin="0s" dur="3s" repeatCount   = "indefinite"/>
    <animate xlink:href="#child3" id="swipe3" attributeName="x"
             from="400" to="120" begin="0s" dur="3s" repeatCount   = "indefinite"/>
    <animate xlink:href="#child4" id="swipe4" attributeName="x"
             from="300" to="220" begin="0s" dur="3s" repeatCount   = "indefinite"/>

    </defs>

      <text font-family="Verdana" font-size="45" id="parent" rotate="5,15,25,35,45,55">
        <tspan id="child1" rotate="100, 30,20" fill="orange">
          T
        </tspan>
        <tspan id="child2" rotate="130,0,30" fill="yellow">
          e
        </tspan>
        <tspan id="child3" fill="blue" x="40" y="90">
          x
        </tspan>
        <tspan id="child4" rotate="-10" fill="blue">
          t
        </tspan>
      </text>

  </svg>

Ref:

SVG - Text

SVG - Animation

Seems like a lot of work compared to animatin dy values. – Robert Longson Jan 19 '16 at 08:24 — Robert Longson, Jan 19 '16 at 08:24

score 1 · Answer 3 · edited Jan 24 '16 at 21:00

1

You could have each letter as a separate <svg:text /> element, correctly positioned and with their own id - to reference them in CSS or JS

edited Jan 24 '16 at 21:00

Mr Lister

45,515
15
108
150

answered Jan 19 '16 at 05:48

Carlo

2,103
21
29

i have seen that approach , but would't prefer it . – Alexander Solonik Jan 19 '16 at 05:56
1

did you downvote him because you don't like that approach? Because it is the answer, whether you like it or not, and downvoting is for things that are not useful, not things you don't want to do. So...upvoted for the logical answer. – Mat Taylor Jan 19 '16 at 06:02
Seems like a lot of work compared to animating dy values. – Robert Longson Jan 19 '16 at 08:25

How to make letters in SVG to be animatable individually?

3 Answers3

Linked