From Wikimedia Commons, the free media repository
Jump to navigation Jump to search
Freie Universität Institut für Chemie.jpg
Babel user information
Users by language

Text in SVG - Objects or paths?[edit]

In SVG, information can be stored as objects or as paths. For example, if an image contains the letter "H", this letter can be stored as an object (draw a textbox at position x,y and inside this textbox draw a capital letter H, font Arial, size 10pt) or as a path (in position x,y draw a vertical line, then right thereof a horizontal line in the center of the first line, then another vertical line at the right end of the horizontal line).

Both options have advantages and disadvantages:

The object variant is smaller in file size and preserves the "intention" of each thing in an image: the text strings in a textbox are preserved and can therefore be edited afterwards easily; but the correct rendering of an image requires that the renderer knows the used font, paragraph options etc. This is often not the case for different renderers: an image that looks as intended in Inkscape on Windows or in a web browser will probably look significantly different on Wikimedia Commons. Especially chemical formulas containing super- and subtext tend to mess up.
An image containing only paths will look virtually the same everywhere, regardless of installed fonts etc. By converting SVGs from objects to paths (for example using Inkscape by selecting all objects (ctrl+A) and converting them to paths (ctrl+shift+C)), one can make sure that an image will look as intended after uploading to Wikimedia Commons. But all-path images are larger in file size and harder to edit, because all strings in the image are lost - this can be unpractical for translating SVG images or editing spelling mistakes.

Therefore, until the rendering of textboxes in SVGs on Wikipedia has been improved, I've decided to upload both versions of all SVG files containing a significant amount of text: first the object version, for other users to edit easily. The path version (version comment: "objects converted to paths") comes second, to make sure the image will look as intended. In case that at some point the Wikimedia SVG renderer will improve significantly, feel free to revert all my uploads to the objects version.
If you want to edit one of those SVGs, it's probably better to go for the objects version. After editing, I'd suggest that you again first upload the edited objects version and then overwrite it with the paths version for beautiful optics.

Reduce SVG file sizes[edit]

I just noticed that just opening the SVG file generated by the structure drawing program and saving it as plain SVG in inkscape doubles the SVG filesize. This appears to occur because of increased precision due to integer<->float conversion problems in inkscape. stroke-width:0.6 is changed to stroke-width:0.60000002 upon plain SVG saving in inkscape.
Solution: save as optimized SVG in inkscape and set number of significant digits to something like 5. This will lead to a rounding of the majority of stored numbers. For further optimization, the tool SVGO (also available as web page SVGOMG on github) has proven to be useful (merge paths, round numbers, remove metadata).
I have used these optimizations for all SVGs I uploaded, resulting on average in a 50% reduction in file size.

My Contributions[edit]

I mainly focus on redrawing frequently used chemical images as SVGs. I use the categories Chemical_images_that_should_use_vector_graphics and Chemistry_images_that_should_use_vector_graphics to find out which images require attention. From time to time, I also edit other people's SVGs if they contain errors.

Most images that I made originally can be found in Category:Files_by_User:Hbf878. Statistics about their usage can be found here.

My style[edit]

My drawing settings are similar (but not identical) to ACS.

  • Bond length: 0.508 cm
  • Double bond spacing: 16% (ACS: 18%)
  • Line width: 0.021 cm
  • Hash spacing: 0.078 cm (ACS: 0.088 cm)
  • Font: Arial
  • Fontsize: 9 pt (ACS: 10 pt) for molecules, 8 pt for reagents / reaction conditions etc

Usually I then convert the generated SVG to all-paths (see above). However, if an image contains large amounts of text, I set the font to Liberation Sans and don't convert text to path to keep file size low and text editable. If an SVG contains plain, non-path text with small font size, scaling up the textboxes or the whole SVG may be helpful to stop character spacing from messing up (see Help:SVG#Text_transform_limitations).