Using SVG in web pages offers many advantages:
- SVG file sizes are usually small compared to bitmapped graphics
- it adapts well to different screen resolutions and display dimensions
- it can be styled with CSS
- it can be scripted
- SVG
<text>
elements can be indexed by search engines
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:
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:

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:
- the
<header>
element is a micoformatsh-card
for the business - the
<h1>
element'sclass
attribute ise-logo
, which tells microformats parsers that the logo for this business is the SVG element embedded in that<h1>
- the
<text>
element with itsclass
set top-name
tells parsers that the business name is “Greenbank Plant Nursery” - the
<address>
element in the<header>
is a nested microformatsh-adr
(established with the attributeclass="p-adr h-adr"
); theh-adr
specifies the business address, with classnames for street address, locality, etc.
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:

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:


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