Difference between revisions of "Creating SVG for use as mx annotation overlays"

From mx Help Wiki
Jump to: navigation, search
Line 10: Line 10:
 
*Open inkscape and go to 'File > Import' (Ctrl+I); select the image that you want to annotate
 
*Open inkscape and go to 'File > Import' (Ctrl+I); select the image that you want to annotate
 
*Go to the 'Edit' menu and select 'Guides Around Page'; you should now see blue lines around the frame
 
*Go to the 'Edit' menu and select 'Guides Around Page'; you should now see blue lines around the frame
*Under the 'View' menu, click 'Snap' - the blue grid icon and backwards blue "N"-like icon should be activated
+
*Under the 'View' menu, click 'Snap' - the blue grid icon and backwards blue "N"-like icon should be activated on the middle row
*Click the 'Snap to guides' icon - the backwards blue "N"-like icon on the middle row
+
*Click the 'Snap to guides' icon (the backwards blue "N"-like icon)
 
*Drag the image to the top left corner until it snaps into place
 
*Drag the image to the top left corner until it snaps into place
 +
*Next go to the 'Layer' menu and select 'Add Layer'; ''if you are going to do multiple annotations on one image, rename each layer with the name of the class that you are annotating (this will help you identify what part of the SVG code to select later)''
  
  

Revision as of 09:52, 9 July 2010

Before you can annotate images in mx, you need to draw the annotation in image illustration software. For our purposes we are using Inkscape (freeware available here: http://www.inkscape.org/) or Adobe Illustrator, but any such vector-based program with capabilities to save as an SVG (Scalable Vector Graphics) file should work.

  • for either application, the original image must be saved on the user's hard drive (e.g. from a microscope-captured image or off of an image database such as MorphBank: http://www.morphbank.net/)
  • it is a good idea to record the actual dimensions of the image (which can be found by right-clicking the file and viewing the 'Properties > Details') especially when using Illustrator (as Illustrator tends to re-size the image when imported)
  • the basic idea will be that if you zero the image as a base layer in illustration software and draw an overlay highlighting the structure, the SVG code will be translated as that exact overlay in mx

Instructions for Inkscape:

  • Open inkscape and go to 'File > Import' (Ctrl+I); select the image that you want to annotate
  • Go to the 'Edit' menu and select 'Guides Around Page'; you should now see blue lines around the frame
  • Under the 'View' menu, click 'Snap' - the blue grid icon and backwards blue "N"-like icon should be activated on the middle row
  • Click the 'Snap to guides' icon (the backwards blue "N"-like icon)
  • Drag the image to the top left corner until it snaps into place
  • Next go to the 'Layer' menu and select 'Add Layer'; if you are going to do multiple annotations on one image, rename each layer with the name of the class that you are annotating (this will help you identify what part of the SVG code to select later)




You will have to have the original image attached as a figure to the class that you will be annotating, prior to annotation (in this case we are on the "tibial spur" class). Go to the image annotate page either through the figures tab in the image section of mx or through the figures tab on a class page; there you will see a page similar to the one at right.

Annotate page before SVG code pasted.
Personal tools