Brython documentation

module browser.svg

To create graphics in the SVG format, supported by most browsers, use the built-in module svg. It holds the name of the components available to draw forms or write text

The module defines the following names :

a, altGlyph, altGlyphDef, altGlyphItem, animate, animateColor, animateMotion, animateTransform, circle, clipPath, color_profile,  cursor, defs, desc, ellipse, feBlend, g, image, line, linearGradient, marker, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tref, tspan, use

For instance, if the HTML document has an SVG graphics zone defined by

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="140" height="200" style="border-style:solid;border-width:1;border-color:#000;">
  <g id="panel">
  </g>
</svg>

you can insert forms and text by :

from browser import document, svg

title = svg.text('Title', x=70, y=25, font_size=22,
                 text_anchor="middle")
circle = svg.circle(cx=70, cy=120, r=40,
                    stroke="black",stroke_width="2",fill="red")
panel = document['panel']
panel <= title
panel <= circle

For the attributes defined in the SVG norm that contain a hyphen (-), it must be replaced by an underscore (_) in the arguments : text_anchor instead of text-anchor which would raise a Python syntax error.

In the above example, we created a text element and a circle element. For a list of color keywords reference this link

Below we create a blue rectangle, width and height of 40 px.

from browser import document, svg

rect = svg.rect(x="40",y="100", width="40", height="40",
    stroke_width="2",fill="blue")

panel = document['panel1']
panel <= rect

Below is an example of a green ellipse:

from browser import document, svg
ellipse = svg.ellipse(cx="70",cy="100", rx="40", ry="80",
    stroke="black",stroke_width="2",fill="green")

panel = document['panel2']
panel <= ellipse

Here's an example of a brown line of length 100 pixels.

from browser import document, svg

line = svg.line(x1="40",y1="50", x2="40", y2="150",
                stroke="brown",stroke_width="2")

panel = document['panel3']
panel <= line

Here's an example of a polygon (a red star with a blue outline)

from browser import document, svg

star = svg.polygon(fill="red", stroke="blue", stroke_width="10",
                   points=""" 75,38  90,80  135,80  98,107
                             111,150 75,125  38,150 51,107
                              15,80  60,80""")

panel = document['panel4']
panel <= star

Here's an example of animating a rectangle:

from browser import document, svg, timer

rect = svg.rect(x=10, y=10, width=100, height=100)

def move_rect():
    # the attributes of the SVG element are strings, they must be explicitely
    # converted into integers
    rect.attrs["y"] = int(rect.attrs["y"]) + 1
    
    # ends animation when the rectangle reaches its target
    if int(rect.attrs["y"] ) > 50:
        timer.clear_interval(loop)

panel = document['panel5']
panel <= rect

# initialise the animation loop
loop = timer.set_interval(move_rect, 30)

For more detailed information about SVG shapes, their attributes, etc see the SVG Shape Documentation

Introduction

Installation

Limitations of the "file" protocol

Frequently asked questions

Syntax, keywords and built-in functions

Standard distribution

`import` implementation

Brython packages

Browser interface

Brython-specific built-in modules

Working with Brython

Cookbook

module browser.svg