Ich habe ein fantastisches Logo erstellt und es im AI- und SVG-Format gespeichert. Ich möchte die SVG-Datei auf einer Site verwenden, da das Logo auf der gesamten Site mehrmals angezeigt wird und besser wäre, als das Logo im PNG-Format zu speichern und unnötige serverseitige Anforderungen zu haben. Dies funktioniert hervorragend mit:
<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>
Jetzt tritt das Problem bei der Verwendung von Schema.org- logo
Markup auf. Verwenden von:
<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>
Wie erwartet schlägt die W3C-Validierung fehl und ich werde mit den folgenden Fehlermeldungen begrüßt:
- Das Attribut itemscope ist zu diesem Zeitpunkt für das Element svg nicht zulässig.
- Das Attribut itemtype ist für das Element svg zu diesem Zeitpunkt nicht zulässig.
- Das Attribut itemprop ist für das Elementbild zu diesem Zeitpunkt nicht zulässig.
Jetzt weiß ich, dass die W3C-Validierung keine wesentliche Sache ist, aber ich würde es vorziehen, eine Lösung zu haben, die sowohl Google als auch W3C zufriedenstellt.
Ich bin mir sicher, dass ein W3C-Guru mich in die richtige Richtung weisen kann. Ich würde es vorziehen, wenn möglich keine DATA-URI zu verwenden, da ich weiß, dass dies eine Lösung sein könnte, aber mich korrigieren, wenn ich falsch liege oder nicht sind nicht zwischenspeicherbar.
quelle
width: height:
innerhalb des img-Tags unerwünschte Auswirkungen hatte. Ich werde es noch einmal versuchen ... es wird ein Schmerz sein, PNG-Sprites verwenden zu müssen, da dies 100kb vs 2kb hinzufügt.Sie können einfach über ein Meta / Link-Tag auf Ihr Logo verweisen, wie in der offiziellen Dokumentation vorgeschlagen: http://schema.org/docs/gs.html#advanced_missing
Bearbeiten : Geändert von
<meta>
zu<link />
wie von unor vorgeschlagen.quelle
link
stattdessen verwenden,meta
wenn der Wert ein URI ist (was ich in Teil (b) meiner Antwort vorgeschlagen habe ).Eine andere Alternative wäre, Ihr Bild als
.svg
Datei zu speichern. Sie können einen beliebigen Texteditor verwenden, um diese Datei zu erstellen und in Ihr SVG-Markup einzufügen. Setzen Sie dann das Markup so auf, wie Sie es für ein.png
oder tun würden.jpg
:quelle