xml - manipulation - ¿Incrustar SVG en SVG?

svg on img tag

Question

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

<object data="logo.svgz" width="100" height="100" x="200" y="400"/>

("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?

Answer 1

Descubrí que el uso de la etiqueta <image> 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:

  </metadata>
    <g
     id="layer1"
     inkscape:groupmode="layer"
     inkscape:label="Layer 1">

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

  <use xlink:href="OTHERFILE.svg#layer1" y="0" x="0" />

• 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:

<use xlink:href="OTHERFILE.svg#layer1" sodipodi:insensitive="true" y="0" x="0" />

Answer 2

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 anidados. Cambiar el color de <imagen> tampoco es posible. Entonces, se necesitaba una combinación de ambos.

Lo que terminé haciendo fue lo siguiente

<svg>
  <image x="0" y="0" xlink:href="data:image/svg+xml;base64,[base64 of nested svg]"></image>
</svg>

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.

Answer 3

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

<svg>
    <g>
        <svg>
            ...
        </svg>
    </g>
</svg>

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

Answer 4

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

<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="-50" cy="-50" r="30" style="fill:red" />
  <image x="10" y="20" width="80" height="80" xlink:href="recursion.svg" />
</svg>

Answer 5

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

<image x="10" y="20" width="80" height="80" xlink:href="image.svg" />

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.

<defs>
 <pattern id="pat" x="0" y="0" width="500" height="500" patternUnits="userSpaceOnUse">
   <image x="0" y="0" width="500" height="500" xlink:href="images/mysvg.svg"></image>
 </pattern>
</defs>

Luego usa el patrón así:

<circle cx="0" cy="0" r="250" fill="url(#pat)"></circle>

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