svgwrite code examples


This python code example will show you how to use the svgwrite module to generate svg images.

The svgwrite documentation is lacking some tangible examples so I’ve provided some here.

import svgwrite

dwg = svgwrite.Drawing('svgwrite-example.svg', profile='tiny')

# draw a red box
dwg.add(dwg.rect((10, 10), (300, 200),
    stroke=svgwrite.rgb(10, 10, 16, '%'),
    fill='red')
)

# Draw a small white circle in the top left of box
dwg.add(dwg.circle(center=(25,25),
    r=10, 
    stroke=svgwrite.rgb(15, 15, 15, '%'),
    fill='white')
)

# Label this box #1
dwg.add(dwg.text('1',
    insert=(21,30),
    stroke='none',
    fill=svgwrite.rgb(15, 15, 15, '%'),
    font_size='15px',
    font_weight="bold")
)

# Draw some text demonstrating font_size, font_family, font_weight, font_color
dwg.add(dwg.text('ABC',
    insert=(55,125),
    stroke='none',
    fill='#900',
    font_size='90px',
    font_weight="bold",
    font_family="Arial")
)

# Draw some text demonstrating font stroke color
dwg.add(dwg.text('12345',
    insert=(50,180),
    stroke='#500',
    fill='#A90690',
    stroke_width=2,
    font_size='66px',
    font_weight="bold",
    font_family="Courier New")
)

# white text over red box
dwg.add(dwg.text('rectangle w/ black stroke & red fill',
    insert=(40, 40), 
    fill='white')
)

# draw a nofill box
dwg.add(dwg.rect((10, 220), (300, 190),
    stroke=svgwrite.rgb(10, 10, 16, '%'),
    fill='none')
)

# black text over nofill box
dwg.add(dwg.text('rectangle w/ black stroke & no fill',
    insert=(40, 250),
    fill='black')
)

# Draw a small white circle in the top left of box
dwg.add(dwg.circle(center=(26,235),
    r=10, 
    stroke=svgwrite.rgb(15, 15, 15, '%'),
    fill='#eeeeee')
)

# Label this box #2
dwg.add(dwg.text('2',
    insert=(22,240),
    stroke='none',
    fill=svgwrite.rgb(15, 15, 15, '%'),
    font_size='15px',
    font_weight="bold")
)

# Create a vertical linear gradient and add it the svg's definitions
vert_grad = svgwrite.gradients.LinearGradient(start=(0, 0), end=(0,1), id="vert_lin_grad")
vert_grad.add_stop_color(offset='0%', color='blue', opacity=None)
vert_grad.add_stop_color(offset='50%', color='green', opacity=None)
vert_grad.add_stop_color(offset='100%', color='yellow', opacity=None)
dwg.defs.add(vert_grad)

# draw a box and reference the above gradient definition by #id
dwg.add(dwg.rect((35, 270), (240, 120),
    stroke=svgwrite.rgb(10, 10, 16, '%'),
    fill="url(#vert_lin_grad)"
))

# black text over nofill box
dwg.add(dwg.text('rectangle w/ linear gradient',
    insert=(60, 330),
    fill='white')
)

# draw a blue box
dwg.add(dwg.rect((320,10), (400, 400),
    stroke=svgwrite.rgb(10, 10, 16, '%'),
    fill='blue')
)

# yellow text over blue box
dwg.add(dwg.text('rectangle w/ black stroke & blue fill',
    insert=(360, 40),
    fill='yellow')
)

# Draw a small white circle in the top left of box
dwg.add(dwg.circle(center=(335,25),
    r=10, 
    stroke=svgwrite.rgb(15, 15, 15, '%'),
    fill='#eeeeee')
)

# Label this box #3
dwg.add(dwg.text('3',
    insert=(331,30),
    stroke='none',
    fill=svgwrite.rgb(15, 15, 15, '%'),
    font_size='15px',
    font_weight="bold")
)

# lets draw a smiley face
# draw a yellow circle
dwg.add(dwg.circle(center=(520,220),
    r=90, 
    stroke=svgwrite.rgb(10, 10, 16, '%'),
    fill='yellow')
)
# draw the left then right eye
dwg.add(dwg.circle(center=(495,195),
    r=10, 
    stroke=svgwrite.rgb(10, 10, 16, '%'),
    fill='black')
)
dwg.add(dwg.circle(center=(550,195),
    r=10,
    stroke=svgwrite.rgb(10, 10, 16, '%'),
    fill='black')
)

# draw a cubic-bezier-curve path from 470,240 to 570,240 
# using control points 490,290 & 550,290
dwg.add(dwg.path( d='M470,240 C490,290, 550,290, 570,240',
    stroke="#000",
    fill="none",
    stroke_width=12)
)

# output our svg image as raw xml
print(dwg.tostring())

# write svg file to disk
dwg.save()

The Resulting SVG Image

svg example

The Generated SVG Source

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="tiny" height="100%" version="1.2" width="100%">
   <defs>
      <linearGradient id="vert_lin_grad" x1="0" x2="0" y1="0" y2="1">
         <stop offset="0%" stop-color="blue" />
         <stop offset="50%" stop-color="green" />
         <stop offset="100%" stop-color="yellow" />
      </linearGradient>
   </defs>
   <rect fill="red" height="200" stroke="rgb(10%,10%,16%)" width="300" x="10" y="10" />
   <circle cx="25" cy="25" fill="white" r="10" stroke="rgb(15%,15%,15%)" />
   <text fill="rgb(15%,15%,15%)" font-size="15px" font-weight="bold" stroke="none" x="21" y="30">1</text>
   <text fill="#900" font-family="Arial" font-size="90px" font-weight="bold" stroke="none" x="55" y="125">ABC</text>
   <text fill="#A90690" font-family="Courier New" font-size="66px" font-weight="bold" stroke="#500" stroke-width="2" x="50" y="180">12345</text>
   <text fill="white" x="40" y="40">rectangle w/ black stroke &amp; red fill</text>
   <rect fill="none" height="190" stroke="rgb(10%,10%,16%)" width="300" x="10" y="220" />
   <text fill="black" x="40" y="250">rectangle w/ black stroke &amp; no fill</text>
   <circle cx="26" cy="235" fill="#eeeeee" r="10" stroke="rgb(15%,15%,15%)" />
   <text fill="rgb(15%,15%,15%)" font-size="15px" font-weight="bold" stroke="none" x="22" y="240">2</text>
   <rect fill="url(#vert_lin_grad)" height="120" stroke="rgb(10%,10%,16%)" width="240" x="35" y="270" />
   <text fill="white" x="60" y="330">rectangle w/ linear gradient</text>
   <rect fill="blue" height="400" stroke="rgb(10%,10%,16%)" width="400" x="320" y="10" />
   <text fill="yellow" x="360" y="40">rectangle w/ black stroke &amp; blue fill</text>
   <circle cx="335" cy="25" fill="#eeeeee" r="10" stroke="rgb(15%,15%,15%)" />
   <text fill="rgb(15%,15%,15%)" font-size="15px" font-weight="bold" stroke="none" x="331" y="30">3</text>
   <circle cx="520" cy="220" fill="yellow" r="90" stroke="rgb(10%,10%,16%)" />
   <circle cx="495" cy="195" fill="black" r="10" stroke="rgb(10%,10%,16%)" />
   <circle cx="550" cy="195" fill="black" r="10" stroke="rgb(10%,10%,16%)" />
   <path d="M470,240 C490,290, 550,290, 570,240" fill="none" stroke="#000" stroke-width="12" />
</svg>