Me gustaría tomar un pequeño archivo SVG (creado con Inkscape) e incrustarlo o vincularlo en otro (más grande). Cuando se muestra en un navegador, espero ver aparecer el más pequeño dentro de algún marcador de posición del más grande.
¿Es posible?
Prefiero <use>
que <image>
el ú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:href
atributo es una referencia a un elemento / fragmento dentro de un documento SVG ( http://www.w3.org/TR/SVG11/struct.html#UseElement ). El elemento 'use' 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"/>
El soporte de esa función puede variar para diferentes editores / visores SVG, por lo que sé, debería funcionar (al menos) en Inkscape, Firefox y Batik.
Use el
image
elemento y haga referencia a su archivo SVG. Por diversión, guarde lo siguiente comorecursion.svg
:Fuente: /programming/5451135/embed-svg-in-svg/5451238#5451238
fuente