☰

¿Es posible incrustar o vincular un documento SVG de Inkscape dentro de otro?

tag-icon • tag-icon svg inkscape
¿Es posible incrustar o vincular un documento SVG de Inkscape dentro de otro?

Me gustaría tomar un archivo SVG pequeño (creado con Inkscape) e incrustarlo o vincularlo a otro (más grande). Cuando lo muestra un navegador, espero ver el más pequeño aparecer dentro de algún marcador de posición del más grande.

¿Es posible?

Respuesta1

Prefiero <use>que <image>este último se represente con una resolución fija y no se escale como lo hacen los objetos vectoriales normales en el documento actual.http://www.w3.org/TR/SVG11/struct.html#ImageElement

Pero el elemento <use>no puede hacer referencia a archivos SVG completos, su xlink:hrefatributo es una referencia a un elemento/fragmento dentro de un documento SVG (http://www.w3.org/TR/SVG11/struct.html#UseElement). El elemento 'uso' puede hacer referencia a cualquier recurso local o no local.

ejemplo:

MyLibrary.svg:
<svg (...)>
        <rect x="0" y="0" width="200" inkscape:label="upper-left-blue"
              style="fill:#729fcf;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="upper-left-blue" height="200"/>

UseParts.svg:
        <use x="0" y="0" width="400" xmlns:xlink="http://www.w3.org/1999/xlink"
             xlink:href="MyLibrary.svg#upper-left-blue" xlink:type="simple"
             xlink:actuate="onLoad" height="400" id="use8793" xlink:show="embed"/>

La compatibilidad con esa función puede variar para diferentes editores/visores de SVG, hasta donde yo sé, debería funcionar (al menos) en Inkscape, Firefox y Batik.

Respuesta2

Utilizar elimageelemento y haga referencia a su archivo SVG. Para divertirte, guarda 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>

Fuente:https://stackoverflow.com/questions/5451135/embed-svg-in-svg/5451238#5451238

información relacionada