SVG does not show up in OpenLayers

Question

I tried adding an SVG as a layer on my map but it does not show up.

//For registering EPSG: 2326 
import * as proj4x from 'proj4';
var proj4 = (proj4x as any).default;
import {register} from 'ol/proj/proj4';
proj4.defs('EPSG:2326', '+proj=tmerc +lat_0=22.31213333333334 +lon_0=114.1785555555556 +k=1 +x_0=836694.05 +y_0=819069.8 +ellps=intl +towgs84=-162.619,-276.959,-161.764,0.067753,-2.24365,-1.15883,-1.09425 +units=m +no_defs');
register(proj4);
var projection2326 = get('EPSG:2326');
  var extentTest = [815366.7950903749, 818259.401599934, 815684.9262746248,825970.8994440462 ];

  var projectionTest = new Projection({
    code: 'EPSG:2326',
    units: 'm',
    extent: this.map.getView().calculateExtent(this.map.getSize())
  });

  var SVGLayer = new ImageLayer({
    source: new Static({
    url: 'assets/SvgFile.svg',
    projection: projectionTest,
    imageExtent: extentTest
    })
  });
  this.map.addLayer(SVGLayer);

Am i writing the extent wrong ? The drawing does not show up on the map at all.

Answer 1

Which version of OpenLayers are you using?

By giving it a quick look problem might be in projection. Since EPSG:2326 most likely isn't included in OpenLayers by default.

ol.proj.get( 'EPSG:2326' )

If you null is returned then you should add projection using Proj4js. OpenLayers has example for including custom projection in documentation. It's for WMS but should work the same, if projection is the issue. Link to example.

Edit

I created jsFiddle example using your projection and added simple SVG. In my example I defined layer projection with string only and left it to OpenLayers to find. I also defined SVG source with ImageStatic.

HTML:

<div id="map" class="map"></div>

Javascript:

proj4.defs('EPSG:2326', '+proj=tmerc +lat_0=22.31213333333334 +lon_0=114.1785555555556 +k=1 +x_0=836694.05 +y_0=819069.8 +ellps=intl +towgs84=-162.619,-276.959,-161.764,0.067753,-2.24365,-1.15883,-1.09425 +units=m +no_defs');

ol.proj.proj4.register( proj4 );

//var extentTest = [794188.056612, 802104.408167, 865500.106237, 845113.423228 ];
var extentTest = [815366.7950903749, 818259.401599934, 815684.9262746248,825970.8994440462 ];

var map = new ol.Map({
  layers: [
    new ol.layer.Image({
      source: new ol.source.ImageStatic({
        url: 'https://simplemaps.com/static/svg/hk/hk.svg',
        projection: 'EPSG:2326',
        imageExtent: extentTest
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    projection: 'EPSG:2326',
    center: ol.extent.getCenter(extentTest),
    zoom: 10
  })
});

JSFiddle example