search

qrohlf / trianglify

Algorithmically generated triangle art
http://qrohlf.com/trianglify/
GNU General Public License v3.0
10.08k stars 669 forks source link

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

Closed jedison closed 8 years ago

jedison commented 9 years ago

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 9 years ago

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 https://github.com/qrohlf/trianglify/issues/41.

jedison commented 9 years ago

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 https://github.com/qrohlf/trianglify/issues/41.

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

aymanalzarrad commented 9 years ago

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

jedison commented 9 years ago

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 9 years ago

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.

ghost commented 8 years ago

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 8 years ago

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!