Collaborating on Images with SVG

From OSF Wiki
Jump to: navigation, search

As we see more collaboration forums emerge, one question that naturally arises is the joint authoring or editing of images. This is particularly important as "official" slide decks or presentations come to the fore. There are perhaps many different ways to skin this cat. This article describes the use of the scalable vector graphics format also using the free, open source SVG editing program, Inkscape. This combination can also aid image interchanges with Powerpoints.

Why SVG and Inkscape?

SVG and Inkscape have the following advantages:

  • Vector graphics are far superior to raster images for doing things such as re-sizing or re-coloring, etc.
  • Inkscape is a stable, free, and functional editor (the current version 0.47 is quite mature)
  • The SVG (scalable vector graphics) format is a standard adopted by the W3C after initial development by Adobe
  • SVG is an easily read and editable XML format
  • There is a growing source of online documentation
  • There is a growing repository of SVG graphics examples, including the broadscale use within Wikipedia (a good way to find stuff from this site is with the search "keywords site:http://commons.wikimedia.org filetype:svg" on your favorite search engine, after substituting your specific keywords).

How to Collaborate with Inkscape

Once you have a working image in Inkscape, make sure all collaborators have a copy of the software. Then:

  1. Isolate the picture (sometimes there are multiple images in a single file) by deleting all extraneous image stuff in the file
  2. From the toolbar, click on the Zoom to fit drawing in window icon (double squares in the magnifying glass); this will resize and put your target image in the full display window
  3. Under File -> Document Properties ... check Show page border and Show border shadow, then Fit page to selection. This helps size the image properly in the exported file for sharing or collaboration
  4. Save the file as an *.svg option, and name the file with a date/time stamp and author extension (useful for tracking multiple author edits over time)
  5. If in multiple author mode, make sure who has current "ownership" of the image is clear.

How to Share with Powerpoint

Of course, it is more often the case that not all collaborators may have a copy of Inkscape or that the image began in the SVG format.

The image below began as a Windows Powerpoint clip art file, which has then gone through some modifications. Note the bearded guy's hand holding the paper is out of registry. Also note we have the border from Inkscape as suggested above.  This file, BTW, is people.png, and was created as a PNG after a screen capture from Inkscape:

PNG representation of an SVG

When beginning in Powerpoint or as clip art, files in the format of Windows metafile (*.wmf) or extended WMF (*.emf) work well. (For example, you can download and play with the native Inkscape format of people.svg, or the people.wmf or people.emf versions of the image above.) If you already have images in a Powerpoint presentation, save in one of these two formats, with (*.emf) preferred. (EMF is generally better for text.)

You can open or load these files directly into Inkscape. Generally, they will come in as a group of vectors; to edit the pieces, you should "ungroup."

After editing per the instructions in the previous section, if you need to re-insert back into Powerpoint, please use the *.emf format (and make sure you do not save text as paths).

For example, see the following PNG graphic taken from a Inkscape file (figure_text.svg):

PNG representation of an SVG

You can save it as an EMF (figure_textpath.emf) to a Powerpoint, with the option of converting text to paths:

Text-to-path EMF

Or, you can save it as an EMF (figure_text.emf) to a Powerpoint, only this time not converting text to paths and then "ungrouping" once in Powerpoint:

EMF with no text to path

Note the latter option, text not as path, is the far superior one. However, also note that borders are added to the figures and vertical text is rotated 90o back to horizontal. Nonetheless, the figure is fully editable, including text. Also, if the original Inkscape figures are constructed with lines of the same color as fills, the border conversion also works well.

Because there can be orientation and other changes going from Inkscape to Powerpoint, it is probably best to use Inkscape and its native SVG for all early modifications and to then use it to keep a canonical copy of your images. Then, prior to completion of the deck, save as EMF for import into Powerpoint and then clean up. If changes later need to be made to the graphic, you can then do so in Inkscape and then re-import.

Other Alternatives

There is also an option in Inkscape to convert raster images to vector ones (use Path -> Trace bitmap ... and invoke the multiple scans with colors). This is doable, but involves quite a bit of image copying, manipulation and color separation to achieve workable results. You may want to see further Inkscape's documentation on tracing, or more fully this reference dealing with color.