SVG 파일 읽어 DOM 객체로 변환, SVG 내용변경 후 다운로드

SVG 파일 읽어 DOM 객체로 변환, SVG 내용변경 후 다운로드

 

 

몇 백개되는 SVG 파일에 공통된 내용을 변경해 달라는 요청을 받았을 때 작성한 코드입니다. 

 

우선 복수의 파일을 읽을 element 가 필요하겠죠?

 

<input type="file" id="file" multiple="multiple">

몇 백개 되는 파일을 일일히 넣을 수 없으니 multiple로 설정합니다. 

그리고 file에 change event를 등록해줍니다. 

 

var file = document.getElementById("file");
file.addEventListener("change", function(){
    var files = e.target.files;
    for(var i in files){
        (function(file, index){
            setTimeout(function(){
                var reader = new FileReader();
                reader.onload = function(e){
                    readSVG(e.target, file.name);
                }
            }, 2000*index);
        })(files[i], i);
    }
});

 

파일 개수만큼 돌면서 Filereader() 로 파일의 text를 읽어 readSVG 함수로 전달하는 코드 입니다. 

부하가 될 수 있을 것 같아 1초의 시간 텀을 두었습니다. 

for문 내 즉시실행함수를 사용한 이유는 아래의 Link를 확인하세요!

 

Link : aljjabaegi.tistory.com/294

클로저 사용시 주의할 점. 클로저 유의사항, 반복문, setInterval, 실행시점

마지막으로 readSVG 함수입니다. 

 

var readSVG = function(file, fileName){
    var text = file.result;
    var doc = new DOMParser().parseFromString(text, "image/svg+xml");
    /*
    이제 doc.getElement....으로 DOM 객체 접근 가능
    접근 수정로직
    */
    var blob = new Blob([new XMLSerializer().serializeToString(doc)], {type : "image/svg+xml"});
    var downloadUrl = URL.createObjectURL(blob);
    a.href = downloadUrl;
    a.download = fileName+".svg";
    document.body.appendChild(a);
    a.click();
}

 

file.result로 file의 text에 접근이 가능합니다. 

그리고 그 text를 DOMParser 를 이용해 DOM 객체로 변경하였습니다.

 

이제 변경된 DOM 객체를 다시 text로 변경하여 blob 형태로 만들고, 

해당 파일을 다운로드 하는 로직입니다. 

 

실행을 하여, 파일에 svg 파일을 넣게되면 2초에 하나의 파일씩 수정로직을 거져 

다운로드 되게됩니다.