Gostaria de pegar um pequeno arquivo SVG (criado com o Inkscape) e incorporá-lo ou vinculá-lo a outro (maior). Quando exibido por um navegador, espero ver o menor aparecer dentro de algum espaço reservado para o maior.
É possível?
Prefere <use>
a <image>
como o mais tarde é processado em uma resolução fixa e não escala como objetos regulares vetor fazer no documento atual. http://www.w3.org/TR/SVG11/struct.html#ImageElement
Mas o elemento <use>
não pode fazer referência a arquivos SVG inteiros, seu xlink:href
atributo é uma referência a um elemento / fragmento em um documento SVG ( http://www.w3.org/TR/SVG11/struct.html#UseElement ). O elemento 'use' pode fazer referência a qualquer recurso local ou não local.
exemplo:
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"/>
O suporte a esse recurso pode variar para diferentes editores / visualizadores de SVG, tanto quanto eu sei que deve funcionar (pelo menos) no Inkscape, Firefox e Batik.
Use o
image
elemento e faça referência ao seu arquivo SVG. Por diversão, salve o seguinte comorecursion.svg
:Fonte: https://stackoverflow.com/questions/5451135/embed-svg-in-svg/5451238#5451238
fonte