Евгений

через фильтр:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 200 200">
  <title>svg arrow with dropshadow</title>
  <desc>An svg example of an arrow shape with a dropshadow filter applied. The dropshadow filter effect uses feGaussianBlur, feOffset and feMerge.</desc>
  <defs>
    <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
      <feOffset dx="2" dy="2" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>
  <polygon points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056" fill="#EEEEEE" filter="url(#dropshadow)"/>
</svg>

общий принцип - применяются контрольные точки анимации... т.е. чтобы превратить звезду в книгу - надо нарисовать зведу и книгу... вот пример - тут один набор точек и их двигают просто

но! тема довольно хитрая и так просто имхо не объяснишь вот статейка - там много примеров с кодом...

вот пример трансформации - там в JS убери вставку gif'а и замедли анимацию <animate dur='xxx'> увидишь...