qrohlf / trianglify

Algorithmically generated triangle art

Home Page:http://qrohlf.com/trianglify/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

jedison opened this issue · comments

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.

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.

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.

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

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.

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.

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);

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