TIP 507: Include simple SVG support with nanosvg

Author:         René Zaumseil <r.zaumseil@freenet.de>
State:          Draft
Type:           Project
Created:        9-May-2018
Keywords:       Tk
Tcl-Version:    8.7
Tk-Branch:      tip-507


Tk needs scalable images on high resolution mobile devices. This TIP proposes to let Tk be able to read an SVG image (plus information about orientation and pixel scale) and make it into a photo image. It is therefore a (lossy and single direction) conversion operation from an SVG format to a pixel format.


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 a Tk image extension. The implementation is using nanosvg. It has no other external dependencies and is only 2 header files.

nanosvg was choosen because it:

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 choosen name hints the usage of a not fully compatible SVG parser. It leaves the image name svg open for further usage.

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), pt (1/72 inch), pc (12 pt), 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 given format options are only used at creation time of the image and are not preserved in the image. This means that:

  1. $img data -format svgnano triggers the error "image string format "svgnano" is not supported"; Tk cannot convert a photo image into an SVG.

  2. In this:

    $img configure -format {svgnano -scale 2}
    $img configure -format {svgnano -x 10}

    the second call takes -scale as the default value (1).

Supported SVG

The svgnano format supports a wide range of SVG features, however some features (e.g. 'text') are missing and silently ignored when reading the SVG data.



Gradient Attributes

Poly Attributes

Line Attributes

Ellipse Attributes

Circle Attributes

Rectangle Attributes

Path Attributes

Style Attributes


Open questions


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

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

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}



This document has been placed in the public domain.