Back to Question Center
0

Utilizzo del markup del logo Semalt con immagini SVG

1 answers:

Ho realizzato un logo che è fantastico e l'ho salvato in formato AI e SVG. Desidero utilizzare il file SVG sul sito poiché il logo apparirà molte volte in tutto il sito e sarebbe meglio che salvare il logo in formato PNG e avere richieste server-side non necessarie. Ora, funziona alla grande usando:

        

Ora il problema sorge quando si usa Schema. org logo markup. Utilizzo:

        

Come mi aspettavo, fallisce la validazione del W3C e sono accolto con i seguenti messaggi di errore:

  • Attributo itemscope non consentito su elemento svg a questo punto.
  • Itemtype di attributo non consentito sull'elemento svg a questo punto.
  • Attributo non consentito su immagine elemento a questo punto.

Ora so che la validazione del W3C non è una cosa essenziale, ma preferirei avere una soluzione che soddisfi sia Google che W3C.

Sono sicuro che qualche guru del W3C sarà in grado di indicarmi la giusta direzione, mi permetto di non usare l'URI DATA se possibile perché so che potrebbe essere una soluzione, ma correggimi se sbaglio o non DATA Semalt non sono intercambiabili.

February 13, 2018

I microdati possono essere usati solo su elementi HTML come definiti da HTML5. Secondo HTML5, l'elemento svg non si trova nello spazio dei nomi HTML. La specifica HTML di WHATWG menziona esplicitamente che Microdata non funziona per svg (citato in data 2014-01-02):

Attualmente, il itemscope , itemprop e altri attributi di microdati sono definiti solo per elementi HTML. Ciò significa che gli attributi con i nomi letterali " itemscope ", " itemprop ", ecc., Non provocano l'elaborazione dei microdati su elementi in altri spazi dei nomi, come SVG.

(a) Si potrebbe aggiungere un elemento insignificante div :

  
.

I parser di microdati comprenderanno che il contenuto dell'elemento div con la proprietà logo contiene il logo dell'organizzazione. Ma poiché l'elemento svg non fa parte di HTML, non ci sono regole definite per ottenere il valore corretto (= l'URL dell'immagine) da esso. Quindi è molto improbabile che i parser Microdata possano fare qualcosa con queste informazioni (e. g. , mostrando il logo in un contesto diverso).
Si noti che l'utilizzo di itemprop su un elemento div produce un valore stringa , che non è quello Schema. org si aspetta la proprietà logo .

(b) Potresti duplicare le informazioni con il link "nascosto" :

  
.

(c) Potresti usare l'elemento img (secondo caniuse. com utilizzando i file SVG in img ha più supporto di utilizzando SVG inline in HTML5 ):

  
 ACME Inc.

(d) Forse potresti usare RDFa Lite invece , ma non sono sicuro che funzioni per gli spazi dei nomi "misti". Ma per SVG 1. 2 Tiny, RDFa può essere utilizzato nell'elemento metadata .

Puoi semplicemente fare riferimento al tuo logo tramite il tag meta / link come suggerito nella documentazione ufficiale: http: // schema. org / docs / gs. html # advanced_missing

  

Modifica : Modificato da a come suggerito da unor.

Un'altra alternativa sarebbe salvare la tua immagine come . file svg . Puoi usare qualsiasi editor di testo per creare questo file e incollarlo nel tuo markup SVG. Quindi inserisci il markup come faresti per un . png o . jpg :

  
casa