Si vous utilisez des balises <img> , les navigateurs Webkit n'afficheront pas les images bitmap incorporées .
Pour tout type d'utilisation avancée du SVG, y compris le SVG en ligne offre de loin la plus grande flexibilité.
Internet Explorer et Edge redimensionneront correctement le SVG , mais vous devez spécifier à la fois la hauteur et la largeur.
Vous pouvez ajouter onclick, onmouseover, etc. à l'intérieur du svg, à n'importe quelle forme dans le SVG: onmouseover = "top.myfunction (evt);"
Vous pouvez également utiliser des polices Web dans le SVG en les incluant dans votre feuille de style habituelle.
Remarque: si vous exportez des SVG depuis Illustrator, les noms des polices Web seront incorrects. Vous pouvez corriger cela dans votre CSS et éviter de déconner dans le SVG. Par exemple, Illustrator donne le mauvais nom à Arial, et vous pouvez le corriger comme ceci:
@font-face {
font-family: 'ArialMT';
src:
local('Arial'),
local('Arial MT'),
local('Arial Regular');
font-weight: normal;
font-style: normal;
}
Tout cela fonctionne sur n'importe quel navigateur sorti depuis 2013 .
Pour un exemple, voir ozake.com . L'ensemble du site est réalisé en SVG à l'exception du formulaire de contact.
Avertissement: les polices Web sont redimensionnées de manière imprécise dans Safari - et si vous avez beaucoup de transitions du texte brut en gras ou en italique, il peut y avoir une petite quantité d'espace supplémentaire ou manquant aux points de transition. Voir ma réponse à cette question pour plus d'informations.