node.js로 png->svg로 바꾸기

YU YU·2021년 11월 25일

[project]swap 사이트 만들기

목록 보기

25/26

1. png vs svg

png 는 픽셀로 된 그림 파일인 반면 svg는 벡터 형식의 그림 파일이다. 픽셀 형식은 확대하면 계단식으로 깨지지만 svg 파일은 벡터 형식으로 확대해도 비율이 유지가 되서 깨지지 않는다.

1-1. 픽셀 형식

이런 식으로 깨진다.

1-2. svg

svg 는 소스 파일로 구성된 그림 파일이다. 원래 그림 파일은 알 수 없는 글자들로 이루어져 있지만 svg 파일은 소스로 그림을 그리는듯하게 구성되어있다.
즉, 그림을 소스로 저장한 것이다.

이런 식으로 구성티 되어 있어서 크기나 색상 등을 소스에서 직접 조정할 수 있다.

2. png 파일을 svg 파일로 바꾸기

프로그래머라면 하나하나씩 그림을 변환하기보다는 한꺼번에 변환하는 방법을 찾을 것이다.
png 파일을 svg로 바꾸는 것은 python으로 찾으면 많이 나온다. 그러나 우리는 그동안 배웠던 node.js를 활용해서 바꾸어보도록 하겠다.

2-1. pixel-art-2-svg

png파일들이 있는 상위 폴더에
$ npm init을 해준다.
그 다음에
$ npm i pixel-art-2-svg을 통해 pixel-art-2-svg을 다운받는다.
https://github.com/webbestmaster/pixel-art-2-svg
위의 주소로 들어가보면 소개가 나와있다.
픽셀의 형태로 png 파일을 svg로 나타내준다.

2-2. js 파일 만들기

const fs = require('fs');
const pixelArtToSvg = require('pixel-art-2-svg');
const fileSystem = require('fs');

const dirName = 'image'
let arranges=[];

var files = fs.readdirSync(dirName);
console.log(files);
files.forEach(file => {
    let [filename,extension] = file.split('.');
    if(String(extension)==='png'){
        arranges.push(String(filename));
    }
})


arranges.forEach(files=>{
    pixelArtToSvg(dirName + `/${files}.png`)
    .then(svgString => {
        fileSystem.writeFile(
            'newImg' + `/${files}.svg`, 
            svgString, 
            () => console.log(dirName + `/${files}.svg --done!`)
        );
    });
});

const dirName = 'image'에서 dirName 으로는 디렉토리의 이름을 써준다.
그 다음에 String(extension)==='png'를 만족하면 파일의 확장자가 png이다. 이 파일들을 변환시킬 것이기 때문에 arragens에 png파일들의 이름을 넣어준다.
그 다음에

pixelArtToSvg(dirName + `/${files}.png`)

위의 코드는 디렉토리에 속해있는 파일을 찾는 것이다.
그 다음에 그 결과를 svgString으로 받아서
'newImg'라는 디렉토리에 /${files}.svg로 저장되겠다는 내용이다.
이렇게 하면 몇몇 개는 signature 오류가 나지만 대부분의 파일은 변환에 성공을 한다.

3. 안의 파일들 변형하기

변환을 하면 다음과 같이 줄바꿈도 되지 않게 나온다. 우리는 tsx에 써야하기에 변환을 해주어야 한다.

변형 작업 목록

<svg...>,</svg>를 <Svg ...>,</Svg>로 바꾸기

{...props} 추가하기

줄바꿈하기

한번에 바꾸는 작업을 빠르게 하기 위해 wsl로 접속한다. 즉, 우분투로 접속을 한다.

3-1. `<svg>`👉`<Svg>`로 바꾸기

$ find ./ -type f -readable -writable -exec sed -i "s/svg/Svg/g" {} \;
위와 같이 해주면 다 바뀌었을 거라고 생각하지만 잘못 바뀌어진 부분이 있었다.

밑줄 친 부분은 잘 바뀌었지만 네모친 Svg는 원래 svg가 되어야하기에 다음과 같이 Svg" 부분을 svg"로 바꾸어준다.
$ find ./ -type f -readable -writable -exec sed -i "s/Svg\"/svg\"/g" {} \;