# Problems with exporting to SVG

**URL:** <https://discourse.processing.org/t/problems-with-exporting-to-svg/31950>\
**Category:** Coding Questions\
**Created:** [August 26, 2021, 2:30pm UTC](https://discourse.processing.org/t/problems-with-exporting-to-svg/31950 "2021-08-26T14:30:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![liogra](https://avatars.discourse-cdn.com/v4/letter/l/85f322/32.png) [@liogra](https://discourse.processing.org/u/liogra)\
**Post date:** [August 26, 2021, 2:30pm UTC](https://discourse.processing.org/t/problems-with-exporting-to-svg/31950/1 "2021-08-26T14:30:58Z")

</div>

Quite new to processing so might be overlooking something. I’m trying to export the following as SVG. but it hangs at the for statements. also tried without screen display but that is also not working.

```auto
PImage img;

import processing.svg.*;

void setup() {

  img = loadImage ("NASA.jpg");
  img.filter(GRAY);
  img.resize(800, 800);
  size(800, 800);
  beginRecord(SVG, "planet3.svg");
  float tiles = 5;
  float tileSize = width/tiles;
  translate(tileSize/2, tileSize/2);
  //size(800, 800, SVG, "filename.svg");

  background(255);
  fill(0);
  noStroke();
  print("123");

  for (int x = 0; x <img.width; x++) {
    for (int y = 0; y <img.height; y++) {
      color c = img.get(int(x*tileSize), int(y*tileSize));
      float size = map(brightness(c), 0, 255, tileSize, 0);
      ellipse(x*tileSize, y*tileSize, size, size);
    }
  }
  endRecord();
  print("test");
  //exit();
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 26, 2021, 3:28pm UTC](https://discourse.processing.org/t/problems-with-exporting-to-svg/31950/2 "2021-08-26T15:28:08Z")

</div>

Hello,

Take a look here:

> **[SVG Export / Libraries](https://processing.org/reference/libraries/svg/index.html)**
>
> Create SVG files.

This worked but took a few seconds to display:

> **Example**
>
> ```auto
> PImage img;
> import processing.svg.*;
> 
> void setup() {
> 
> size(200, 200);
>   
> img = loadImage ("sunflower.jpg");
> img.filter(GRAY);
> img.resize(200, 200);
>   
> beginRecord(SVG, "planet3.svg");
> float tiles = 5;
> float tileSize = width/tiles;
> translate(tileSize/2, tileSize/2);
> //size(800, 800, SVG, "filename.svg");
> 
> background(255);
> fill(0);
> noStroke();
> print("123");
> 
> for (int x = 0; x <img.width; x++) 
> {
> for (int y = 0; y <img.height; y++) 
> {
> color c = img.get(int(x*tileSize), int(y*tileSize));
> float size = map(brightness(c), 0, 255, tileSize, 0);
> ellipse(x*tileSize, y*tileSize, size, size);
> println(x+y*img.width);
> }
> }
> println("test1");  
> endRecord();
> println("test2");
> //exit();
> }
> 
> ```

![tint1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1a1f8bf0d6fb1dc3744c3a8099e9595978c75020.jpeg)

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c3bac6b2b4b4a0aaf2a9f4dcd09123cd6a322ece.png)

`:)`

---

<div class="post-metadata">

**Author:** ![liogra](https://avatars.discourse-cdn.com/v4/letter/l/85f322/32.png) [@liogra](https://discourse.processing.org/u/liogra)\
**Post date:** [August 26, 2021, 3:52pm UTC](https://discourse.processing.org/t/problems-with-exporting-to-svg/31950/3 "2021-08-26T15:52:13Z")

</div>

I just noticed result after letting it run, rendering time seems to be way longer then I expected.

Is there a way that would make more sense?

I work mainly with vector art, so the idea to make dot patterns or whatever shape from an image is what I’m after.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 26, 2021, 3:59pm UTC](https://discourse.processing.org/t/problems-with-exporting-to-svg/31950/4 "2021-08-26T15:59:45Z")

</div>

Hello,

See reference for get() and the comments about speed:

> **[Reference](https://processing.org/reference/get_.html)**
>
> Reads the color of any pixel or grabs a section of an image. If no parameters are specified, the entire image is returned. Use the x and y parameters to get the value of one pixel. Get a…

Take a look here:

> **[Images and Pixels](https://processing.org/tutorials/pixels/)**
>
> How to load and display images as well as access their pixels.

Then create your vector art from above.

`:)`

---

<div class="post-metadata">

**Author:** ![liogra](https://avatars.discourse-cdn.com/v4/letter/l/85f322/32.png) [@liogra](https://discourse.processing.org/u/liogra)\
**Post date:** [August 26, 2021, 4:00pm UTC](https://discourse.processing.org/t/problems-with-exporting-to-svg/31950/5 "2021-08-26T16:00:37Z")

</div>

found the culprit.

```auto
for (int x = 0; x <img.width; x++) {
    for (int y = 0; y <img.height; y++) {
      color c = img.get(int(x*tileSize), int(y*tileSize));
      float size = map(brightness(c), 0, 255, tileSize, 0);
      ellipse(x*tileSize, y*tileSize, size, size);
    }
  }

```

should be

```auto
for (int x = 0; x <tiles; x++) {
    for (int y = 0; y <tiles; y++) {
      color c = img.get(int(x*tileSize), int(y*tileSize));
      float size = map(brightness(c), 0, 255, tileSize, 0);
      ellipse(x*tileSize, y*tileSize, size, size);
    }
  }

```

when I opened it in illustrator I saw it drew outside the canvas. rendering times seem to be decent now.