qrohlf/trianglify

Add an option to generate svg nodes with the correct xmlns attribute for standalone use

jedison opened this issue · 7 comments

jedison commented

I have been trying to use the svg version of Trianglify, but that output is not valid.
I have compared the outerHTML of svg() to a valid Trianglify svg, and there are some obvious problems which are fixable, but there are some more serious problems which mean that the svg cannot be parsed by SVG editors.

qrohlf commented

Can you specify how the output is not valid? Are you using a validator, or
will it not open in a specific program?
On Thu, Jun 25, 2015 at 6:35 AM jedison notifications@github.com wrote:

I have been trying to use the svg version of Trianglify, but that output
is not valid.

—
Reply to this email directly or view it on GitHub
#41.

jedison commented

It will not open in SVG editors (parse error reported) and it will not display in browsers.

Regards,
Jeff

(Sent from a mobile device; please excuse misspellings.)

On 25 Jun 2015, at 16:52, Quinn Rohlf notifications@github.com wrote:

Can you specify how the output is not valid? Are you using a validator, or
will it not open in a specific program?
On Thu, Jun 25, 2015 at 6:35 AM jedison notifications@github.com wrote:

I have been trying to use the svg version of Trianglify, but that output
is not valid.

—
Reply to this email directly or view it on GitHub
#41.

—
Reply to this email directly or view it on GitHub.

aymanalzarrad commented

@jedison : are you getting any errors in the console? I just used the svg and things are working as should.

jedison commented

No, no errors on console but the SVG does not display. To double check, I copied the outer HTML and saved it as a file, which produces an SVG file which will not display either.

Regards,
Jeffrey

(Sent from a mobile device; please excuse misspellings.)

On 26 Jun 2015, at 02:56, Ayman Al Zarrad notifications@github.com wrote:

@jedison : are you getting any errors in the console? I just used the svg and things are working as should.

—
Reply to this email directly or view it on GitHub.

qrohlf commented

I've run the output of pattern.svg() through the w3c svg validator and it checks out as valid. You can try it yourself - run Trianglify({x_colors: 'YlGnBu', seed: 'wat', cell_size: 30}).svg() and then copy the output into https://validator.w3.org/#validate_by_input.

If you have experienced a context where Trianglify is producing output that doesn't pass the w3c validator, please let me know some steps to reproduce the issue and I will look into it.

Deleted user commented

I've ran into what seems to be the same issue - using Node to generate the SVG, copying outer HTML and saving it to file.

Adding xmlns="http://www.w3.org/2000/svg" attribute to the <svg> tag like this solves it for me:

var svg = trianglify(options).svg();
// set attribute or otherwise browser won't display the SVG file.
svg.setAttribute('xmlns','http://www.w3.org/2000/svg');
fs.writeFileSync(svgfile, svg.outerHTML);
qrohlf commented

Ah. I didn't understand from the initial report that this was a problem with using Trianglify to generate a file output as opposed to inline <svg> content.

For users running into this issue, the workaround from @sangsatori is the correct way to address it for now.

I'll add an option to include the svg namespace in the generated node in the next release of Trianglify. Thanks for catching this!

  • add an option in Pattern.svg() to include the namespace in the output node