La nota xlink:href
ha quedado obsoleta , solo utilícela href
en su lugar, por ejemplo
<svg viewBox="0 0 512 512">
<image width="512" height="512" href="external.svg"/>
</svg>
viewBox
, width
y los height
valores (en esta respuesta) son simplemente para fines ilustrativos, ajuste el diseño en consecuencia ( lea más ).
Dado que <image>
las acciones de especificaciones similares como <img>
, lo que significa que no soporta SVG estilo, como se menciona en la respuesta de Christiaan . Por ejemplo, si tengo la siguiente línea css que establece que el color de la forma svg sea el mismo que el color de la fuente,
svg {
fill: currentColor;
}
El estilo anterior no se aplicaría si <image>
se usa. Para eso, debe usar <use>
, como se muestra en la respuesta de Nick .
La nota id="layer1"
y los href="OTHERFILE.svg#layer1"
valores en su respuesta son obligatorios .
Lo que significa que debe agregar el id
atributo al archivo svg externo, por lo que debe alojar el archivo svg externo (modificado) usted mismo (su sitio web) o en otro lugar. El archivo svg externo resultante se ve así (observe dónde coloco el id
):
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="..."/>
</svg>
El valor de id puede ser cualquier cosa, utilizo "logo" en este ejemplo.
Para incrustar ese svg,
<svg viewBox="0 0 512 512">
<use href="edited-external.svg#logo"/>
</svg>
Si usa el svg anterior como en línea en su html, no necesita el atributo xmlns (al menos lo que sé de svgo ).