title: Creating multiple repeating shapes
body: <p>I have the following code which creates me rectangle that contains some text. I need to create multiple addressable instances of this rectangle so that I can individually animate them. Each rectangle needs to contain a different text label.</p>
  
  <pre><code>var s = Snap(800, 600);
  var block = s.rect(50, 50, 100, 100, 5, 5);
  
  block.attr({
      fill: "rgb(236, 240, 241)",
      stroke: "#1f2c39",
      strokeWidth: 3
  });
  
  var text = s.text(70, 105, "Hello World");
  text.attr({
      'font-size':20
  });
  
  block.attr({
      width: (text.node.clientWidth + 50)
  });
  </code></pre>
  
  <p>Rather than repeating my code I would like to create a function that accepts the text and the coordinates for placing the rectangle. What is the best way to achieve this ? Is this capability already included within snap.svg ?</p>
  
  <h2>UPDATE</h2>
  
  <p>I created another plugin, this time to import and scale SVG images. Is this the best approach to take for this ? Is the only way to scale the image using the `transform attribute ?</p>
  
  <p>Import SVG plugin example.</p>
  
  <pre><code>Snap.plugin( function( Snap, Element, Paper, global ) {
      Paper.prototype.importImage = function( x, y, scale ) {
          var ig1 = s.group();
          var image = Snap.load("../package.svg", function ( loadedFragment ) {
              ig1.attr({transform: 'translate(' + x + ',' + y + ') scale('+ scale +')'});
              ig1.append( loadedFragment);
          } );
          return ig1;
      }
  });
  </code></pre>