commit 88906ef69c4103c6473a4bfde3f03f8dc53a42ab · cduck.me/drawsvg

LICENSE.txt

···

       1
       1
       +
       Copyright 2017 Casey Duckering

     

       2
       2
       +
       

     

       3
       3
       +
       Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

     

       4
       4
       +
       

     

       5
       5
       +
       The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

     

       6
       6
       +
       

     

       7
       7
       +
       THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

     

       8
       8
       +

+154

README.md

···

       1
       1
       +
       # drawSvg

     

       2
       2
       +
       

     

       3
       3
       +
       This is a Python 3 library for programmatically generating SVG images (vector drawings) and rendering them or displaying them in an iPython notebook.

     

       4
       4
       +
       

     

       5
       5
       +
       Most common SVG tags are supported and others can easily be added by writing a small subclass of `DrawableBasicElement` or `DrawableParentElement`.

     

       6
       6
       +
       

     

       7
       7
       +
       # Install

     

       8
       8
       +
       drawSvg is available on PyPI:

     

       9
       9
       +
       

     

       10
       10
       +
       ```

     

       11
       11
       +
       $ pip3 install drawSvg

     

       12
       12
       +
       ```

     

       13
       13
       +
       

     

       14
       14
       +
       # Examples

     

       15
       15
       +
       

     

       16
       16
       +
       ### Basic drawing elements

     

       17
       17
       +
       ```python

     

       18
       18
       +
       d = draw.Drawing(200, 100, origin='center')

     

       19
       19
       +
       

     

       20
       20
       +
       d.append(draw.Lines(-80, -45,

     

       21
       21
       +
                           70, -49,

     

       22
       22
       +
                           95, 49,

     

       23
       23
       +
                           -90, 40,

     

       24
       24
       +
                           close=False,

     

       25
       25
       +
                   fill='#eeee00',

     

       26
       26
       +
                   stroke='black'))

     

       27
       27
       +
       

     

       28
       28
       +
       d.append(draw.Rectangle(0,0,40,50, fill='#1248ff'))

     

       29
       29
       +
       d.append(draw.Circle(-40, -10, 30,

     

       30
       30
       +
                   fill='red', stroke_width=2, stroke='black'))

     

       31
       31
       +
       

     

       32
       32
       +
       p = draw.Path(stroke_width=2, stroke='green',

     

       33
       33
       +
                     fill='black', fill_opacity=0.5)

     

       34
       34
       +
       p.M(-30,5)  # Start path at point (-30, 5)

     

       35
       35
       +
       p.l(60,30)  # Draw line to (60, 30)

     

       36
       36
       +
       p.h(-70)    # Draw horizontal line to x=-70

     

       37
       37
       +
       p.Z()       # Draw line to start

     

       38
       38
       +
       d.append(p)

     

       39
       39
       +
       

     

       40
       40
       +
       d.append(draw.ArcLine(60,-20,20,60,270,

     

       41
       41
       +
                   stroke='red', stroke_width=5, fill='red', fill_opacity=0.2))

     

       42
       42
       +
       d.append(draw.Arc(60,-20,20,60,270,cw=False,

     

       43
       43
       +
                   stroke='green', stroke_width=3, fill='none'))

     

       44
       44
       +
       d.append(draw.Arc(60,-20,20,270,60,cw=True,

     

       45
       45
       +
                   stroke='blue', stroke_width=1, fill='black', fill_opacity=0.3))

     

       46
       46
       +
       

     

       47
       47
       +
       d.setPixelScale(2)  # Set number of pixels per geometry unit

     

       48
       48
       +
       #d.setRenderSize(400,200)  # Alternative to setPixelScale

     

       49
       49
       +
       d.saveSvg('example.svg')

     

       50
       50
       +
       d.savePng('example.png')

     

       51
       51
       +
       

     

       52
       52
       +
       # Display in iPython notebook

     

       53
       53
       +
       d.rasterize()  # Display as PNG

     

       54
       54
       +
       d  # Display as SVG

     

       55
       55
       +
       ```

     

       56
       56
       +
       

     

       57
       57
       +
       ![Example output image](https://github.com/cduck/drawSvg/raw/master/example1.png)

     

       58
       58
       +
       

     

       59
       59
       +
       ### Gradients

     

       60
       60
       +
       ```python

     

       61
       61
       +
       d = draw.Drawing(1.5, 0.8, origin='center')

     

       62
       62
       +
       

     

       63
       63
       +
       d.draw(draw.Rectangle(-0.75,-0.5,1.5,1, fill='#ddd'))

     

       64
       64
       +
       

     

       65
       65
       +
       # Create gradient

     

       66
       66
       +
       gradient = draw.RadialGradient(0,-0.35,0.7*10)

     

       67
       67
       +
       gradient.addStop(0.5/0.7/10, 'green', 1)

     

       68
       68
       +
       gradient.addStop(1/10, 'red', 0)

     

       69
       69
       +
       

     

       70
       70
       +
       # Draw a shape to fill with the gradient

     

       71
       71
       +
       p = draw.Path(fill=gradient, stroke='black', stroke_width=0.002)

     

       72
       72
       +
       p.arc(0,-0.35,0.7,30,120)

     

       73
       73
       +
       p.arc(0,-0.35,0.5,120,30,cw=True, includeL=True)

     

       74
       74
       +
       p.Z()

     

       75
       75
       +
       d.append(p)

     

       76
       76
       +
       

     

       77
       77
       +
       # Draw another shape to fill with the same gradient

     

       78
       78
       +
       p = draw.Path(fill=gradient, stroke='red', stroke_width=0.002)

     

       79
       79
       +
       p.arc(0,-0.35,0.75,130,160)

     

       80
       80
       +
       p.arc(0,-0.35,0,160,130,cw=True, includeL=True)

     

       81
       81
       +
       p.Z()

     

       82
       82
       +
       d.append(p)

     

       83
       83
       +
       

     

       84
       84
       +
       # Another gradient

     

       85
       85
       +
       gradient2 = draw.LinearGradient(0.1,-0.35,0.1+0.6,-0.35+0.2)

     

       86
       86
       +
       gradient2.addStop(0, 'green', 1)

     

       87
       87
       +
       gradient2.addStop(1, 'red', 0)

     

       88
       88
       +
       d.append(draw.Rectangle(0.1,-0.35,0.6,0.2,

     

       89
       89
       +
                               stroke='black', stroke_width=0.002,

     

       90
       90
       +
                               fill=gradient2))

     

       91
       91
       +
       

     

       92
       92
       +
       # Display

     

       93
       93
       +
       d.setRenderSize(w=600)

     

       94
       94
       +
       d

     

       95
       95
       +
       ```

     

       96
       96
       +
       

     

       97
       97
       +
       ![Example output image](https://github.com/cduck/drawSvg/raw/master/example2.png)

     

       98
       98
       +
       

     

       99
       99
       +
       ### Duplicate geometry and clip paths

     

       100
       100
       +
       ```python

     

       101
       101
       +
       d = draw.Drawing(1.4, 1.4, origin='center')

     

       102
       102
       +
       

     

       103
       103
       +
       # Define clip path

     

       104
       104
       +
       clip = draw.ClipPath()

     

       105
       105
       +
       clip.append(draw.Rectangle(-.25,.25-1,1,1))

     

       106
       106
       +
       

     

       107
       107
       +
       # Draw a cropped circle

     

       108
       108
       +
       c = draw.Circle(0,0,0.5, stroke_width='0.01', stroke='black',

     

       109
       109
       +
                                fill_opacity=0.3, clip_path=clip,

     

       110
       110
       +
                                id='circle')

     

       111
       111
       +
       d.append(c)

     

       112
       112
       +
       

     

       113
       113
       +
       # Make a transparent copy, cropped again

     

       114
       114
       +
       g = draw.Group(opacity=0.5, clip_path=clip)

     

       115
       115
       +
       g.append(draw.Use('circle', 0.25,0.1))

     

       116
       116
       +
       d.append(g)

     

       117
       117
       +
       

     

       118
       118
       +
       # Display

     

       119
       119
       +
       d.setRenderSize(400)

     

       120
       120
       +
       d.rasterize()

     

       121
       121
       +
       ```

     

       122
       122
       +
       

     

       123
       123
       +
       ![Example output image](https://github.com/cduck/drawSvg/raw/master/example3.png)

     

       124
       124
       +
       

     

       125
       125
       +
       ### Implementing other SVG tags

     

       126
       126
       +
       ```python

     

       127
       127
       +
       # Subclass DrawingBasicElement if it cannot have child nodes

     

       128
       128
       +
       # Subclass DrawingParentElement otherwise

     

       129
       129
       +
       # Subclass DrawingDef if it must go between <def></def> tags in an SVG

     

       130
       130
       +
       class Hyperlink(draw.DrawingParentElement):

     

       131
       131
       +
           TAG_NAME = 'a'

     

       132
       132
       +
           def __init__(self, href, target=None, **kwargs):

     

       133
       133
       +
               # Other init logic...

     

       134
       134
       +
               # Keyword arguments to super().__init__() correspond to SVG node

     

       135
       135
       +
               # arguments: stroke_width=5 -> stroke-width="5"

     

       136
       136
       +
               super().__init__(href=href, target=target, **kwargs)

     

       137
       137
       +
       

     

       138
       138
       +
       d = draw.Drawing(1, 1.2, origin='center')

     

       139
       139
       +
       

     

       140
       140
       +
       # Create hyperlink

     

       141
       141
       +
       hlink = Hyperlink('https://www.python.org', target='_blank',

     

       142
       142
       +
                         transform='skewY(-30)')

     

       143
       143
       +
       # Add child elements

     

       144
       144
       +
       hlink.append(draw.Circle(0,0,0.5, fill='green'))

     

       145
       145
       +
       hlink.append(draw.Text('Hyperlink',0.2, 0,0, center=0.6, fill='white'))

     

       146
       146
       +
       

     

       147
       147
       +
       # Draw and display

     

       148
       148
       +
       d.append(hlink)

     

       149
       149
       +
       d.setRenderSize(200)

     

       150
       150
       +
       d

     

       151
       151
       +
       ```

     

       152
       152
       +
       

     

       153
       153
       +
       ![Example output image](https://github.com/cduck/drawSvg/blob/master/example4.svg)

     

       154
       154
       +

example1.png

This is a binary file and will not be displayed.

+13

example1.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="400" height="200" viewBox="-100.0 -50.0 200 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M-80,45 L70,49 L95,-49 L-90,-40" fill="#eeee00" stroke="black" />

     

       7
       7
       +
       <rect x="0" y="-50" width="40" height="50" fill="#1248ff" />

     

       8
       8
       +
       <circle cx="-40" cy="10" r="30" fill="red" stroke-width="2" stroke="black" />

     

       9
       9
       +
       <path d="M-30,-5 l60,-30 h-70 Z" stroke-width="2" stroke="green" fill="black" fill-opacity="0.5" />

     

       10
       10
       +
       <circle cx="60" cy="20" r="20" stroke-dasharray="73.30382858376184 52.35987755982988" stroke-dashoffset="-31.41592653589793" stroke="red" stroke-width="5" fill="red" fill-opacity="0.2" />

     

       11
       11
       +
       <path d="M70.0,2.679491924311229 A20,20,0,1,0,59.99999999999999,40.0" stroke="green" stroke-width="3" fill="none" />

     

       12
       12
       +
       <path d="M59.99999999999999,40.0 A20,20,0,1,1,70.0,2.679491924311229" stroke="blue" stroke-width="1" fill="black" fill-opacity="0.3" />

     

       13
       13
       +
       </svg>

example2.png

This is a binary file and will not be displayed.

+18

example2.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="600" height="320.0" viewBox="-0.75 -0.4 1.5 0.8">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <radialGradient cx="0" cy="0.35" r="7.0" gradientUnits="userSpaceOnUse" id="d0">

     

       6
       6
       +
       <stop offset="0.07142857142857142" stop-color="green" stop-opacity="1" />

     

       7
       7
       +
       <stop offset="0.1" stop-color="red" stop-opacity="0" />

     

       8
       8
       +
       </radialGradient>

     

       9
       9
       +
       <linearGradient x1="0.1" y1="0.35" x2="0.7" y2="0.14999999999999997" gradientUnits="userSpaceOnUse" id="d1">

     

       10
       10
       +
       <stop offset="0" stop-color="green" stop-opacity="1" />

     

       11
       11
       +
       <stop offset="1" stop-color="red" stop-opacity="0" />

     

       12
       12
       +
       </linearGradient>

     

       13
       13
       +
       </defs>

     

       14
       14
       +
       <rect x="-0.75" y="-0.5" width="1.5" height="1" fill="#ddd" />

     

       15
       15
       +
       <path d="M0.6062177826491071,5.551115123125783e-17 A0.7,0.7,0,0,0,-0.3499999999999998,-0.2562177826491071 L-0.2499999999999999,-0.08301270189221943 A0.5,0.5,0,0,1,0.43301270189221935,0.1 Z" fill="url(#d0)" stroke="black" stroke-width="0.002" />

     

       16
       16
       +
       <path d="M-0.48209070726490444,-0.22453333233923367 A0.75,0.75,0,0,0,-0.7047694655894312,0.09348489250574832 L0.0,0.35 A0,0,0,0,1,0.0,0.35 Z" fill="url(#d0)" stroke="red" stroke-width="0.002" />

     

       17
       17
       +
       <rect x="0.1" y="0.14999999999999997" width="0.6" height="0.2" stroke="black" stroke-width="0.002" fill="url(#d1)" />

     

       18
       18
       +
       </svg>

example3.png

This is a binary file and will not be displayed.

+13

example3.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="400" height="400.0" viewBox="-0.7 -0.7 1.4 1.4">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <clipPath id="d0">

     

       6
       6
       +
       <rect x="-0.25" y="-0.25" width="1" height="1" />

     

       7
       7
       +
       </clipPath>

     

       8
       8
       +
       </defs>

     

       9
       9
       +
       <circle cx="0" cy="0" r="0.5" stroke-width="0.01" stroke="black" fill-opacity="0.3" clip-path="url(#d0)" id="circle" />

     

       10
       10
       +
       <g opacity="0.5" clip-path="url(#d0)">

     

       11
       11
       +
       <use xlink:href="#circle" x="0.25" y="-0.1" />

     

       12
       12
       +
       </g>

     

       13
       13
       +
       </svg>

example4.png

This is a binary file and will not be displayed.

+13

example4.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="240.0" viewBox="-0.5 -0.6 1 1.2">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <g id="ellipse" transform="skewY(-30)">

     

       7
       7
       +
       <circle cx="0" cy="0" r="0.5" fill="green" />

     

       8
       8
       +
       <text x="0" y="0" font-size="0.2" fill="white" text-anchor="middle" transform="translate(0,0.06)">Hyperlink</text>

     

       9
       9
       +
       </g>

     

       10
       10
       +
       <a href="https://www.python.org" target="_blank">

     

       11
       11
       +
       <use xlink:href="#ellipse" x="0" y="0" />

     

       12
       12
       +
       </a>

     

       13
       13
       +
       </svg>