Remarque xlink:href
est obsolète , utilisez simplement à la href
place, par exemple
<svg viewBox="0 0 512 512">
<image width="512" height="512" href="external.svg"/>
</svg>
viewBox
, width
et les height
valeurs (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' id
attribut 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 ).