J'ai créé un logo qui est génial et je l'ai enregistré au format AI et SVG. Je souhaite utiliser le fichier SVG sur un site car le logo apparaîtra plusieurs fois sur tout le site et serait mieux que d'enregistrer le logo au format PNG et d'avoir des demandes inutiles côté serveur. Maintenant, cela fonctionne très bien en utilisant:
<svg id="my-logo" height="60" width="60"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<g transform="scale(0.1)">
<image x="0" y="0" height="600" width="600" xlink:href="my-logo.svg" />
</g>
</svg>
Maintenant, le problème se pose lors de l'utilisation du logo
balisage Schema.org . En utilisant:
<svg itemscope itemtype="http://schema.org/Organization" id="my-logo" height="60" width="60"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<g transform="scale(0.1)">
<image itemprop="logo" x="0" y="0" height="600" width="600" xlink:href="my-logo.svg" />
</g>
</svg>
Comme je m'y attendais, il échoue à la validation W3C et je suis accueilli avec les messages d'erreur suivants:
- Attribut itemscope non autorisé sur l'élément svg à ce stade.
- Le type d'élément d'attribut n'est pas autorisé sur l'élément svg à ce stade.
- L'attribut itemprop n'est pas autorisé sur l'image de l'élément à ce stade.
Maintenant, je sais que la validation W3C n'est pas une chose essentielle mais je préférerais avoir une solution qui satisfasse Google et W3C.
Je suis sûr que certains gourous du W3C seront en mesure de me diriger dans la bonne direction, je préférerais ne pas utiliser DATA URI si possible car je sais que cela pourrait être une solution mais corrigez-moi si je me trompe ou non DATA URI ne sont pas cachable.
la source
width: height:
dans la balise img a eu des effets indésirables. Je vais lui donner un autre coup .... sera pénible d'avoir à utiliser des sprites png car cela ajoutera 100 Ko contre 2 Ko.Vous pouvez simplement vous référer à votre logo via la balise meta / link comme suggéré dans la documentation officielle: http://schema.org/docs/gs.html#advanced_missing
Modifier : changé de
<meta>
à<link />
comme suggéré par unor.la source
link
au lieu demeta
si la valeur est un URI (ce que j'ai suggéré dans la partie (b) de ma réponse ).Une autre alternative serait d'enregistrer votre image en tant que
.svg
fichier. Vous pouvez utiliser n'importe quel éditeur de texte pour créer ce fichier et le coller dans votre balisage SVG. Ensuite, mettez le balisage comme vous le feriez pour un.png
ou.jpg
:la source