Menu
I'm working on some graphics for a small game. The graphics will be SVG and will be mostly tile-based (think Legend of Zelda: Link to the Past for SNES). I've drawn a small grass tile and would like to copy this NxM times over a whole field. Doing this in Inkscape or another GUI SVG-editing tool results in a file that's over 3.5MB, larger than a 32-bit bitmap of the same dimensions.
I'd like to know if it's possible to define a "grass tile" object of some kind, and instead of copying it to each spot in my field, simply reference it with the appropriate coordinates. I realize that this will still result in the scene taking up the same amount of memory when loaded, but it will mean much smaller files for storage on disc, and hopefully it will mean easier editing since in this case, if I want to change, for example, the color of my grass, I only have to change my archetype object rather than make the change and then re-copy the new tile over the whole field.
I have done about half a dozen different searches for various keywords that I thought might help, but nothing seems to do what I'm looking for. I thought to use the 'xlink:href' attribute, as I see this is used in the tags to define the color palette first, and then reference it later on in a separate tag containing the transform data.
I tried using something like:
<path id="grassyPatch" d="M 3.3310392e-7,608 31.993091,624 63.986183,608 31.993091,592 z" style="..." />
And then to copy it with something like:
<path id="grass-copy1" xlink:href="#grassyPatch" transform="translate(32,-32)" />
<path id="grass-copy2" xlink:href="#grassyPatch" transform="translate(32,-64)" />
etc. in order to copy it several times to new locations. Appreciate if anyone could let me know if this is possible. I'm not holding out hope so far, so if you also know it to be impossible, please let me know as well so I can stop wasting my time.
Thanks!
543
Grouping elements with the elementThe <symbol> element is similar to the group element <g> —it provides a way to group elements together.
A path is defined in SVG using the 'path' element. The basic shapes are all described in terms of what their equivalent path is, which is what their shape is as a path. (The equivalent path of a 'path' element is simply the path itself.)
As mentioned in the other comment, the transform attribute on the g element is what you want. Use transform="translate(x,y)" to move the g around and things within the g will move in relation to the g .
You're almost there, the element you're looking for to do copying/cloning is <use>
<use xlink:href="#grassyPatch" transform="translate(32,-32)" />
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
