Story/204309 graphical rdf (#56)

[Pull requests practices for the SSI
team](https://github.com/equinor/ssi-infrastructure/blob/main/docs/pr_practices.md)

## Aim of the PR
This PR fixes
[AB#204309](https://dev.azure.com/EquinorASA/bb9bd8cb-74f7-4ffa-b0cb-60eff0a0be58/_workitems/edit/204309)

This PR aims to add examples regarding how the graphical format of DEXPI
looks in RDF.

## Implementation 
Please provide an overview of how this change achieves the goal.

## Type of change
- [ ] Bug fix 
- [ ] New feature 
- [ ] Breaking change 
- [ ] This change requires a documentation update
- [X] Documentation

If the changes impact any dependent services then provide details.

## Additional Changes
Creation of separate JSON example for the frontend-spec put into the
examples folder.

examples/frontend.json

@@ -0,0 +1,48 @@
+{
+    "diagramName": "Test P&ID",
+    "extent": {
+      "min": {
+        "x": 100,
+        "y": 100
+      },
+      "max": {
+        "x": 200,
+        "y": 200
+      }
+    },
+    "symbols": [
+    {
+        "id": "https://assetid.equinor.com/plantx#PressureVessel-1",
+        "position": {
+            "x": 390,
+            "y": 210,
+            "rotation": 0
+        },
+        "svg": "<g><g id=\"cell-B1rrrl92oq_uFDzy55uY-28\" layer=\"Symbol\"><path d=\"M-15.996356010437012 39.98589116483927C-15.996356010437012 44.469869709014894-8.834237549826502 48.10404184013605 0 48.10404184013605 8.834237549826502 48.10404184013605 15.996356010437012 44.469869709014894 15.996356010437012 39.98589116483927Z\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-miterlimit=\"10\" pointer-events=\"all\" stroke-width=\"0.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><g id=\"cell-B1rrrl92oq_uFDzy55uY-26\" layer=\"Symbol\"><path d=\"M15.996356010437012-39.94340071070255C15.996356010437012-44.31865402261973 8.834237549826502-47.865346081808816 1.7759522752888181e-15-47.865346081808816-8.834237549826502-47.86534608180882-15.996356010437012-44.31865402261974-15.996356010437012-39.943400710702555Z\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-miterlimit=\"10\" pointer-events=\"all\" stroke-width=\"0.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><g id=\"cell-B1rrrl92oq_uFDzy55uY-0\" layer=\"Symbol\"><path fill=\"none\" stroke=\"rgb(0, 0, 0)\" pointer-events=\"all\" d=\"M15.978860987646-39.97214345735053L15.978860987646003 39.98964114982147-16.013851033228025 39.98964114982149-16.013851033228025-39.97214345735053z\" stroke-width=\"0.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><g id=\"cell-jyOudCda0Ud9WsIjt9Yr-0\" content=\"&lt;object label=&quot;%LabelLines%&amp;amp;nbsp; &amp;amp;nbsp; &amp;amp;nbsp; &amp;amp;nbsp; &amp;amp;nbsp; &amp;amp;nbsp;%LabelIndex%&quot; placeholders=&quot;1&quot; LabelLines=&quot;1&quot; LabelIndex=&quot;A&quot;/&gt;\" data-label=\"%LabelLines%&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;%LabelIndex%\" data-placeholders=\"1\" data-LabelLines=\"1\" data-LabelIndex=\"A\" layer=\"Label\"><path fill=\"none\" stroke=\"#ff0000\" pointer-events=\"all\" d=\"M-5.016357267647981-0.9910242434591063L4.981365238875153-0.9910242434591063 4.981365238875153 1.0085202578455201-5.016357267647981 1.0085202578455201z\" vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><g><text x=\"90\" y=\"386\" fill=\"#FF0000\" font-family=\"Helvetica\" font-size=\"10px\" transform=\"scale(0.124972 0.124972) translate(-128 -383) translate(-0.5 -0.5)\" vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\">1           A</text></g></g><g id=\"cell-22vkG-h5v2N9dKBLQ-ZE-137\" content=\"&lt;object label=&quot;origo&quot;/&gt;\" data-label=\"origo\" layer=\"Origo\"><ellipse cx=\"0\" cy=\"0\" rx=\"0.25\" ry=\"0.25\" fill=\"none\" stroke=\"#ff0000\" vector-effect=\"non-scaling-stroke\"/></g></g>"
+        }
+    ],
+    "lines": [
+    {
+        "id": "https://assetid.equinor.com/plantx#GateValve-5-node2-connector",
+        "coordinates": [
+            {
+            "x": 646,
+            "y": 188
+            },
+            {
+            "x": 646,
+            "y": 180
+            },
+            {
+            "x": 412,
+            "y": 180
+            }
+        ],
+        "style": {
+            "stroke-dasharray": "none",
+            "stroke-width": "1,4",
+            "stroke": "rgb(255,255,255)"
+        }
+        }
+    ]
+  }

examples/graphical.trig

@@ -0,0 +1,68 @@
+@prefix : <http://example.org/> .
+@prefix css: <https://www.w3.org/TR/css-color-4#> .
+@prefix graphic: <http://example.org/data/> .
+@prefix document: <https://assetid.equinor.com/plantx/document/> .
+@prefix symbol: <https://example.com/pca/symbol/> .
+
+# This example is based on the examples in <file>
+
+document:doc1234 a :PID ;
+    :visualisedAs graphic:doc1234 .
+
+document:PressureVessel-1 :visualisedAs graphic:PressureVessel-1 .
+document:GateValve-5-node2-connector :visualisedAs graphic:GateValve-5-node2-connector .
+
+
+graphic:doc1234 a :Diagram ;
+    :hasExtent [
+        a :Extent ;
+        :minimumExtent [ :x 100 ; :y 100 ] ;
+        :maximumExtent [ :x 200 ; :y 200 ]
+    ] ;
+        :hasSymbol graphic:PressureVessel-1 ;
+        :hasLine graphic:GateValve-5-node2-connector .
+
+
+graphic:PressureVessel-1 a :Symbol ;
+    :hasPosition [
+        a :Position ;
+        :x 390 ;
+        :y 210 ;
+        :rotation 0
+    ];
+    :hasGraphics symbol:PT002A .
+
+graphic:GateValve-5-node2-connector a :Line ;
+    :hasCoordinates (
+        [
+            a :Position ;
+            :x 646 ;
+            :y 188
+        ] 
+        [            
+            a :Position ;
+            :x 646 ;
+            :y 180
+        ]
+        [            
+            a :Position ;
+            :x 412 ;
+            :y 180
+        ]
+    );
+    :hasStyle [
+        :hasStroke [
+            a :Stroke ;
+            :dasharray "none"^^xsd:css ;
+            :width 1.4 ;
+            :color [
+                a :Color ;
+                :type :rgb ;
+                :red 255 ;
+                :green 255 ;
+                :blue 255
+            ] ;
+            :color "rgb(255,255,255)"^^css:funcdef-rgb
+        ]
+    ] ;
+    :hasStyle "stroke-dasharray:none; stroke:rgb(255,255,255); stroke-width:1.4"^^css:style .