SVG: ¿Puedo hacer referencia al mismo elemento/grupo/ruta en lugar de copiarlo varias veces?

Question

Estoy trabajando en algunos gráficos para un juego pequeño. Los gráficos serán SVG y se basarán principalmente en mosaicos (piense en Legend of Zelda: Link to the Past for SNES). Dibujé un pequeño mosaico de césped y me gustaría copiar este NxM veces en un campo completo. Hacer esto en Inkscape u otra GUI La herramienta de edición SVG da como resultado un archivo que es más de 3.5MB, más grande que un mapa de bits de 32 bits de las mismas dimensiones.

Me gustaría saber si es posible definir un objeto de "hierba" de algún tipo, y en lugar de copiarlo en cada punto de mi campo, simplemente haga referencia a él con las coordenadas adecuadas. Me doy cuenta de que esto dará lugar a que la escena ocupe la misma cantidad de memoria cuando se cargue, pero significará archivos mucho más pequeños para el almacenamiento en el disco, y con suerte significará una edición más fácil ya que en este caso, si quiero cambiar, por ejemplo, el color de mi césped, solo tengo que cambiar mi objeto arquetipo en lugar de hacer el cambio y luego volver a copiar el nuevo mosaico en todo el campo.

He hecho aproximadamente media docena de búsquedas diferentes de varias palabras clave que pensé que podrían ayudar, pero nada parece hacer lo que estoy buscando. Pensé utilizar el atributo 'xlink: href', ya que veo que esto se usa en las etiquetas para definir primero la paleta de colores y luego hacer referencia a ella más tarde en una etiqueta separada que contiene los datos de transformación.

He intentado utilizar algo como:

<path id="grassyPatch" d="M 3.3310392e-7,608 31.993091,624 63.986183,608 31.993091,592 z" style="..." />

Y luego copiarlo con algo como:

<path id="grass-copy1" xlink:href="#grassyPatch" transform="translate(32,-32)" /> <path id="grass-copy2" xlink:href="#grassyPatch" transform="translate(32,-64)" />

etc con el fin de copiar varias veces a la nueva ubicaciones. Apreciar si alguien me puede decir si esto es posible. No estoy esperando la esperanza hasta el momento, así que si también sabe que es imposible, hágamelo saber para que pueda dejar de perder mi tiempo.

Gracias!

Answer 1

Ya casi ha terminado, el elemento que busca hacer la copia/clonación es <use>

<use xlink:href="#grassyPatch" transform="translate(32,-32)" />

Answer 2

Mencionaste que deseen utilizar herramientas gráficas para lograr esto, así que quería que lo sabe que esto es posible en Inkscape. Debe usar la herramienta Clonar, que está en la barra de herramientas junto a la herramienta Duplicar, o puede presionar Ctrl-D. Cuando lo use, el clon se colocará directamente encima del objeto que está clonando. Simplemente use la herramienta mover para colocarlo donde lo desee.

Inkscape también tiene una opción de "SVG optimizado" en el menú desplegable tipo de archivo del cuadro de diálogo Guardar, que le permitirá reducir el tamaño de archivo del SVG, eliminando información extraña y reduciendo la precisión.