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 micoformats h-card for the business
• the <h1> element's class attribute is e-logo, which tells microformats parsers that the logo for this business is the SVG element embedded in that <h1>
• the <text> element with its class set to p-name tells parsers that the business name is “Greenbank Plant Nursery”
• the <address> element in the <header> is a nested microformats h-adr (established with the attribute class="p-adr h-adr"); the h-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.