spatialillusions / milsymbol

Military Symbols in JavaScript
www.spatialillusions.com/milsymbol
MIT License
544 stars 133 forks source link

Invalid SIDC sometime produce invalid SVG #203

Closed r3mi closed 5 years ago

r3mi commented 5 years ago

Invalid SIDC sometime produce SVGs with incorrect syntax. Exemple on battleDimension :

var ms = require("milsymbol");

var symbol = new ms.Symbol("SPP---------");
console.log(symbol.asSVG());

symbol = new ms.Symbol("SP----------");
console.log(symbol.asSVG());

symbol = new ms.Symbol("------------");
console.log(symbol.asSVG());

Result

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="158" height="138" viewBox="21 16 158 138"><path d="M 65,150 c -55,0 -50,-90 0,-90 0,-50 70,-50 70,0 50,0 55,90 0,90" stroke-width="4" stroke="black" fill="rgb(255,255,128)" fill-opacity="1" ></path><path d="M 100 22.5 C 85 22.5 70 31.669211 66 50 L 134 50 C 130 31.669204 115 22.5 100 22.5 z" stroke-width="4" stroke="none" fill="black" ></path><path d="M 65,150 c -55,0 -50,-90 0,-90 0,-50 70,-50 70,0 50,0 55,90 0,90" stroke-width="5" stroke-dasharray="4,4" stroke="rgb(239, 239, 239)" fill="none" ></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="108" height="108" viewBox="46 46 108 108">undefinedstroke-width="4" stroke="black" fill="rgb(255,255,128)" fill-opacity="1" >undefinedstroke-width="4" stroke="black" fill="rgb(255,255,128)" fill-opacity="1" >stroke-width="5" stroke-dasharray="4,4" stroke="rgb(239, 239, 239)" fill="none" ></svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="108" height="108" viewBox="46 46 108 108">undefinedfill-opacity="1" ></svg>

Notice the invalid tags in the second and third exemples : undefinedstroke-width or undefinedfill-opacity without a starting element <.

Using milsymbol 1.3.3 Thanks for this great project !

spatialillusions commented 5 years ago

Error handling should be improved here. I got an idea for what fallback I should use.

spatialillusions commented 5 years ago

I checked the master branch and the second now returns:

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="8" height="8" viewBox="96 96 8 8"></svg>

and the third one returns the same, so at some time I did fix this.

I did however add new code to the validation control to make sure they report that they arn't valid symbols.

trinizz84 commented 5 years ago

SUG*IUR---H-

This one is also returning invalid asSVG and asDOM

Was able to get a png using .asCanvas().asDataURL()

spatialillusions commented 5 years ago

Please try this out using the master branch code. You can find a fairly new build here if you don't want to build it yourself: http://spatialillusions.com/milsymbol-dev/dist/milsymbol.js As far as I can tell, everything works as it should and the SVG output is valid and isValid reports true.