# How I save a picture in SVG?

**URL:** <https://discourse.processing.org/t/how-i-save-a-picture-in-svg/20247>\
**Category:** Processing.py\
**Created:** [April 28, 2020, 7:10pm UTC](https://discourse.processing.org/t/how-i-save-a-picture-in-svg/20247 "2020-04-28T19:10:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![christiank79](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/christiank79/32/11861_2.png) [@christiank79](https://discourse.processing.org/u/christiank79)\
**Post date:** [April 28, 2020, 7:10pm UTC](https://discourse.processing.org/t/how-i-save-a-picture-in-svg/20247/1 "2020-04-28T19:10:28Z")

</div>

Hello,  
I don’t know how to save a picture in SVG, the coding send me an error. Can you help me? Thank you.  
Christian

```auto
add_library('svg') # import processing.svg

'''
portrait_lines_black Jim Bumgardner 2-25-2000

'''

is_svg = False # set this to TRUE and change the 'size' line below to save an SVG
save_frame = ("frame/SaveExample-####.svg")

tgt_pic = "elephant_South Africa_4i.svg"

save_filename = ("elephant_South Africa_4i.png")
save_svg = ("elephant_South Africa_4i.svg")

strokes_per_pass = 100 
total_strokes = 0
max_strokes = 20000
min_stroke_len = 0.5
max_stroke_len = 2
line_thick = 0.5

def setup():
    global bm_graphic
    
    # size( 800, 533, SVG, save_svg) # use this line instead of the following to save as SVG
    size(800, 533)

    ellipseMode(RADIUS)
    bm_graphic = createGraphics(width, height)
    bg_pic = loadImage(tgt_pic)
    bm_graphic.beginDraw()
    bm_graphic.background(255)
    bm_graphic.image(bg_pic, 
                      (width-bg_pic.width)/2,
                      (height-bg_pic.height)/2)
    bm_graphic.endDraw()
    bm_graphic.loadPixels()
    
    # if not is_svg:
    # noLoop()
    if not is_svg:
        background(0)

def draw():
    global bm_graphic, total_strokes
    stroke(0 if is_svg else 255)
    noFill()
    strokeWeight(line_thick)
    strokeCap(ROUND)
    strokeJoin(ROUND)
    # phase = mouseX * TWO_PI / width
    # amp_ratio = mouseY / float(height)
    while total_strokes < max_strokes:
        for i in range(strokes_per_pass):
            x = random(width)
            y = random(height)
            ix = int(x)
            iy = int(y)
            pix = red(bm_graphic.pixels[iy*width+ix])
            pixr = pix/255.0
            if pixr > .75:
                continue
            if random(1) > pixr*pixr:
                continue
            ang = map(pixr*pixr, 0, 1, PI/2, TWO_PI+PI/2)
            amp = map(pixr*pixr,0.5,0,min_stroke_len,max_stroke_len) * (-1 if random(2) > 1 else 0)
            line(x+cos(ang)*amp*-1, y+sin(ang)*amp*-1,
                x+cos(ang)*amp, y+sin(ang)*amp)
            total_strokes += 1
    if not is_svg:
        if save_frame:
            saveFrame(save_filename)
        noLoop()
    else:
        exit()

```

AttributeError: ‘NoneType’ object has no attribute ‘width’  
processing.app.SketchException: AttributeError: ‘NoneType’ object has no attribute ‘width’  
at jycessing.mode.run.SketchRunner.convertPythonSketchError(SketchRunner.java:242)  
at jycessing.mode.run.SketchRunner.lambda$2(SketchRunner.java:119)  
at java.lang.Thread.run(Thread.java:748)

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [April 28, 2020, 8:59pm UTC](https://discourse.processing.org/t/how-i-save-a-picture-in-svg/20247/2 "2020-04-28T20:59:18Z")

</div>

Hi @christiank79!

I can’t look at your code in detail right now, but I can show an example:

```auto
"""
Press 'e' to save a single frame and exit
"""

add_library('svg')
save_frame = False

def setup():
    global svg_output

    size(500, 500)
    svg_output = createGraphics(width, height, SVG, "file.svg")

def draw():
    if save_frame:
        beginRecord(svg_output)
        
    # background(200) # without this SVG background is transparent
    rect(100, 100, 100, 100) # drawing here

    if save_frame:
        endRecord()
        exit()

def keyPressed():
    global save_frame
    if key == 'e':
        save_frame = True

```

It is possible to accumulate frames on a single SVG and also save multiple files.  
Check out the PDF examples on the IDE for strategies and adapt to SVG!

---

<div class="post-metadata">

**Author:** ![christiank79](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/christiank79/32/11861_2.png) [@christiank79](https://discourse.processing.org/u/christiank79)\
**Post date:** [April 29, 2020, 11:21am UTC](https://discourse.processing.org/t/how-i-save-a-picture-in-svg/20247/4 "2020-04-29T11:21:59Z")

</div>

Thank you.  
Christian