: Using Schema.org logo markup with SVG images 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

@Megan663

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>

Vote Up Vote Down

@Harper822

You can simply refer to Your logo via meta/link tag as suggested in official documentation: 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.

Vote Up Vote Down

@Ann8826881

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.

Vote Up Vote Down