Displaying Annotations with SVG selectors

Currently, can only get rectangles and SVG path displayed correctly. However, other SVG shapes are not showing outlines in Mirador.

Example selector values:

Circles

"selector": {
      "type": "SvgSelector",
      "value": "<svg><circle cx=\"711.9518432617188\" cy=\"1822.427490234375\" r=\"248.37626687954497\"></circle></svg>"
}

Ellipses

"selector": {
    "type": "SvgSelector",
    "value": "<svg><ellipse cx=\"3476.093994140625\" cy=\"1242.9108276367188\" rx=\"400.323974609375\" ry=\"175.38006591796875\"></ellipse></svg>"
}

Polygons

"selector": {
    "type": "SvgSelector",
    "value": "<svg><polygon points=\"2611.90234375,2079.505615234375 3570.349853515625,2211.8876953125 3501.51123046875,2370.74658203125 3294.994873046875,2524.31005859375 2770.760986328125,2450.17578125 2596.016357421875,2254.25\"></polygon></svg>"
}

Are these shapes supported in Mirador 3?

I'm having the same problem. Only rectangle fragment selectors and SVG paths are showing. Are other shape types not supported at the moment?

For reference, I'm pasting a list of annotations below. Only the first and the last one load, but not the ellipse. (Polygon annotations don't load either.) All annotations shapes work fine in Theseus viewer.

[
  {
    "id": "https://iiif.io/api/cookbook/recipe/0001-mvm-image/canvas/p1/page/p1",
    "type": "AnnotationPage",
    "items": [
      {
        "id": "https://iiif.io/api/cookbook/recipe/0001-mvm-image/canvas/p1/47fecdae-a9be-4248-8afe-02036494018b",
        "type": "Annotation",
        "motivation": "commenting",
        "body": [
          {
            "created": "2025-01-15T06:11:56.421Z",
            "creator": "Rainer Simon",
            "purpose": "commenting",
            "type": "TextualBody",
            "format": "text/html",
            "value": "<p>Test (rectangle)</p>"
          }
        ],
        "target": "https://iiif.io/api/cookbook/recipe/0001-mvm-image/canvas/p1#xywh=212,37,795,118"
      },
      {
        "id": "https://iiif.io/api/cookbook/recipe/0001-mvm-image/canvas/p1/058f22b4-f7d5-43e2-a9bb-12985338aae8",
        "type": "Annotation",
        "motivation": "commenting",
        "body": [
          {
            "created": "2025-01-15T06:12:07.539Z",
            "creator": "Rainer Simon",
            "purpose": "commenting",
            "type": "TextualBody",
            "format": "text/html",
            "value": "<p>Test (polygon)</p>"
          }
        ],
        "target": {
          "type": "SpecificResource",
          "source": "https://iiif.io/api/cookbook/recipe/0001-mvm-image/canvas/p1",
          "selector": {
            "type": "SvgSelector",
            "value": "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g><polygon points='242,633 340,552 948,1173 859,1249' /></g></svg>"
          }
        }
      },
      {
        "id": "https://iiif.io/api/cookbook/recipe/0001-mvm-image/canvas/p1/0654ce3a-f0a1-4f01-9a6e-531bb62d1e3e",
        "type": "Annotation",
        "motivation": "commenting",
        "body": [
          {
            "created": "2025-01-15T06:12:16.154Z",
            "creator": "Rainer Simon",
            "purpose": "commenting",
            "type": "TextualBody",
            "format": "text/html",
            "value": "<p>Test (ellipse)</p>"
          }
        ],
        "target": {
          "type": "SpecificResource",
          "source": "https://iiif.io/api/cookbook/recipe/0001-mvm-image/canvas/p1",
          "selector": {
            "type": "SvgSelector",
            "value": "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g><path d='M270.000000,1900.000000 L1530.000000,1900.000000 L1530.000000,1610.000000 L1315.000000,1300.000000 L1200.000000,986.000000 L904.000000,661.000000 L600.000000,986.000000 L500.000000,1300.000000 L270,1630 L270.000000,1900.000000' /></g></svg>"
          }
        }
      }
    ]
  }
]

I encountered the same problem when working on IIIF support for my annotation server. I solved it using a combination of xmlattrdict and svg-shape-to-path-pmb.

However, I still have a problem when the SVG selector was created on a different resolution of the image. In my understanding of the Web Annotation spec, all selectors in this manifest (view in Mirador) describe the same shape, just with different precision. In my understanding (discuss here: Viewport for SvgSelector), anno clients should scale the selector based on the given size information, and since height is missing, aspect ratio shall be preserved. My current work-around is to scale all the numbers server-side, but it would be really nice to have this in Mirador soon.

Edit: I added examples with explicit height in case Mirador maintainers want to not have an opinion on the viewport issue. When width and height are both given, maybe even with explicit pixels unit, there should be no doubt; and calculating just the height would already save lots of computation on my server.

Hi, I face also problem to display SVG.

It seems that Mirador doesnot support stroke color. I'm able to set fill color or stroke width.

Demo manifest https://files.tetras-libre.fr/dev/sun-400x400-with-svg-target.json

Where find the list of supported tags or element in SVG inside Mirador ?

To workaround on ellipse shape, i export it as path

For example :

<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='400' height='400'><defs/><g><g><path fill='none' stroke='rgb(255,0,0' paint-order='fill stroke markers' d=' M 281.0685798970349 61.180065246496014 A 82.57774946079108 34.71624436924178 0 1 1 281.06853860816364 61.14534900791279 Z' stroke-miterlimit='10' stroke-width='7.135946093347073' stroke-dasharray=''/></g></g></svg>