BTrem

Adding Microformats to SVG

Using SVG in web pages offers many advantages:

To that list, we can add one more: the ability to add microformats to embedded SVG elements.

Let's imagine a business called Example Co., with a simple logo consisting of the company name inside a gold circle. The SVG markup for such a logo might look like this:

<svg viewBox="0 0 200 200" height="200" width="200">
<circle cx="50%" cy="50%" r="100" fill="gold"/>
<text x="25" y="110" font-size="30">
Example Co.
</text>
</svg>

which would render like so:

Example Co.

With the addition of a couple of class attributes...

<svg class="h-card" viewBox="0 0 200 200" height="200" width="200">
<circle cx="50%" cy="50%" r="100" fill="gold"/>
<text class="p-name" x="25" y="110" font-size="30">
Example Co.
</text>
</svg>

...we have a microformat.

The SVG element now has class="h-card". That makes the logo an h-card, which is a microformat for publishing contact info in a web page. The <text> element has class="p-name". That tells a microformats parser that the name for this h-card is “Example Co.”

real world example

Last year, I created a simple one-page website for a plant nursery in Kirkland, Washington, with a logo in SVG format. Here's a screenshot:

Greenbank Plant Nursery's logo appears on its website

And here's a simplified version of the code where I added the SVG element:

<header class="h-card">

<h1 class="e-logo">

<svg viewBox="0 0 450 325" width="450" height="325">
<title>Greenbank Plant Nursery</title>
<text class="p-name">
<tspan font-size="88">Green<tspan x="252">b</tspan>ank</tspan>
<tspan font-size="30">Plant Nursery</tspan>
</text>
<!-- additional SVG elements to draw graphic parts of logo -->
</svg>

</h1>

<address class="p-adr h-adr">
<div class="p-street-address">
11610 NE 97th Ln
</div>
<span class="p-locality">Kirkland</span>,
<abbr class="p-region">WA</abbr>
<span class="p-postal-code">98033</span>
</address>

</header>

A few of things to note:

How a microformats validator sees Greenbank Plant Nursery's SVG text

I put Greenbank Plant Nursery's website into a microformats validator and got this result:

a JSON object representing microformats on Greenbank Plant Nursery's website, produced by an online validator

The microformats parser has correctly identified the name and logo from the <svg> element (along with items from the <address> element).

How search engines see Greenbank Plant Nursery's SVG text

One more thing: in the SVG code, the “b” in “Greenbank” is in its own <tspan> element (to get it to line up with the graphics in the logo). For reasons that I don't understand, SVG parsers insert a space around that letter. I think that's wrong, but let's put aside parsing rules, and look instead at search result text snippets produced by DuckDuckGo and Google:

DuckDuckGo search results
Google search results

See the space around the “b?” That's proof that the search engines are parsing the text inside the SVG element.