CODEWITHSUNDEEP
pythonsvg
Learning is a mess
Learning is a mess

Reputation: 8277

SVGwrite: exporting to png/jpg with a background color and filling annulus

I've been writing a little Python script using the svgwrite library. I'd like now to make it export my graphics with a background color and it seems to me that I may have to convert it to another format for doing so (png or jpg should be fine). I don't know much about the svg format but I'm sure it handles natively background color.

Also, I'm drawing two circles sharing the same center, and I'd like to fill the space in-between them with a specific color, just like drawing an annulus, but I can't find in the documentation how to do so.

Thank you in advance for the help.

Upvotes: 1

Views: 2186

Answers (2)

punchcard
punchcard

Reputation: 429

This is an example of creating circles with colors. The first circle has a fill color and a separate stroke color so it is the same as two circles with the smaller one on top. The second circle has a stroke color but fill='none' giving just a ring shape. The last bunch of circles shows that putting one circle at the same place as another one on top covers over things below. This may be what you want for your annulus.

import svgwrite
def create_svg(name):
    SVG_SIZE = 900
    color_list = ["rgb(123, 80, 86)", "rgb(67, 130, 124)", "red"] 
    dwg = svgwrite.Drawing(name, (SVG_SIZE, SVG_SIZE), debug=True)
    # background will be white.
    dwg.add(dwg.rect(insert=(0, 0), size=('100%', '100%'), fill='white'))
    y = 50
    circle_1 = dwg.circle(center=(100, y), r=30, fill='green', 
            stroke='blue', stroke_width=5)
    dwg.add(circle_1)
    circle_2 = dwg.circle(center=(200, y), r=30, fill='none', 
            stroke='blue', stroke_width=5)
    dwg.add(circle_2)
    y += 300
    for i in range(3):
        circle_i = dwg.circle(center=(150, y), r=(100 - 30 * i), 
                fill=color_list[i], stroke='none', stroke_width=0)
        dwg.add(circle_i)
    dwg.save()
if __name__ == '__main__':
    create_svg('filling_annulus.svg')

Upvotes: 3

Paul LeBeau
Paul LeBeau

Reputation: 101820

Background

For your background colour, the simplest solution is to just draw a rectangle that fills the whole document.

<rect width="100%" height="100%" fill="red" />

There are other ways to do it. SVG 1.2 defines viewport-fill, but not all renderers support that. On most browsers, background-color works, but it may not work on non-browser SVG renderers. It is simplest just to go with the rectangle.

Annulus

I'm assuming you mean you want there to be a transparent hole inside the ring? If so, there are a couple of ways to do it. The straightforward way is just to make a path with two subpaths. One for the outside circle and one for the inside circle. When two subpaths overlap and the fill-rule property is set to evenodd, it makes a hole.

<path d="M -100,0
         A 100,100, 0,1,0, 100,0
         A 100,100, 0,1,0, -100,0
         M -75,0
         A 75,75, 0,1,0, 75,0
         A 75,75, 0,1,0, -75,0
         Z"
stroke="black" fill="orange" fill-rule="evenodd"/>

Demo here

More information on fill-rule is here: http://www.w3.org/TR/SVG/painting.html#FillRuleProperty

Upvotes: 1

Related Questions