svg: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(Adds simple example of microformats in svg.)
(→‎Examples: Removes unneeded rect element)
 
(5 intermediate revisions by the same user not shown)
Line 4: Line 4:




== Example ==
== Examples ==


Here is a simple example:
Here are a couple of examples.


<source lang=html>
* a simple [[h-card]] using [[microformats2-implied-properties | implied properties]]:
 
<syntaxhighlight lang=xml>
<svg class="h-card" viewBox="0 0 200 200" height="200" width="200">
<svg class="h-card" viewBox="0 0 200 200" height="200" width="200">
     <circle cx="50%" cy="50%" r="100" fill="gold"/>
     <circle cx="50%" cy="50%" r="100" fill="gold"/>
    <text x="25" y="110" font-size="30">
        Example Co.
    </text>
</svg>
</syntaxhighlight>
Parsed JSON:
<syntaxhighlight lang="json">
{
"items": [
  {
  "type": [
    "h-card"
  ],
  "properties": {
    "name": [
    "Example Co."
    ]
  }
  }
],
"rels": {},
"rel-urls": {}
}
}
</syntaxhighlight>
* a slightly more complex example of an [[h-card]] with several specified properties and an embedded [[h-adr]]:
<syntaxhighlight lang=xml>
<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">
     <text class="p-name" x="25" y="110" font-size="30">
         Example Co.
         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>
     </text>
</svg>
</svg>
</source>
</syntaxhighlight>
 
Parsed JSON:
 
<syntaxhighlight lang="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": {}
}
</syntaxhighlight>


== See also ==
== See also ==


* https://btrem.com/2021/04-svg-microformats
* https://btrem.com/2021/04-svg-microformats

Latest revision as of 15:55, 1 December 2022

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.

<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": {}
}

See also