svg_to_png

SVG 를 PNG 로 변환하는 코드입니다.

HTML 과 JS 로 구성되어 있습니다.

자유롭게 사용하세요.

사용법

1. 소스를 다운로드 받습니다.

2. sample.json.js 을 복사해서 'config.json.js'으로 이름을 변경해주고 presets 를 설정해줍니다.

3. svg 파일은 'svg-data' 같은 폴더를 만들어서 잘 적어주고 config.json 에 잘 설정해줍니다.

config.json 설정

json 의 key 값은 각기 다르게 구성해줍니다. 그 외의 설정은 아래와 같이 합니다.

• name : 'select box'에서 보여질 명칭. 본인이 구분하기 쉽게 대충 설정합니다.
• foregroundSvg : 가운데에 들어갈 svg 의 경로를 적습니다.
• backgroundSvg : 배경에 들어갈 svg 의 경로를 적습니다. 불필요한 경우 'null'을 입력합니다.
• filename : "canvas-{size}px.png" 같은 형태로 적습니다. {size}라고 된 부분에 크기가 들어갑니다.
• sizes : 배열 형태로 숫자값을 적습니다. 예시 : [36, 48, 128, 256, 512, 1024] 같이 필요한대로 적습니다.

PNG 다운로드

로컬에서 파일로 열어서 실행한 경우에는 브라우저의 권한 이슈로 다운로드기능이 동작되지 않습니다.

로컬에서 웹서버를 동작시켜서 웹서버의 도큐먼트 경로로 옮긴 후에, 브라우저로 http://localhost/svg-to-png/ 와 같이 열어서 실행한 경우에 PNG 다운로드가 동작됩니다.

웹 서버를 이용하지 않는 경우는, 하나씩 마우스오른쪽을 클릭하여서 다운로드를 받으시면 됩니다.