https://github.com/exizt/svg-to-png
svg 를 png 로 변환할 때
https://github.com/exizt/svg-to-png
javascript svg-to-png svg-to-png-converter typescript
Last synced: 2 months ago
JSON representation
svg 를 png 로 변환할 때
- Host: GitHub
- URL: https://github.com/exizt/svg-to-png
- Owner: exizt
- License: gpl-2.0
- Created: 2020-12-07T02:09:51.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-01-15T00:17:37.000Z (over 1 year ago)
- Last Synced: 2025-01-06T04:28:00.827Z (4 months ago)
- Topics: javascript, svg-to-png, svg-to-png-converter, typescript
- Language: TypeScript
- Homepage:
- Size: 28.3 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svg_to_png
SVG 를 PNG 로 변환하는 코드입니다.
HTML 과 JS 로 구성되어 있습니다.
자유롭게 사용하세요.
# 사용법
1. 소스를 다운로드 받습니다.
2. sample.json.js 을 복사해서 'config.json.js'으로 이름을 변경해주고 presets 를 설정해줍니다.
4. 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 다운로드가 동작됩니다.
웹 서버를 이용하지 않는 경우는, 하나씩 마우스오른쪽을 클릭하여서 다운로드를 받으시면 됩니다.