Incorporer SVG SVG?

J'ai un document SVG, et je voudrais inclure un externe svg image à l'intérieur d'elle, c'est à dire quelque chose comme:

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

("objet" est juste un exemple - l'extérieur du document sera SVG plutôt que de xhtml).

Des idées? Est-ce même possible? Ou est la meilleure chose pour moi simplement gifler le logo.svg xml dans mon extérieures document SVG?

InformationsquelleAutor Marcin | 2011-03-27

111

Utiliser le image élément de référence et de votre fichier SVG. Pour le plaisir, enregistrez les en tant que 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>
```
- Merci, pour une raison quelconque, mon googler pour cela, il suffit de ne pas travailler jusqu'à ce que après que j'ai posté cette question. Je remarque que la largeur et la hauteur doivent être présentes pour que l'image pour la rendre.
- Une observation intéressante: les dernières versions de Firefox, Chrome, Safari et tous montrent qu'un niveau de récursion (deux points) à l'aide de la ci-dessus. Toutefois, si vous enregistrez le ci-dessus comme "un.svg" et de modifier l'image ". b.svg", et puis aussi l'enregistrer en tant que "b.svg" avec l'image faisant référence à "un.svg", puis Firefox afficher d'autres niveaux de récursivité à chaque fois que vous rechargez l'alternance de fichiers. Il semble cache de résultat à chaque fois que vous chargez le fichier, aller à un niveau plus profond.
- Je dois ajouter que, malheureusement, FireFox, WebKit et semblent à la poignée de la balise d'image de façon incohérente, avec FF comportement qui semble être erronée (bizarre placement de l'image, bizarre mise à l'échelle). Ma solution a été de coller le SVG dans, en fin de compte.
- Cela m'étonne grandement. Avez-vous un simple cas de test qui produit des résultats différents en Chrome rapport à FF? Ne référencés fichier SVG, ont à la fois preserveAspectRatio et viewBox les attributs? En outre, l'ajout preserveAspectRatio à la <image /> élément qui pourrait aider. Si je suis heureux que vous avez une solution je serais intéressé d'étudier plus à fond et en écrasant les problèmes que vous avez avec un bon référencement.
- viewBox dans le fichier référencé, preserveAspectRatio sur la balise image (mais pas dans le fichier référencé). Je vais mettre en place un exemple bientôt.
- Savez-vous si il est possible de style liées fichier SVG, comme si c'était une SVG de forme? Je n'arrive pas à le faire fonctionner.
- Un élément SVG n'a pas de propriétés de style lui-même, mais plutôt les éléments à l'intérieur de l'élément SVG pour avoir du style. Cependant, lors de l'utilisation de <image> en SVG (ou <img> ou <embed> en HTML) pour faire référence à un fichier SVG vous n'êtes pas accès à la sous-jacentes DOM. En tant que tel, non, vous ne pouvez pas les éléments de style à l'intérieur d'un élément SVG qui a été référencé par un <image>.
- Je suis en train de mettre cela comme une note de côté: Chrome ont le comportement étrange de la conversion <image> balises <img> lors de l'ajout du code via le débogueur, et il ne fonctionne pas de cette façon, vous devez faire vos modifications et de recharger la page.
- Que dois-je faire si j'ai mon fichier svg codé comme une chaîne de caractères? (et pas une url externe)
- xlink:href="data:image/svg+xml;utf8<svg ...>... </svg>" />. (Si vous utilisez JavaScript pour la href attribut, vous n'avez pas besoin d'échapper à la < etc. des personnages.)
- suis-je censé fonctionner de ma chaîne brute par encodeURIComponent?
- Nevermind - je suis à l'aide de javascript, donc je n'ai pas besoin d'y échapper.
- Je n'étais pas en mesure d'obtenir quelque chose comme ceci à travailler au-delà de deux niveaux. J'ai posté une question distincte sur le ici.
- Malheureusement, la rédaction d'un script (JavaScript) à l'intérieur de l'enfant svg est ignoré avec cette méthode.
InformationsquelleAutor Phrogz
77

Ou vous pouvez intégrer des enfants svg parent svg comme ceci:
```
<svg>
    <g>
        <svg>
            ...
        </svg>
    </g>
</svg>
```
démo:

http://hitokun-s.github.io/demo/path-between-two-svg.html
- avez-vous un autre exemple de votre réponse? je suis en train d'essayer, mais à défaut de mettre en œuvre vos conseils. mon 'extérieur' SVG jeux de cercle et de dégradés. mon intérieur SVG est un objet. autonome, à l'intérieur SVG fonctionne comme prévu. mais l'intérieur SVG ne s'affichent pas dans mon de la mise en œuvre de vos conseils. donc, ma demande de voir un autre exemple.
InformationsquelleAutor toshi
28

Il vaut la peine de mentionner que lorsque vous incorporez SVGs dans un autre format SVG avec:
```
<image x="10" y="20" width="80" height="80" xlink:href="image.svg" />
```
ensuite intégré SVG prend un rectangulaire forme avec des dimensions données.

C'est-à-dire, si votre incorporé SVG est un cercle ou une forme autre qu'un carré, alors il devient un carré avec de la transparence. Par conséquent, les événements de la souris se retrouvent piégés dans cette embeded place et ne pas atteindre le parent SVG. Attention pour que.

Une meilleure approche est d'utiliser un modèle. 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 utiliser le modèle comme ceci:
```
<circle cx="0" cy="0" r="250" fill="url(#pat)"></circle>
```
Maintenant votre souris événements à ne pas rester coincé dans transparentes de l'image de carrés!

InformationsquelleAutor oabarca
3

J'ai trouvé que l'utilisation de la <image> tag a donné une faible qualité de rendu du fichier incorporé. Cependant la technique suivante travaillé (pour incorporer un fichier SVG à l'intérieur d'un fichier SVG - pas nécessairement pour le rendu sur une page HTML):
- De modifier le fichier SVG dans un éditeur de texte.
- Trouver la fin de l'métadonnées:
```
</metadata>
  <g
   id="layer1"
   inkscape:groupmode="layer"
   inkscape:label="Layer 1">
```
- Insérer cette ligne après que le groupe tag:
```
<use xlink:href="OTHERFILE.svg#layer1" y="0" x="0" />
```
- Dans ce cas nous sommes, y compris OTHERFILE.svg dans le fichier, et tous layer1 (le premier et le calque par défaut).
- L'enregistrer et puis ouvrez le fichier dans Inkscape.
Cette technique est utile pour avoir un fond standard ou d'un logo sur chaque page. Par de le mettre en premier dans le fichier, il sera rendu en premier (et donc en bas). Vous pouvez également verrouiller par l'ajout de cet attribut:
```
sodipodi:insensitive="true" 
```
En d'autres termes:
```
<use xlink:href="OTHERFILE.svg#layer1" sodipodi:insensitive="true" y="0" x="0" />
```
InformationsquelleAutor Nick Gammon
1

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

Seulement Firefox prend en charge la "transformation" de l'attribut sur la imbriquée éléments svg. Modification de la couleur de <image> est pas possible. Ainsi, une combinaison des deux est nécessaire.

Ce que j'ai fait est 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.

Présente le même comportement que l'enfant svg dans le parent svg réponse à l'exception que vous pouvez désormais appliquer des transformations sur elle.

InformationsquelleAutor Christiaan
-2

Note xlink:href a été obsolète, il suffit d'utiliser href au lieu de cela, par exemple,
```
<svg viewBox="0 0 512 512">
  <image width="512" height="512" href="external.svg"/>
</svg>
```
viewBox, width et height valeurs (dans cette réponse) sont tout simplement à des fins d'illustration, ajuster la mise en page en conséquence (lire plus).

Depuis <image> des actions similaires spec comme <img> en ce sens qu'elle ne prend pas en charge le format SVG style, comme mentionné dans Christiaan réponse. Par exemple, si j'ai le code css suivant la ligne que l'ensemble de la svg forme couleur soit la même que la couleur de la police,
```
svg {
  fill: currentColor;
}
```
Le style précédent ne s'applique pas si <image> est utilisé. Pour cela, vous devez utiliser <use>, comme indiqué dans Nick répondre.

Note id="layer1" et href="OTHERFILE.svg#layer1" valeurs dans sa réponse sont obligatoire.

Ce qui signifie que vous devez ajouter le id attribut à l'externe fichier svg, si vous avez besoin d'héberger l' (modifié) externe fichier svg par vous-même (votre site web) ou quelque part d'autre. Le résultant externe svg fichier ressemble à ceci (notez où j'ai mis 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 l'incorporer svg,
```
<svg viewBox="0 0 512 512">
  <use href="edited-external.svg#logo"/>
</svg>
```
Si vous utilisez le svg en ligne dans votre code html, vous n'avez pas besoin d'attribut xmlns (au moins ce que je sais de svgo).
- viewBox n'est pas obligatoire, si vous l'omettez, vous obtiendrez une mise en page différente, dans certains cas, que peut-être ce que vous voulez bien. Safari a tout juste commencé à soutenir href.
InformationsquelleAutor Saftever

Vous devez vous connecter pour publier un commentaire.