Question

I have to create a customized and basic SVG Editor using HTML5/JS/jQuery/CSS.
Input for the Editor are two files x.svg and its associated x.css file.

The x.svg will be loaded in the HTML Page, with its styles from x.css applied. Then styles like stroke, width… will be manipulated using JS/jQuery, all fine so far.

My problem is that after the user make some changes to the style and want to save those changes permanently in the x.css file, I dont know how to do that, I can write the
Attribute: Value pairs easily to a file, but the x.css files has selectors, braces and so on…the output of the program should be a prober x.css file, notice that the x.svg will remain the same. How can I handle this problem, an detailed idea with no code is sufficient, thanks.

Answer 1

Ok here is the answer, I achieved it with the help of FileSaver.min.js and BlobBuilder.min.js from Eli grey, the function is attached to the click event of an anchor element, when user clicks a dialog comes, asking you to insert file name and where to store.
Tested on Chrome 23, on version 24 it didnt work.

function exportCSS() 
{

//stop anchor link from taking us anywhere
event.preventDefault();
//index is chosen for test sofar, need next to iterate over all sSheets and pick the right one depending on svg file name
sSheet = document.styleSheets[2];
myRules = sSheet.cssRules;
len = myRules.length;
for (i = 0; i < 50; i++) {
    cssOutputString = cssOutputString + myRules[i].cssText + "\n";
}
console.log(cssOutputString);

//save the file
var blob = new Blob([cssOutputString]);

saveAs(blob, "file.css");
}