"obabel ... -o svg -xP300" - Scale SVG Image

Q

How to scale and center a molecule SVG image in a given square area?

✍: FYIcenter.com

A

The default behavior of Open Babel 2.4 is different than 2.3 regarding scaling and centering SVG images.

With Open Babel 2.4, the molecule SVG image is defaulted in the center of 200x200 square.

With Open Babel 2.3, the molecule SVG image is defaulted in a rectangular area calculated as the boundary boxing all atom's x and y coordinates.

If you want to place the molecule SVG image in the center of a given square area, you can use the "-o svg -xPnnn" option with the "obabel" command.

Here is how the "-xPnnn" option is described in Open Babel help document: "P# - px Single mol in defined size image The General option --px # is an alternative to the above."

For example, the following command generate a SVG picture of a carbon chain displayed in the center of a 300x300 square area.

fyicenter$ obabel -:CCCCCCC -O carbon-chain-centered.svg --gen -xC -xt -xP300

1 molecule converted

As a comparison, running the following command with Open Babel 2.3 generates a SVG picture of a carbon chain displayed in rectangular area just large enough to cover all carbon atoms.

fyicenter$ obabel -version 
Open Babel 2.3.1 -- Oct 13 2011 -- 15:14:48
  
fyicenter$ obabel -:CCCCCCC -O carbon-chain-default.svg --gen -xC -xt

1 molecule converted

Put both images, carbon-chain-default.svg and carbon-chain-centered.svg, in an HTML document with grey background, you see the differences:

Carbon Chain Molecule Scaled Up
Carbon Chain Molecule Scaled Up

 

Scaling SVG Images using "viewBox" Attribute

"babel ... -o svg" - Two "svg" Tag Levels

"babel ... -o svg" - Generating SVG Pictures

⇑⇑ Open Babel Tutorials

2020-07-22, 1193🔥, 0💬