Question

I have a path I’ve created in Illustrator and saved as an SVG.

Now I want to programmatically place it at different sizes and coordinates on a large canvas.

Say I’ve got this image:

_{(source: omgtldr.com)}

How would I reproduce that same image in different places and sizes in one SVG file, like this:

_{(source: omgtldr.com)}

for example, one version shrunk by 20% at coordinates x,y; another enlarged by 30% at coordinates a,b and so on.

Please assume I’m going to be OK with the programming part, I’m comfortable working with XML files. It’s the SVG parts I don’t understand.

Answer 1

You need the transform attribute. You can move your paths with translate and resize them with scale.