[Résolu] SVG export Illustrator ne s'affiche pas dans HTML

Bonjour,

Je crée moi-même mes fichiers sous Illustrator que j'exporte en faisant Fichier > Exporter sous > SVG

Mais quand dans mon HTML j'insère le chemin de mon img celle-ci ne s'affiche pas

Voici le type de fichier que j'ai :

<?xml version="1.0" encoding="UTF-8"?><svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 34"><defs><style>.cls-1{fill:#015293;}</style></defs><path class="cls-1" d="M35.78,15.83c1.24-1.02,2.26-2.58,2.26-4.29,0-3.18-2.51-5.6-7.51-5.6h-7.92l1.43,2.54v19.21h6.81c5.76,0,8.46-2,8.46-6.52,0-2.64-1.56-4.39-3.53-5.34ZM28.91,9.73h1.69c1.72,0,2.51.95,2.51,2.13s-.57,2.13-1.62,2.96h-2.58v-5.09ZM30.85,23.82h-1.94v-5.28h1.88c2.42,0,3.69.83,3.69,2.61,0,1.91-1.56,2.67-3.63,2.67ZM49.43,5.94h-7.57l1.43,2.54v19.21h4.9v-6.65c.48.03.92.03,1.34.03,4.45,0,8.71-1.91,8.71-7.7,0-4.23-2.54-7.44-8.81-7.44ZM49.46,17.07c-.32,0-.73-.03-1.27-.06v-7.22h1.21c1.97,0,3.91.73,3.91,3.63,0,2.51-1.18,3.66-3.85,3.66ZM76.52,20.09c-.34-.3-.71-.45-1.12-.45-.35,0-1.02.08-1.35.46-.32.37-.55.99-.46,1.57.07.48.35.97.79,1.36.38.33.89.5,1.3.53.41.03,1.01-.26,1.28-.56.34-.38.45-.88.38-1.45-.07-.58-.39-1.07-.82-1.45ZM89.9,23.64c.48.09,1.13-.02,1.59-.39.38-.31.67-.79.78-1.36.1-.49-.01-1.02-.2-1.39-.18-.37-.74-.74-1.12-.82-.5-.1-.98.05-1.45.39-.47.35-.73.88-.84,1.44-.09.44-.03.84.17,1.19.17.3.58.84,1.08.94ZM82.9,0c-9.39,0-17,7.61-17,17s7.61,17,17,17,17-7.61,17-17S92.29,0,82.9,0ZM93.39,26.56c-1.36.86-2.87,1.12-4.54.78-1.53-.31-2.72-1.04-3.57-2.19-.84-1.14-1.12-2.41-.83-3.81.22-1.08.69-1.95,1.41-2.61.72-.67,1.47-.93,2.23-.77.61.12.96.49,1.06,1.11.71-.48,1.42-.65,2.13-.5.78.16,1.38.57,1.79,1.25.4.66.51,1.43.33,2.3-.19.94-.63,1.65-1.33,2.13-.7.5-1.48.66-2.35.49-.8-.16-1.38-.6-1.74-1.32l-.26.77-1.08-.22,1.21-3.65c.05-.13.09-.26.12-.39.03-.12.06-.24.08-.35.07-.36-.04-.56-.33-.62-.41-.08-.85.13-1.3.65-.45.51-.75,1.13-.9,1.86-.24,1.17-.02,2.21.64,3.12.66.92,1.62,1.51,2.88,1.77,1.32.27,2.52.04,3.61-.68,1.08-.72,1.76-1.74,2.02-3.06.15-.73.13-1.48-.05-2.25-.07-.25-.15-.49-.26-.72-.03-.05-.06-.1-.1-.16-.67-1-1.58-1.71-2.7-2.15-.77-.31-1.54-.47-2.3-.48-.35,0-.7.03-1.07.08-.66.11-1.32.34-1.97.68-.37.19-.7.42-1.02.66-.11.09-.22.18-.33.27-.25.22-.48.46-.7.71-.03.04-.06.07-.1.11-.02.02-.04.04-.06.07-.26.32-.51.66-.73,1.01-.11.17-.22.34-.32.52-.27.46-.55.91-.84,1.36-.04.07-.08.13-.13.2-.26.41-.52.81-.83,1.18-.3.4-.63.79-.97,1.15-.01.02-.03.03-.04.05-1.01,1.14-2.12,1.85-3.35,2.13-.9.21-1.8.2-2.7-.04-.93-.27-1.73-.7-2.41-1.29-1.23-1.09-1.88-2.44-1.95-4.04-.07-1.61.46-3.05,1.59-4.32,1.04-1.17,2.27-1.84,3.68-1.99,1.41-.16,2.65.24,3.72,1.18.83.73,1.35,1.57,1.56,2.53.22.96.07,1.73-.45,2.31-.41.46-.91.59-1.5.36.06.85-.15,1.55-.63,2.1-.53.6-1.19.91-1.97.92-.78.01-1.49-.27-2.16-.86-.72-.63-1.11-1.37-1.18-2.22-.08-.86.17-1.62.76-2.28.54-.61,1.21-.89,2.01-.85l-.54-.61.73-.82,2.56,2.87c.09.11.18.21.28.3.09.09.18.17.26.25.27.24.51.25.71.02.28-.32.31-.8.09-1.45-.21-.64-.6-1.21-1.17-1.71-.89-.79-1.9-1.12-3.02-1-1.13.11-2.12.65-2.97,1.61-.89,1.01-1.3,2.16-1.22,3.46.08,1.29.63,2.39,1.64,3.28.56.49,1.22.86,1.97,1.08.58.16,1.17.2,1.75.12.89-.18,1.7-.58,2.43-1.15.16-.13.32-.26.46-.4.06-.07.13-.14.19-.21.7-.79,1.25-1.79,1.63-2.99.08-.37.13-.76.14-1.17.05-1.41-.35-2.72-1-3.96-.38-.72-.78-1.43-1.16-2.15-.24-.46-.65-1.42-.95-2.28-.07-.16-.13-.33-.18-.5-.48-1.44-.54-2.76-.17-3.96.27-.88.73-1.65,1.38-2.32.69-.67,1.47-1.15,2.32-1.44,1.56-.52,3.05-.41,4.47.33,1.42.74,2.41,1.92,2.95,3.54.5,1.48.46,2.88-.12,4.19-.57,1.3-1.53,2.18-2.88,2.63-1.05.35-2.04.38-2.97.09-.94-.29-1.54-.81-1.78-1.54-.2-.59-.05-1.08.43-1.48-.77-.37-1.27-.9-1.5-1.6-.25-.76-.19-1.48.19-2.17.38-.68.98-1.16,1.83-1.44.91-.3,1.74-.27,2.51.09.78.36,1.32.95,1.6,1.8.26.77.17,1.49-.27,2.17l.8-.16.35,1.04-3.76.78c-.14.03-.27.06-.4.09-.12.03-.24.07-.34.1-.34.12-.47.32-.37.6.13.4.54.67,1.21.81.66.14,1.35.08,2.06-.15,1.13-.38,1.92-1.08,2.38-2.12.47-1.03.5-2.16.09-3.38-.43-1.28-1.22-2.21-2.39-2.79-1.16-.58-2.38-.65-3.66-.22-.71.24-1.35.63-1.93,1.17-.32.32-.59.67-.8,1.06-.42.99-.54,2.04-.38,3.11.04.26.09.51.15.76,0,.02.01.05.02.07.35,1.05.98,2.06,1.88,3.03.26.22.54.43.85.63,1.2.75,2.53,1.06,3.93,1.12.16,0,.32.01.47.02.61.01,1.21.02,1.82.05.05,0,.1,0,.15,0,.43.02.86.04,1.29.1.58,0,1.16.06,1.74.18,1.49.3,2.66.91,3.51,1.84.63.67,1.07,1.46,1.32,2.35.23.94.26,1.85.08,2.73-.33,1.61-1.17,2.85-2.53,3.71ZM83.85,10.4c.43-.14.74-.39.95-.74.18-.3.44-.92.27-1.4-.16-.46-.58-.97-1.13-1.18-.46-.18-1.02-.18-1.57,0-.48.16-.88.52-1.11.87-.23.34-.28,1.01-.15,1.39.16.48.53.83,1.07,1.06.53.23,1.12.19,1.67.01ZM6.62,5.94l1.05,2.48L.1,27.7h4.83l1.62-4.29c1.3.38,2.58.6,3.88.6s2.54-.22,3.82-.64l1.81,4.33h5.25L11.83,5.94h-5.22ZM10.43,20c-.8,0-1.62-.13-2.54-.38l2.35-5.92,2.54,5.95c-.86.22-1.62.35-2.35.35Z"/></svg>

est-ce que j'oublie quelque chose à l'export Illustrator (option à cocher ou décocher…) ?

j'ai essayé en ajoutant au niveau de <svg> après viewbox ces informations width="100" height="34"
j'ai aussi essayé width="100px" height="34px"
mais ça semble corrompre les fichier.

merci de votre aide.
Modifié par kehzierb (05 May 2025 - 14:49)

Bonjour,

Peut tu préciser où tu insère le chemin vers ton SVG ?

En faisant :

<?xml version="1.0" encoding="UTF-8"?><svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 34" width="100" height="34" ><defs><style>.cls-1{fill:#015293;}</style></defs><path class="cls-1" d="M35.78,15.83c1.24-1.02,2.26-2.58,2.26-4.29,0-3.18-2.51-5.6-7.51-5.6h-7.92l1.43,2.54v19.21h6.81c5.76,0,8.46-2,8.46-6.52,0-2.64-1.56-4.39-3.53-5.34ZM28.91,9.73h1.69c1.72,0,2.51.95,2.51,2.13s-.57,2.13-1.62,2.96h-2.58v-5.09ZM30.85,23.82h-1.94v-5.28h1.88c2.42,0,3.69.83,3.69,2.61,0,1.91-1.56,2.67-3.63,2.67ZM49.43,5.94h-7.57l1.43,2.54v19.21h4.9v-6.65c.48.03.92.03,1.34.03,4.45,0,8.71-1.91,8.71-7.7,0-4.23-2.54-7.44-8.81-7.44ZM49.46,17.07c-.32,0-.73-.03-1.27-.06v-7.22h1.21c1.97,0,3.91.73,3.91,3.63,0,2.51-1.18,3.66-3.85,3.66ZM76.52,20.09c-.34-.3-.71-.45-1.12-.45-.35,0-1.02.08-1.35.46-.32.37-.55.99-.46,1.57.07.48.35.97.79,1.36.38.33.89.5,1.3.53.41.03,1.01-.26,1.28-.56.34-.38.45-.88.38-1.45-.07-.58-.39-1.07-.82-1.45ZM89.9,23.64c.48.09,1.13-.02,1.59-.39.38-.31.67-.79.78-1.36.1-.49-.01-1.02-.2-1.39-.18-.37-.74-.74-1.12-.82-.5-.1-.98.05-1.45.39-.47.35-.73.88-.84,1.44-.09.44-.03.84.17,1.19.17.3.58.84,1.08.94ZM82.9,0c-9.39,0-17,7.61-17,17s7.61,17,17,17,17-7.61,17-17S92.29,0,82.9,0ZM93.39,26.56c-1.36.86-2.87,1.12-4.54.78-1.53-.31-2.72-1.04-3.57-2.19-.84-1.14-1.12-2.41-.83-3.81.22-1.08.69-1.95,1.41-2.61.72-.67,1.47-.93,2.23-.77.61.12.96.49,1.06,1.11.71-.48,1.42-.65,2.13-.5.78.16,1.38.57,1.79,1.25.4.66.51,1.43.33,2.3-.19.94-.63,1.65-1.33,2.13-.7.5-1.48.66-2.35.49-.8-.16-1.38-.6-1.74-1.32l-.26.77-1.08-.22,1.21-3.65c.05-.13.09-.26.12-.39.03-.12.06-.24.08-.35.07-.36-.04-.56-.33-.62-.41-.08-.85.13-1.3.65-.45.51-.75,1.13-.9,1.86-.24,1.17-.02,2.21.64,3.12.66.92,1.62,1.51,2.88,1.77,1.32.27,2.52.04,3.61-.68,1.08-.72,1.76-1.74,2.02-3.06.15-.73.13-1.48-.05-2.25-.07-.25-.15-.49-.26-.72-.03-.05-.06-.1-.1-.16-.67-1-1.58-1.71-2.7-2.15-.77-.31-1.54-.47-2.3-.48-.35,0-.7.03-1.07.08-.66.11-1.32.34-1.97.68-.37.19-.7.42-1.02.66-.11.09-.22.18-.33.27-.25.22-.48.46-.7.71-.03.04-.06.07-.1.11-.02.02-.04.04-.06.07-.26.32-.51.66-.73,1.01-.11.17-.22.34-.32.52-.27.46-.55.91-.84,1.36-.04.07-.08.13-.13.2-.26.41-.52.81-.83,1.18-.3.4-.63.79-.97,1.15-.01.02-.03.03-.04.05-1.01,1.14-2.12,1.85-3.35,2.13-.9.21-1.8.2-2.7-.04-.93-.27-1.73-.7-2.41-1.29-1.23-1.09-1.88-2.44-1.95-4.04-.07-1.61.46-3.05,1.59-4.32,1.04-1.17,2.27-1.84,3.68-1.99,1.41-.16,2.65.24,3.72,1.18.83.73,1.35,1.57,1.56,2.53.22.96.07,1.73-.45,2.31-.41.46-.91.59-1.5.36.06.85-.15,1.55-.63,2.1-.53.6-1.19.91-1.97.92-.78.01-1.49-.27-2.16-.86-.72-.63-1.11-1.37-1.18-2.22-.08-.86.17-1.62.76-2.28.54-.61,1.21-.89,2.01-.85l-.54-.61.73-.82,2.56,2.87c.09.11.18.21.28.3.09.09.18.17.26.25.27.24.51.25.71.02.28-.32.31-.8.09-1.45-.21-.64-.6-1.21-1.17-1.71-.89-.79-1.9-1.12-3.02-1-1.13.11-2.12.65-2.97,1.61-.89,1.01-1.3,2.16-1.22,3.46.08,1.29.63,2.39,1.64,3.28.56.49,1.22.86,1.97,1.08.58.16,1.17.2,1.75.12.89-.18,1.7-.58,2.43-1.15.16-.13.32-.26.46-.4.06-.07.13-.14.19-.21.7-.79,1.25-1.79,1.63-2.99.08-.37.13-.76.14-1.17.05-1.41-.35-2.72-1-3.96-.38-.72-.78-1.43-1.16-2.15-.24-.46-.65-1.42-.95-2.28-.07-.16-.13-.33-.18-.5-.48-1.44-.54-2.76-.17-3.96.27-.88.73-1.65,1.38-2.32.69-.67,1.47-1.15,2.32-1.44,1.56-.52,3.05-.41,4.47.33,1.42.74,2.41,1.92,2.95,3.54.5,1.48.46,2.88-.12,4.19-.57,1.3-1.53,2.18-2.88,2.63-1.05.35-2.04.38-2.97.09-.94-.29-1.54-.81-1.78-1.54-.2-.59-.05-1.08.43-1.48-.77-.37-1.27-.9-1.5-1.6-.25-.76-.19-1.48.19-2.17.38-.68.98-1.16,1.83-1.44.91-.3,1.74-.27,2.51.09.78.36,1.32.95,1.6,1.8.26.77.17,1.49-.27,2.17l.8-.16.35,1.04-3.76.78c-.14.03-.27.06-.4.09-.12.03-.24.07-.34.1-.34.12-.47.32-.37.6.13.4.54.67,1.21.81.66.14,1.35.08,2.06-.15,1.13-.38,1.92-1.08,2.38-2.12.47-1.03.5-2.16.09-3.38-.43-1.28-1.22-2.21-2.39-2.79-1.16-.58-2.38-.65-3.66-.22-.71.24-1.35.63-1.93,1.17-.32.32-.59.67-.8,1.06-.42.99-.54,2.04-.38,3.11.04.26.09.51.15.76,0,.02.01.05.02.07.35,1.05.98,2.06,1.88,3.03.26.22.54.43.85.63,1.2.75,2.53,1.06,3.93,1.12.16,0,.32.01.47.02.61.01,1.21.02,1.82.05.05,0,.1,0,.15,0,.43.02.86.04,1.29.1.58,0,1.16.06,1.74.18,1.49.3,2.66.91,3.51,1.84.63.67,1.07,1.46,1.32,2.35.23.94.26,1.85.08,2.73-.33,1.61-1.17,2.85-2.53,3.71ZM83.85,10.4c.43-.14.74-.39.95-.74.18-.3.44-.92.27-1.4-.16-.46-.58-.97-1.13-1.18-.46-.18-1.02-.18-1.57,0-.48.16-.88.52-1.11.87-.23.34-.28,1.01-.15,1.39.16.48.53.83,1.07,1.06.53.23,1.12.19,1.67.01ZM6.62,5.94l1.05,2.48L.1,27.7h4.83l1.62-4.29c1.3.38,2.58.6,3.88.6s2.54-.22,3.82-.64l1.81,4.33h5.25L11.83,5.94h-5.22ZM10.43,20c-.8,0-1.62-.13-2.54-.38l2.35-5.92,2.54,5.95c-.86.22-1.62.35-2.35.35Z"/></svg>

le SVG affiché fait bien 100x34 de dimension.

Si le SVG est inséré via une balise img : <img src="chemin/du/svg/abpLogo.svg" > ou <img src="chemin/du/svg/abpLogo.svg" width="100">height="34"> Il ne doit pas y avoir de soucis.
Généralement le soucis provient du chemin indiqué. un chemin relatif qui ne pointe pas au bon endroit ou bien un chemin vers un autre nom de domaine lorsque le domaine de la page n'autorise pas le chargement de ressources distantes.

cdt

voici le chemin présent :

<img src="/img/logo-abp-bleu.svg" alt="Logo ABP">

et voici ce qu'il se passe

Bonjour,

okay, ton chemin relatif part de la racine, cela indique que ton fichier se trouve , par exemple, à https://tonSite.com/img/logo-abp-bleu.svg

Si ce chemin est correct, reflète bien ton arborescence de ton site, L'emplacement de la page ou tu insère la balise image n'a normalement pas d'incidences sur son affichage.

<edit>elagage d'une partie des redondances</edit>


Cdt
Modifié par gcyrillus (05 May 2025 - 16:20)

Ce n'est pas une histoire de chemin
Il considère l'image comme 0x0px

Du coup, j'ai repris le code du SVG de ton test ça semble résoudre le problème.
Merci de ton aide

??
Du coup , ce que je vois en live ne pose à priori pas de soucis. L'image est visible avec une dimension correspondante à ce que tu souhaites. Un soucis de cache de ton navigateur ?


<edit> Super, du coup c'est résolu, bonne suite,
Cdt
Modifié par gcyrillus (05 May 2025 - 16:21)

Non je ne sais pas de quoi ça venait
En fait dès que j'ajoutais width="100" height="34" dans le svg ça le faisait planter et sans ces données ça s'affichait comme vide

kehzierb a écrit :
Non je ne sais pas de quoi ça venait
En fait dès que j'ajoutais width="100" height="34" dans le svg ça le faisait planter et sans ces données ça s'affichait comme vide

Je ne saurai te dire, j'ai juste repris le code de ta question initiale auquel j'ai ajouté les attributs width and height. Mauvais encodage, du fichier ou durant son transfert, peut-être?