osvg 1.1.0

osvg is a python API to create SVG XML code with object-oriented elements

Object-oriented Scalable Vector Graphics

Table of Content

• Installation
• Major Goals
• Principals
  • Float Values and Math
  • Position Objects
  • SVG Element Objects
  • SVG Group Objects
  • Layers
  • SVG Object
• Basic Usage

Installation

pip install osvg

Major Goals

• Provide a Python API to generate SVG XML code
• Use objects to handle SVG elements
• Implement relational positions and values

Principals

Float Values and Math

Each float value of an SVG element object is an object of a special Float class or one of it's sub classes. A Float object can be assigned to/referenced by another Float object. I.e you can reference the width of a rectangle as the relative length of line. If you change the rectangle width attribute you also change the value of the line length. In addition there are Float classes for math. I.e. a Sum class which sums up all referenced Float object values you added to. If one of the referenced object changes the value the value of the Sum changes.

Position Objects

A Position object has two at least two Float object attributes: x and y. So, a position can also be referenced on other element's or other position's Float object attributes. In addition there a special position object, which implements some operation in the two-dimensal space. I.e PolarShiftedPosition represents a position which is shifted in direction of the given angle and by the given distance. Angle and distance are also Float object attribute and can be referenced (or calculated).

SVG Element Objects

Each SVG element has a coresponding Python class. Each object has attributes representing SVG element attributes and additional attributes to improve the handling of the objects/elements within your Python code. SVG element attributes which are floating numbers or strings with floating number within, are object attributes based on Float objects. Thus the attributes can be a reference to another attribute or can be calculated from other attributes. A given position for a SVG area element object is always the center of the area. This differs to the top left corner idea of a i.e. rectangle in the SVG code. The rectangle object automatically handles the shift for the SVG XML code.

SVG Group Objects

All SVG element object should be a 'child' to a SVG Group object or another SVG element object. If not, the element won't be included in the SVG XML code. A Group object can be a child to another Group object. The attributes 'rotation' and 'style' are inherited to child elements. Rotation of the child element is the sum of element's rotation and the inherited rotation. Style can be overwritten/changed be the child. Only the delta of the style to the inherited style will be within the SVG XML code for this element.

Layers

Be default SVG elements will be added to the SVG XML code in the order they are added as child to a group. You can adjust this with the layer integer attribute of the SVG element object. A higher layer value will add the element earlier to SVG XML code - bringing it to the background of a drawing. A lower layer value will add the element later to SVG XML code - bringing it to the foreground of a drawing. Layer default value is 0. Negative values are allowed.

SVG Object

The SVG object is Group object and the root for the drawing. The SVG object is the only SVG element object which can have a 'viewbox' to allow an easy usage of fixed float values for the attributes of the elements within the drawing and a easy scaling of the drawing.

Basic Usage

The Python code:

import osvg


svg = osvg.SVG(
    width=400,
    height=300,
    viewbox=osvg.ViewBox(width=800, height=600),
    style=osvg.Style(stroke_width=3, stroke_color="ff0044")
)
circle_center = osvg.Position(x=100, y=100)
rectangle_center = osvg.Position(x=400, y=200)
foreground = -100
osvg.Line(
    parent=svg,
    start=circle_center,
    end=rectangle_center,
    layer=foreground
)
circle = osvg.Circle(
    parent=svg,
    position=circle_center,
    radius=80,
    style=osvg.Style(fill_color="00ff00")
)
g1 = osvg.Group(parent=svg, style=osvg.Style(stroke_width=4))
rectangle = osvg.Rectangle(
    parent=g1,
    position=rectangle_center,
    width=400,
    height=circle.radius
)
print(svg.xml_string)

Will print this XML code:

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" style="stroke:#ff0044;stroke-width:3" width="400" height="300" viewBox="0 0 800 600">
        <circle style="fill:#00ff00" cx="100" cy="100" r="80"/>
        <g style="stroke-width:4">
                <rect x="200" y="160" width="400" height="80"/>
        </g>
        <polyline points="100,100 400,200"/>
</svg>

Which is this drawing:

You can find more code and the corresponding output under test/system/