Creating SVG for use as mx annotation overlays

From mx Help Wiki
Jump to: navigation, search

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: 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:
  • 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 [Fig.1]
  • Go to the 'Edit' menu and select 'Guides Around Page'; you should now see blue lines around the frame [Fig.2]
  • Under the 'View' menu, click 'Snap' - the blue grid icon and backwards blue "N"-like icon should be activated on the middle row
  • Enable the 'Snap to guides' icon (the backwards blue "N"-like icon) [Fig.2]
  • Drag the image to the upper left corner of the center grid/frame until it snaps into place [Fig.2]
Fig.1 Inkscape 'File' menu showing 'Import' function.
Fig.2 Inkscape interface showing blue guides, 'Snap to guides' icon (red circle) and the image snapped to upper left corner.
  • 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) [Fig.3]
  • Before starting the annotation on the new layer, lock the base image layer
  • Using the 'Draw freehand lines' tool on the left toolbar, draw a rough outline of the area you want to highlight; make sure to close the object [Fig.4]
  • Drag and modify the curves/lines of the outline using the 'Edit paths by nodes' tool [Fig.4]
  • Once the outline is drawn, you can click on a color at the bottom to fill the object with a color (and set the "O:" near the swatch to 25 for 25% opacity) which may aid in seeing how the annotation will look; however, it is not necessary to fill, or choose a line color/weight, before saving - these settings are coded in mx
  • Lastly, save the file; Inkscape files are, by default, SVG, so you should not need to convert or export to an SVG file
  • When all of these steps are finished go to the App/figure/annotate page for instructions on how to enter the SVG code into mx

Fig.3 Creating and naming a new layer.
Fig.4 Outline drawn with the 'Draw freehand lines' tool (pink circle) and modified with the 'Edit paths by nodes' (yellow circle).
Personal tools