Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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

share|improve this question
add comment

1 Answer

Microdata (Note) can only be used on HTML elements as defined by HTML5. According to HTML5 (CR), 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 meaningless div elements:

<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 resp. its 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).

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

Some search engines might not like the meta/link way very much.

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

share|improve this answer
    
great answer. Problem with using img tag is it does not scale that well, or least in my tests resizing using width: height: within the img tag had undesirable effects. I'll give it another shot.... will be a pain to have to use png sprites as this will add 100kb vs 2kb. –  bybe Jan 2 at 21:50
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.