Wikipedia:WikiProject Chemistry/Structure drawing workgroup/SVG guide

This page exists as a guide to drawing SVG chemical structures. It is still under construction, and at this stage it only contains suggestions from some of the project members on how they achieve their results.

See also Wikipedia:Manual_of_Style/Chemistry/Structure_drawing#Generating_SVG_files for more information on drawing chemical SVG structures.

Drawing structures from scratch in inkscape

Making hexagonal structures

Often, the main problem with drawing chemical structures in inkscape is that it does not have a hexagonal matrix built in. One can use the polygon/star tool (make sure that it's set to "polygon", checkbox at top, and that it's set to 6 corners). Hold down "ctrl" while drawing the first hexagon to get the angles straight. If you only want the hexagon for aliphatic backbones, you can now convert the hexagon to a path (Path -> Object to path) so that you can manipulate the lines.

Making aromatic structures

To make aromatic rings, duplicate the hexagon (I use the "clone" function, and then unlink the clone, that way it's in the same place as the original) and using the polygon tool, hold down "ctrl", and then move the handle inwards until you have the right space between the inner and outer hexagon. Now you can convert the hexagons from "polygon" objects to "path" objects. Then remove three spokes of the inner hexagon ("split path between two non-endpoint nodes" is the tool of choice here) and group the two paths. Now you have an aromatic ring which you can move around as necessary, and clone or copy. A copy of the inner hexagon from an aromatic ring is great for substituents to aromatic rings: Select a spoke by clicking on the centre, and then drag it where you want by dragging on one of the ends. If you try to drag it by the centre, you'll bend it, and if you drag a handle before selecting the whole spoke, you'll just move one end, not the whole spoke.

Joining and splitting lines

If you are building up an aliphatic structure, you will need to make yourself some 60° and 30° lines by converting a hexagon to a path (as above). You can now split it at the nodes and move the segments around as described. Now you want to join the segments to form a single line (to reduce file size and make a simpler structure). First you need to select all the segments in question and do "Path -> Combine". Then you can join the nodes using the node tools.

Importing WMF files into inkscape

Some molecule editors (e.g. ChemSketch) can produce WMF files which can be read by recent versions of inkscape.

One way to do this is to export the file to a TIFF as well as a WMF. You can then use the TIFF as a background image to get the label placement as accurate as possible. The process is basically as follows:

1. Draw structure in ChemSketch, clean up, check stereochemistry, etc.
2. Select structure and apply the desired style (several templates are available)
3. Export to TIFF at a high resolution (the TIFF will be used as a guide for label placement)
4. Export to WMF
5. Import both to Inkscape, align WMF on top of TIFF
6. Add atom labels and join bonds (optional), delete TIFF (Important! You don't want an embedded bitmap, as it won't upload properly.)
7. Save as plain SVG.

This solution is a bit time-consuming, but good results can be achieved this way.

Cleaning up SVG files

I am a miser when it comes to file size and cruft, so I like to go over my svg files in a text editor after creating them. This is not generally a wise investment in time, but if you want to streamline a large SVG file, the following observations might be useful:

• Most of the time, truncating co-ordinates (e.g. from 234.7932412 to 234) makes no observable difference to a picture. This can be done with a simple search-and-replace.
• Often, SVG editors will specify unnecessary parameters (e.g. stroke:none;stroke-width:1px; — the stroke-width parameter is superfluous if stroke is "none") which can be removed with a search-and-replace.
• Often, SVG editors specify default parameters (e.g. fill-opacity:1;) which can also be removed.

Editing Chemtool files in Inkscape

Chemtool by default saves text as Helvetica or Times, which is currently not properly interpreted by inkscape. Before editing an svg file from chemtool and xfig, therefore, it is sensible to do a search and replace, changing all instances of "Helvetica" to "Sans" and all instances of "Times" to "Serif".

Drawing structures with BKchem

• Draw the structure in BKchem, and configure cropping (under "File -> File properties")
• Run it through User:Mysid's perl script to fix subscripts, superscripts, fonts, etc.
• Edit in inkscape or a text editor or both if required.