Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Too many nested <g>'s

See original GitHub issue

I’m outputting SVG’s that are rather complex, like this:

screen shot 2016-01-15 at 5 12 36 pm

When I go to save it, I’m doing it like this:

var svg = document.getElementsByTagName('svg')[0];
svg = new XMLSerializer().serializeToString(svg);
var b64 = btoa(unescape(encodeURIComponent(svg)));
var img = document.createElement('img');
img.src = "data:image/svg+xml;base64,\n"+b64;
img.alt = "file.svg";
var url = img.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
window.open(url);

And the end result has a ton of lines/circles nested, this is the bottom of the svg:

<g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></svg>

Because of that, I get this error message when opening up in Illustrator:

screen shot 2016-01-15 at 5 15 27 pm

And the image looks a little messed up:

screen shot 2016-01-15 at 5 16 29 pm

Is there any better way to avoid all these objects getting nested? I’m just using the ellipse()``,point(), andline()``` methods.

Issue Analytics

State:
Created 8 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

2reactions

dudenascommented, Oct 19, 2020

I commented out these lines in the p5.svg.js and it solved a problem

0reactions

kabriocommented, Apr 15, 2019

My advice would be to use the clear() command before all the drawing functions are called, especially when working with an active draw loop. This results in a svg with just the paths of the last drawn graphic. BUT: this only works up to p5.js version 0.6.0. Later versions just give me empty canvases.

Hmm, I see you are using clear(). Why don’t you use the p5js save() command for exporting?

Top Results From Across the Web

3 Strategies To Fix Nested GlideRecords

When to Use: Use this approach when two GlideRecord queries are being explicitly called in the nested pattern and changing the data model...

Solved: Nested GlideRecord is returning correct data for o...

The other issue I am having is the outermost query doesnt return the correct data and it seems to be looping too many...

When to say No to Excel Nested IFs

Excel Nested IFs can result in slow workbooks and be difficult to understand. ... The Problem with too many Nested IFs.

NoSuchElementException (SyntaxError: too many statically ...

I found a way to handle this: if p3 == 0: try: p3_2 = driver.find_element_by_xpath("(//div/table)[2]/ ...

Nested parallelism in transactional memory

fine-grained nested parallelism in tomorrow's multi/many-core machines. ... We adopt such assumption too. Hence, when a given nested task is running, ...