web-dev-qa-db-fra.com

Intégrer 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 bien est-il préférable pour moi d'insérer simplement le logo xv dans mon document SVG externe?

xmlsvgembedding
68
Marcin

Utilisez l’élément image et référencez votre fichier SVG. Pour le plaisir, enregistrez ce qui suit sous le nom 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>
102
Phrogz

Ou vous pouvez réellement intégrer l'enfant svg dans le parent svg comme ceci: 

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

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

68
toshi

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 intégré prend une forme rectangulaire avec des dimensions données.

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

Une meilleure approche consiste à utiliser un motif. Pour remplir une forme, un cercle, un carré ou même un chemin.

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

Maintenant, vos événements de souris ne restent pas coincés dans des carrés d'image transparents!

26
oabarca

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

Seul Firefox supporte l'attribut "transform" sur les éléments imbriqués svg. Changer la couleur de <image> est également impossible. Donc, une combinaison des deux était 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 comme le svg enfant dans la réponse du svg parent, sauf que vous pouvez maintenant lui appliquer des transformations.

1
Christiaan

J'ai constaté que l'utilisation de la balise <image> donnait un rendu de mauvaise qualité du fichier incorporé. 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):

  • Editez 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érer 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 l'ensemble de layer1 (le premier et le dernier calque).

  • Enregistrez ceci puis ouvrez le fichier dans Inkscape.

Cette technique est utile pour avoir un fond 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" />
0
Nick Gammon