Blog / 수양록 / SVG 아이콘을 만드는 방법

SVG 아이콘을 만드는 방법

38×38px PNG > SVG 아이콘을 만드는 방법
방법 1: sips (macOS 내장 명령어, 별도 설치 불필요)
bash
# 단일 파일
sips -z 38 38 input.png --out icon_38.png

# 여러 파일 일괄 변환
for f in *.png; do sips -z 38 38 "$f" --out "resized_${f}"; done
방법 2: ImageMagick (brew install imagemagick 필요)
bash
# 비율 유지하면서 38px에 맞춤 (투명 배경 패딩)
magick input.png -resize 38x38 -gravity center -extent 38x38 icon_38.png

# 강제 38x38 (비율 무시)
magick input.png -resize 38x38! icon_38.png
방법 3: 리사이즈 + Base64 인코딩 + SVG 래퍼까지 한번에
bash
# 1. 리사이즈
sips -z 38 38 input.png --out icon_38.png

# 2. Base64 인코딩
B64=$(base64 -i icon_38.png | tr -d '\n')

# 3. SVG 문자열 생성
echo "<svg width=\"38\" height=\"38\" viewBox=\"0 0 38 38\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><image width=\"38\" height=\"38\" xlink:href=\"data:image/png;base64,${B64}\"/></svg>"
방법 4: 원라이너 (리사이즈 → Base64 → SVG 출력, 클립보드 복사까지)
bash
sips -z 38 38 input.png --out /tmp/_icon38.png && \
echo "<svg width=\"38\" height=\"38\" viewBox=\"0 0 38 38\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><image width=\"38\" height=\"38\" xlink:href=\"data:image/png;base64,$(base64 -i /tmp/_icon38.png | tr -d '\n')\"/></svg>" | pbcopy && \
echo "✅ SVG가 클립보드에 복사되었습니다"

이 원라이너를 실행하면 SVG 문자열이 클립보드에 복사된다.

Written by
author
풍우래기

여행을 좋아하는 집돌이 개발자입니다.

블로그에 새로운 글이 발행되었습니다.