Create shareable annotations for HTML, XML, SVG files

I am looking for the best approach for creating annotations for the following using JS/Angular/NodeJS.

 1. Annotating HTML - (comments, drawings, highlighting, etc)
 2. Annotating XML - (comments, drawings, highlighting, etc)
 3. Annotating SVG - (comments, drawings, highlighting, etc)

The implementation can be done using relative elements like HTML elements for HTML annotations etc.

But the implementation has to have a best way of having

 1. a unique reference to a specific annotated object
 2. able to export annotated objects related data in any structure like JSON
 3. able to import exported data and append/create related annotations 
using the unique reference based on the X, Y positions

So that all annotations can be shared among users and users would be able to import annotations to the same valid document.

What are the best patterns, strategies, and things that I need to consider for the above requirement? If any guidelines, libraries are existing please share the links.

But custom implementation is the most preferred way

Thank you

from Create shareable annotations for HTML, XML, SVG files