Bonjour,
Comme vous l'avez remarqué, le Svg s'appuie sur le langage XML. De fait vous n'avez pas tout à fait tord lorsque vous parlez de l'inclure via une url mais, pas tout à fait raison non plus.
La méthode d'intégration dépend surtout de la redondance à l'insertion de l'objet.
En effet, si votre logo ne doit-être inséré qu'à un endroit unique de la page - par exemple une page d'en-tête reprise par toutes les autres - vous pouvez aisément insérer son code inline parmi le Html.
<header>
<svg>
</svg>
<nav>
</nav>
</header>
Toutefois si vous deviez l'insérer à plusieurs reprise en des endroits différents, il est recommandable d'utiliser à ce moment là ce qu'on appelle un sprite Svg.
Pour ce faire, dans un premier temps il faut que vous intégriez juste après la balyse body les définitions de vos svg.
<body>
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!-- notez bien le display:none afin que la(les) définition(s) n'apparaisse(nt) pas à la vue de l'utilisateur -->
<defs>
<symbol id="my_object" viewBox="0 0 X Y"><!-- notez qu'il faille utiliser un ID ; les dimensions sont définies par une viewBox et non par width/height -->
<path d="..."/><!-- ici le(s) chemin(s) de votre objet -->
</symbol>
</defs>
</svg>
Ensuite, là vous souhaitez faire apparaître votre svg, il vous faudra utiliser la forme suivante
<svg>
<switch>
<use xlink:href="#my_object"/><!-- ici on reprend l'ID de l'objet dans un attribut xlink -->
<foreignObject width="0" height="0">
<!-- ici s'affiche un texte alternatif au cas où le svg ne puisse s'afficher (équivalent à l'attribut ALT d'une image -->
</foreignObject>
</switch>
</svg>
Enfin vous pourrez personnaliser votre svg via Css en utilisant soit le sélecteur de balise (svg toujours en minuscule), un ID ou encore une classe.
).
){kind=link}