Scale SVG Images using "viewBox" Attribute

This section provides a tutorial example on how to scale SVG images by changing 'viewBox' attributes in molecule SVG file generated by Open Babel 'obabel ... -o svg' command.

What Is the <svg viewBox="..." ...> Tag in SVG File? - The <svg viewBox="..." ...> attribute defines view box properties which is used together with view port properties to scale and translate a SVG image.

View Port Properties - Specified by 4 attributes, "x", "y", "width", and "height". They are used to define the visible area of this SVG image in the coordinate system of the parent element. Default values are x="0", y="0", width="100%", height="100%". Here 100% stands for scaling to the same size of the parent element.

View Box Properties - Specified by 1 attribute, "viewBox", which contains 4 components, x, y, width, and height. They are used to define the visible area of this SVG image, in the coordinate system used to draw this SVG image. Default value is viewBox="0, 0, 100%, 100%". Here 100% stands for scaling to the same size of the view port.

When a SVG image is rendered, all drawings within the view box will be mapped (scaled and translated) to the view port with or without respecting the aspect ratio, depending on the "preserveAspectRatio" value. All drawing outside the view box will be chopped off.

Note that the origin point (x="0", y="0") of the view port of the root "svg" element is useless, because it does not have any parent coordinate system to map to.

Example 1: Default View Box with No Scaling and Translation - The following HTML document displays a SVG image with a circle with a cross in a 200x200 area. The view port coordinate origin <svg x="-150" y="-150" ...> is useless, because it is the root "svg" element and can not be mapped the HTML "body" parent. Default view box is used, so there is no scaling and no translation.

<html><body>
<svg xmlns="http://www.w3.org/2000/svg"
  x="-150" y="-150" width="200" height="200">
  <rect x="0" y="0" width="100%" height="100%" fill="rgb(160,160,160)"/>
   <circle cx="100" cy="100" r="100" fill="rgb(255,160,160)"/>
  <line x1="5" y1="5" x2="195" y2="195" stroke="rgb(0,0,0)"/>
  <line x1="5" y1="195" x2="195" y2="5" stroke="rgb(0,0,0)"/>
</svg>
</body></html>

Example 2: Using View Box to Scale and Translate - The following HTML document displays a SVG image with a circle with a cross in a 200x200 area. But view box properties are used to translate the image to the right by 50 pixels and to scale it horizontally without respecting the image ratio.

<html><body>
<svg xmlns="http://www.w3.org/2000/svg"
  x="0" y="0" width="200" height="200"
  viewBox="-50, -50, 250, 200" preserveAspectRatio="none">
  <rect x="-50" y="-50" width="100%" height="100%"
   fill="rgb(160,160,160)"/>
   <circle cx="100" cy="100" r="100" fill="rgb(255,160,160)"/>
  <line x1="5" y1="5" x2="195" y2="195" stroke="rgb(0,0,0)"/>
  <line x1="5" y1="195" x2="195" y2="5" stroke="rgb(0,0,0)"/>
</svg>
</body></html>
SVG View Box for Scaling and Translation
SVG View Box for Scaling and Translation

You can also scale and translate a SVG image by nesting it as a sub-element of the "g" element with a "transform" function.

Table of Contents

 About This Book

 SMILES (Simplified Molecular-Input Line-Entry System)

 Open Babel: The Open Source Chemistry Toolbox

 Using Open Babel Command: "obabel"

Generating SVG Pictures with Open Babel

 "obabel -o svg" - Molecule Picture in SVG

 "obabel -:... -o svg" - Generate SVG from SMILES

 "obabel ... -o svg -xi" - Show Atom Indices in SVG

 "obabel ... -o svg -xS" - Ball/Stick Depiction in SVG

 "obabel ... -o svg -xX" - Hide Implicit H in SVG

 "obabel ... -o svg -xC" - Hide Terminal C in SVG

 "obabel ... -o svg -xP300" - Control Image Size

 "obabel ... -o svg" - Two "svg" XML Tag Levels

 "obabel ... -o svg -xd" - Hide Molecule Name

 "babel ... -o svg -xd -xP300" - Open Babel 2.4 Bug

Scale SVG Images using "viewBox" Attribute

 Substructure Search with Open Babel

 Similarity Search with Open Babel

 Fingerprint Index for Fastsearch with Open Babel

 Stereochemistry with Open Babel

 Command Line Tools Provided by Open Babel

 RDKit: Open-Source Cheminformatics Software

 rdkit.Chem.rdchem - The Core Module

 rdkit.Chem.rdmolfiles - Molecular File Module

 rdkit.Chem.rdDepictor - Compute 2D Coordinates

 rdkit.Chem.Draw - Handle Molecule Images

 Molecule Substructure Search with RDKit

 rdkit.Chem.rdmolops - Molecule Operations

 Daylight Fingerprint Generator in RDKit

 Morgan Fingerprint Generator in RDKit

 RDKit Performance on Substructure Search

 Introduction to Molecular Fingerprints

 OCSR (Optical Chemical Structure Recognition)

 AlphaFold - Protein Structure Prediction

 Resources and Tools

 Cheminformatics Related Terminologies

 References

 Full Version in PDF/EPUB