Incorporer SVG dans SVG?

J'ai un document SVG et j'aimerais y inclure une image svg externe, c'est-à-dire quelque chose comme:

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

("objet" est juste un exemple - le document externe sera SVG plutôt que xhtml).

Des idées? Est-ce seulement possible? Ou est-ce que la meilleure chose pour moi est de simplement gifler le xml logo.svg dans mon document SVG externe?

Utilisez l' imageélément et référencez votre fichier SVG. Pour le plaisir, enregistrez les éléments suivants sous recursion.svg:

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

Ou vous pouvez en fait incorporer un svg enfant dans un svg parent comme ceci:

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

démo:
http://hitokun-s.github.io/old/demo/path-between-two-svg.html

Il est à noter que lorsque vous intégrez des SVG dans un autre SVG avec:

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

alors le SVG incorporé prend une forme rectangulaire avec des dimensions données.

Autrement dit, si votre SVG incorporé est un cercle ou une forme autre qu'un carré, il devient alors un carré avec transparence. Par conséquent, les événements de souris sont piégés dans ce carré incorporé et n'atteignent pas le SVG parent. Attention à ça.

Une meilleure approche consiste à utiliser un modèle. Pour remplir une forme, soit un cercle, un carré ou même un tracé.

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

Ensuite, utilisez le modèle comme ceci:

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

Désormais, les événements de votre souris ne restent pas coincés dans des carrés d'image transparents!

J'ai trouvé que l'utilisation de la <image>balise donnait un rendu de mauvaise qualité du fichier intégré. Cependant, la technique suivante a fonctionné (pour incorporer un fichier SVG dans un fichier SVG - pas nécessairement pour le rendu sur une page HTML):

• Modifiez le fichier SVG dans un éditeur de texte.

• Trouvez la fin des métadonnées:

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

• Insérez cette ligne après cette balise de groupe:

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

• Dans ce cas, nous incluons OTHERFILE.svg dans le fichier, et tout le layer1 (le premier calque par défaut).

• Enregistrez-le, puis ouvrez le fichier dans Inkscape.

Cette technique est utile pour avoir un arrière-plan ou un logo standard sur chaque page. En le mettant en premier dans le fichier, il sera rendu en premier (et donc en bas). Vous pouvez également le verrouiller en ajoutant cet attribut:

sodipodi:insensitive="true" 

En d'autres termes:

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

Remarque xlink:hrefest obsolète , utilisez simplement à la hrefplace, par exemple

<svg viewBox="0 0 512 512">
  <image width="512" height="512" href="external.svg"/>
</svg>

viewBox, widthet les heightvaleurs (dans cette réponse) sont simplement à des fins d'illustration, ajustez la mise en page en conséquence (en savoir plus ).

Depuis <image> partage des spécifications similaires à <img>, ce qui signifie qu'il ne prend pas en charge le style SVG, comme mentionné dans la réponse de Christiaan . Par exemple, si j'ai la ligne css suivante qui définit la couleur de la forme svg pour qu'elle soit la même que la couleur de la police,

svg {
  fill: currentColor;
}

Le style ci-dessus ne s'appliquerait pas s'il <image>est utilisé. Pour cela, vous devez utiliser <use>, comme indiqué dans la réponse de Nick .

La note id="layer1"et les href="OTHERFILE.svg#layer1"valeurs dans sa réponse sont obligatoires .

Cela signifie que vous devez ajouter l' idattribut au fichier svg externe, vous devez donc héberger le fichier svg externe (modifié) par vous-même (votre site Web) ou ailleurs. Le fichier svg externe résultant ressemble à ceci (remarquez où je mets le id):

<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="..."/>
</svg>

La valeur de id peut être n'importe quoi, j'utilise "logo" dans cet exemple.

Pour intégrer ce svg,

<svg viewBox="0 0 512 512">
  <use href="edited-external.svg#logo"/>
</svg>

Si vous utilisez le svg ci-dessus en ligne dans votre html, vous n'avez pas besoin de l'attribut xmlns (du moins ce que je sais de svgo ).

J'avais besoin d'intégrer un SVG dans mon SVG mais aussi de changer sa couleur et d'appliquer des transformations.

Seul Firefox prend en charge l'attribut "transform" sur les éléments svg imbriqués. Changer la couleur de <image> n'est pas non plus possible. Une combinaison des deux était donc nécessaire.

Ce que j'ai fini par faire était le suivant

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

Cela fonctionne au moins sur Firefox, Chrome et Inkscape.

Cela se comporte de la même manière que le svg enfant dans la réponse svg parent, à l'exception du fait que vous pouvez maintenant y appliquer des transformations.