TIP 507: Include simple svg support with nanosvg

FlightAware bounty program for improvements to Tcl and certain Tcl packages.
Author:         René Zaumseil <r.zaumseil@freenet.de>
State:          Draft
Type:           Project
Created:        9-May-2018
Keywords:       Tk
Tcl-Version:    8.7


Tk needs scalable images on high res mobile devices.


Tk is running on desktop and mobile devices. The out of the box image formats do not scale and are to tiny on high res mobile devices. The same goes for the image formats provided by the img extension.

There is already an tk image extension at https://github.com/auriocus/tksvg The implementation is using nanosvg. It has no other external dependencies and is only 2 header files.

The original nanosvg project is hosted at https://github.com/memononen/nanosvg


The already existing tksvg extension will be adapted and included in Tk. A new image format will be created. The name is svgnano.

The svgnano image format has the following format suboptions:

svgnano -dpi dpiValue -scale scaleValue -unit unitValue -x xValue -y yValue

dpiValue is used in conversion between given coordiantes and screen resolution. The value must be greater then 0.0. The default value is 96.

scaleValue is used to scale the resulting image. The value must be greater then 0.0. The default value is 1.

unitValue is the unit of all coordinates in the svg data. Available units are px (default, coordinates in pixel), mm , cm and in.

xValue is used to move the created image in x-direction. The default value is 0.

yValue is used to move the created image in y-direction. The default value is 0. . The svgnano format supports a wide range of SVG features, but something may be missing p.e. text.


  • nanosvg is no full svg library
  • the name of the image format should mention this (p.e. nanosvg or svgnano)
  • are there better libraries with our requirements (C only, license)?


A patch implementing these changes will be available in the fossil repository in the tip-507 branch.

The new format is in the photo.n man page described.

Example of use

    # the image data
    set data {<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <path fill="none" stroke="#000000" d="M0 0 h16 v16 h-16 z"/>
    <path fill="none" stroke="#000000" d="M8 4 v 8 M4 8 h 8"/>
    <circle fill="yellow" stroke="red" cx="10" cy="80" r="10" />
    <ellipse fill="none" stroke="blue" stroke-width="3" cx="60" cy="60" rx="10" ry="20" />
    <line x1="10" y1="90" x2="50" y2="99"/>
    <rect fill="none" stroke="green"  x="20" y="20" width="60" height="50" rx="3" ry="3"/>
    <polyline fill="red" stroke="purple" points="80,10 90,20 85,40"/>
    <polygon fill ="yellow" points="80,80 70,85 90,90"/>
    # create image
    image create photo foo -data $data
    # change size
    foo configure -format {svgnano -scale 2}
    # move right and up, all other values are reset
    foo configure -format {svgnano -x 10 -y -20}
    # use other unit
    foo configure -format {svgnano -unit mm}


  • using another library with full svg support


This document has been placed in the public domain.