svg

This article is a stub. You can help the microformats.org wiki by expanding it.

The class attribute is allowed on SVG elements. As such, there are rich possibilities for embedding microformats with or in them.

Examples

Here are a couple of examples.

• a simple h-card using implied properties:

<svg class="h-card" 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>

Parsed JSON:

{
 "items": [
  {
   "type": [
    "h-card"
   ], 
   "properties": {
    "name": [
     "Example Co."
    ]
   }
  }
 ], 
 "rels": {}, 
 "rel-urls": {}
 }
}

• a slightly more complex example of an h-card with several specified properties and an embedded h-adr:

<svg class="h-card" viewBox="0 0 300 300" height="300" width="300">
    <circle cx="100" cy="100" r="100" fill="gold"/>
    <text class="p-name" x="25" y="110" font-size="30">
        Example Co.
    </text>
    <g class="p-adr h-adr">
        <text class="p-street-address" x="25" y="220" font-size="18">
            123 Main St.
        </text>
        <text x="25" y="240" font-size="18">
            <tspan class="p-locality">Pleasantville</tspan>,
            <tspan class="p-region">California</tspan>
            <tspan class="p-postal-code">90091</tspan>
        </text>
    </g>
    <text class="p-tel" x="25" y="260" font-size="18">
        +1-323-555-0100
    </text>
</svg>

Parsed JSON:

{
 "items": [
  {
   "type": [
    "h-card"
   ], 
   "properties": {
    "name": [
     "Example Co."
    ], 
    "adr": [
     {
      "type": [
       "h-adr"
      ], 
      "properties": {
       "street-address": [
        "123 Main St."
       ], 
       "locality": [
        "Pleasantville"
       ], 
       "region": [
        "California"
       ], 
       "postal-code": [
        "90091"
       ]
      }, 
      "value": "123 Main St.  Pleasantville, California 90091"
     }
    ], 
    "tel": [
     "+1-323-555-0100"
    ]
   }
  }
 ], 
 "rels": {}, 
 "rel-urls": {}
}

Examples in the wild

• https://btrem.com/2021/04-svg-microformats — also a great how to with code examples!

See also

• XML