# Lag with antialiasing on an SVG

**URL:** <https://discourse.processing.org/t/lag-with-antialiasing-on-an-svg/20141>\
**Category:** Coding Questions\
**Created:** [April 25, 2020, 4:26pm UTC](https://discourse.processing.org/t/lag-with-antialiasing-on-an-svg/20141 "2020-04-25T16:26:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![henrylang](https://avatars.discourse-cdn.com/v4/letter/h/439d5e/32.png) [@henrylang](https://discourse.processing.org/u/henrylang)\
**Post date:** [April 25, 2020, 4:26pm UTC](https://discourse.processing.org/t/lag-with-antialiasing-on-an-svg/20141/1 "2020-04-25T16:26:26Z")

</div>

Hello, I am creating a data visualizer for data that spans across the entire world. Because of this, I have imported an SVG and I am rendering it onto the screen. You can drag the mouse to pan across the map, and use the mouse wheel to zoom in and out. I have one issue though, when the entire map is on the screen at once, I get horrible lag (10-20 fps). I have tried using noSmooth(), which sort of fixed the problem (40 fps), but looks really bad. I wonder if there is some way to only attempt to render parts of the SVG that are within the bounds of the window? Maybe looping though children of the SVG PShape?

Code is below:

```auto
PShape map, country;
HashMap<String, Country> countries;
DataHandler data_handler;
int map_x, map_y;
float scale;

void setup() {
  size(1000, 650);
  frameRate(60);
  scale = 3;
  map = loadShape("world.svg");
  data_handler = new DataHandler();
  data_handler.load_data("data.txt");
  smooth();
}

void draw() {
  background(255);
  fill(0);
  text("FPS: " + frameRate, 30, 30);
  if(mousePressed) {
    map_x += (mouseX - pmouseX) / scale;
    map_y += (mouseY - pmouseY) / scale;
  }
  pushMatrix();
  scale(scale, scale);
  translate(map_x, map_y);
  shape(map, 0, 0);
  popMatrix();
}

void mouseWheel(MouseEvent event) {
  scale += event.getCount() * 0.1;
}

```

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [April 26, 2020, 3:53am UTC](https://discourse.processing.org/t/lag-with-antialiasing-on-an-svg/20141/2 "2020-04-26T03:53:57Z")

</div>

How big is the svg file?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 3, 2020, 7:54pm UTC](https://discourse.processing.org/t/lag-with-antialiasing-on-an-svg/20141/3 "2020-05-03T19:54:28Z")

</div>

The general approach with world coordinates is to optimize using tiling, like with the unfolding maps library. Or to implement pyramidal resolution, when you load different (lower resolution / sparser) coordinate sets at higher altitudes / wider views.

---

<div class="post-metadata">

**Author:** ![henrylang](https://avatars.discourse-cdn.com/v4/letter/h/439d5e/32.png) [@henrylang](https://discourse.processing.org/u/henrylang)\
**Post date:** [May 5, 2020, 7:04pm UTC](https://discourse.processing.org/t/lag-with-antialiasing-on-an-svg/20141/4 "2020-05-05T19:04:51Z")

</div>

Thanks, I’ll try to implement this!