Skip to main content

SVG path drawing and animation support in kivy application

Project description


SVG path drawing and animation support in kivy application

build Python 3.6 pypi license downloads code size


Path Drawing & filling Shape Animation

Now you can take some of the advantages svg offers, in your kivy apps. Those are:

  • Compact file size compare to other formats - reduced asset size
  • Scalability - Draw them big or small
  • Interactivity - Animations


pip install kivg

How to use?

  • Path drawing and filling

    s = Kivg(my_widget)
    # call draw method with a `svg_file` name
    s.draw("github.svg", fill=False, animate=True, anim_type="seq")


    • fill : Whether to fill the shape after drawing. Defaults to True

    • animate : Whether to animate drawing. Defaults to False

    • anim_type : Whether to draw in sequence or parallel. Available "seq" and "par". Defaults to "seq"


    • Fill color would only work if it's in hex and inside <path> tag. You must modify svg if it's not this way already.

    • Gradient is not yet supported - default to #ffffff if can't parse color

  • Shape Animation

    s = Kivg(my_widget)
    anim_config = [
        { "id_":"k", "from_":"center_x", "t":"out_back",   "d":.4 },
        { "id_":"i", "from_":"center_y", "t":"out_bounce", "d":.4 },
        { "id_":"v", "from_":"top",      "t":"out_quint",  "d":.4 },
        { "id_":"y", "from_":"bottom",   "t":"out_back",   "d":.4 }
    # call shape_animate method with `svg_file` and an animation config list and optional callback
    s.shape_animate("text.svg", anim_config_list=anim_config, on_complete=lambda *args: print("Completed!"))


    • anim_config_list : A list of dicts where each dict contain config for an id. Description of each key:

      • "id_" : id of svg <path> tag. It's required so each dict must contain "id_" key

      • "from_" : Direction from which a path should grow. Accepted values "left", "right", "top", "bottom", "center_x"(grow from center along horizontal axis), "center_y", and None(Draw without animation). Defaults to None.

      • "t" : Animation transition. Defaults to "out_sine".

      • "d" : Duration of animation. It'll still in-effect if "from_" is set to None. Defaults to .3

    • on_complete(optional) : Function to call after entire animation is finished. It can be used to create looping animation


    • You must add a unique id to each path element you want to animate

    • Dict order in the list is important

Useful Links:

Few links that I found useful for modifying few svg files in order to work with this library are:

  • - Convert SVG Path to Cubic Curves

    Use it to convert SVG Arcs to Cubic Bezier. Make sure you paste the entire path in the textfield rather than only the arc section. Also you should provide path dimensions(W & H) on the website as your svg width and height(found under <svg> tag)

  • - Convert Relative SVG Path To Absolute Path

    Maybe useful when you want to split a single svg path into multiple paths for animation purpose. Paste the entire path. When splitting, make sure you close the previous path by adding a Z at the end in the path string.



  • Shape animation feature added
  • Added anim_type in draw method

Earlier Changes

  • Added option to draw image without animation, animate=False
  • Added option to draw empty or filled path, fill=True or fill=False


PRs Welcome

Whether you found a bug or have some idea to improve the project, PRs are always more than welcome

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

Kivg-1.1.tar.gz (14.4 kB view hashes)

Uploaded Source

Built Distribution

Kivg-1.1-py3-none-any.whl (15.2 kB view hashes)

Uploaded Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page