¿Incrustar SVG en SVG?

Tengo un documento SVG y me gustaría incluir una imagen svg externa dentro de él, es decir, algo como:

 

(“objeto” es solo un ejemplo: el documento externo será SVG en lugar de xhtml).

¿Algunas ideas? ¿Esto es posible? ¿O lo mejor para mí es simplemente darle una bofetada al logo.svg xml en mi documento SVG externo?

Usa el elemento de la image y haz referencia a tu archivo SVG. Para divertirse, guarde lo siguiente como recursion.svg :

     

O bien, puede incrustar svg infantil en SVG padre de esta manera:

    ...    

manifestación:
http://hitokun-s.github.io/demo/path-between-two-svg.html

Vale la pena mencionar que cuando insertas SVG en otro SVG con:

  

entonces el SVG incrustado toma una forma rectangular con dimensiones determinadas.

Es decir, si su SVG incrustado es un círculo o una forma que no sea un cuadrado, entonces se convierte en un cuadrado con transparencia. Por lo tanto, los eventos del mouse quedan atrapados en ese cuadrado incrustado y no llegan al SVG principal. Ten cuidado con eso.

Un mejor enfoque es usar un patrón. Para completar una forma, ya sea un círculo, un cuadrado o incluso un camino.

      

Luego usa el patrón así:

  

¡Ahora los eventos de tu mouse no se quedan atascados en cuadros transparentes de imágenes!

Necesitaba incrustar un SVG en mi SVG pero también cambiar su color y aplicar transformaciones.

Solo Firefox admite el atributo “transformar” en los elementos svg nesteds. Cambiar el color de tampoco es posible. Entonces, se necesitaba una combinación de ambos.

Lo que terminé haciendo fue lo siguiente

    

Esto funciona al menos en Firefox, Chrome e Inkscape.

Esto se comporta de la misma manera que la svg secundaria en la respuesta svg principal, con la excepción de que ahora puede aplicar transformaciones en ella.

Descubrí que el uso de la etiqueta daba un render de baja calidad del archivo incrustado. Sin embargo, la siguiente técnica funcionó (para incrustar un archivo SVG dentro de un archivo SVG, no necesariamente para representar en una página HTML):

  • Edite el archivo SVG en un editor de texto.

  • Encuentra el final de los metadatos:

       
  • Inserta esta línea después de esa etiqueta de grupo:

      
  • En este caso, incluimos OTHERFILE.svg en el archivo y todo en layer1 (la primera capa y la predeterminada).

  • Guarde esto y luego abra el archivo en Inkscape.

Esta técnica es útil para tener un fondo o logotipo estándar en cada página. Al ponerlo primero en el archivo, se representará primero (y, por lo tanto, en la parte inferior). También puede bloquearlo agregando este atributo:

 sodipodi:insensitive="true" 

En otras palabras: