Using Schema.org logo markup with SVG images

Question

I've made a logo which is awesome and I've saved it in AI and SVG format. I wish to use the SVG file on the a site as the logo will appear many times all over the site and would be better than saving the logo in PNG format and having unnecessary server-side requests. Now, this works great using:

<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>

Now the problem arises when using Schema.org logo markup. Using:

<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>

As I expected it fails W3C validation and I am greeted with the following error messages:

• Attribute itemscope not allowed on element svg at this point.
• Attribute itemtype not allowed on element svg at this point.
• Attribute itemprop not allowed on element image at this point.

Now I know that W3C validation isn't an essential thing but I'd prefer to have a solution which does satisfy both Google and W3C.

I'm sure that some W3C guru will be able to point me in the right direction, I'd perfer not to use DATA URI if possible as I know that could be one solution but correct me if I'm wrong or not DATA URI's are not cachable.

Answer 1

Microdata can only be used on HTML elements as defined by HTML5. According to HTML5, the svg element is not in the HTML namespace. WHATWG’s HTML spec explicitly mentions that Microdata doesn’t work for svg (quoted on 2014-01-02):

Currently, the itemscope, itemprop, and other microdata attributes are only defined for HTML elements. This means that attributes with the literal names "itemscope", "itemprop", etc, do not cause microdata processing to occur on elements in other namespaces, such as SVG.

(a) You could add a meaningless div element:

<div itemscope itemtype="http://schema.org/Organization">
  <div itemprop="logo">
    <svg>…</svg>
  </div>
</div>

Microdata parsers would understand that the content of the div element with the logo property contains the organization’s logo. But as the svg element is not part of HTML, there are no rules defined for getting the correct value (= the image’s URL) out of it. So it’s very unlikely that Microdata parsers could do something with this information (e.g., showing the logo in a different context).
Note that using itemprop on a div element results in a string value, which is not what Schema.org expects for the logo property.

(b) You could duplicate the information with the "hidden" link:

<div itemscope itemtype="http://schema.org/Organization">
  <svg>…</svg>
  <link itemprop="logo" href="logo.svg" />
</div>

(c) You could use the img element (according to caniuse.com using SVG files in img has more support than using SVG inline in HTML5):

<div itemscope itemtype="http://schema.org/Organization">
  <img itemprop="logo" src="logo.svg" alt="ACME Inc." />
</div>

(d) Maybe you could use RDFa Lite instead, but I’m not sure if it works for "mixed" namespaces. But for SVG 1.2 Tiny, RDFa can be used in the metadata element.

Answer 2

You can simply refer to Your logo via meta/link tag as suggested in official documentation: http://schema.org/docs/gs.html#advanced_missing

<!-- schema.org item wrapper -->
<div itemscope itemtype="http://schema.org/Organization">
  <!-- This is Your original SVG markup -->
  <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>
  <!-- schema.org itemprop markup -->
  <link itemprop="logo" content="my-logo.svg" />
</div>

Edit: Changed from <meta> to <link /> as suggested by unor.

Answer 3

Another alternative would be to save your image as a .svg file. You can use any text editor to create this file and paste in your SVG markup. Then put the markup on just like you would do for a .png or .jpg:

<div itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="http://www.example.com/">Home</a>
  <img itemprop="logo" src="http://www.example.com/logo.svg" />
</div>