Mac에서 SVG 파일 최적화 및 축소하기
Figma, Illustrator, Inkscape SVG에 남은 편집기 흔적을 지우고 좌표를 반올림해요. 보기엔 같지만 파일은 더 작아져요.
Mac의 SVG 최적화
샘플 파일을 사용한 앱 스크린샷.
SVG 최적화 사용 방법
- 1
SVG를 놓으세요
Figma, Illustrator, Inkscape 또는 Sketch에서 내보낸 SVG 파일을 하나 또는 여러 개 추가하세요.
- 2
정밀도 선택
대부분의 아이콘과 일러스트에는 소수점 두 자리가 적당해요.
- 3
ID와 제목 정하기
사용하지 않는 ID를 제거하고, 화면 읽기 프로그램이 SVG를 설명해야 한다면 제목을 유지하세요.
- 4
최적화 클릭
주석, 메타데이터, 편집기의 잔여 데이터가 제거되고 숫자가 반올림돼요. 앱이 전후 전체 크기를 보여줘요.
- 5
비교하기
이름에 “optimised”가 붙은 최적화된 사본이 다운로드 › OneMacTools의 날짜별 폴더에 저장돼요. 미리보기(눈 모양) 버튼으로 똑같아 보이는지 확인하세요.
SVG 최적화의 기능
모양은 그대로 두고 주석, 메타데이터, 편집기 전용 요소와 속성, 빈 그룹, 사용하지 않는 ID, 불필요한 소수점 자리를 제거해요. 소수점 1, 2, 3자리 중에서 고르고 화면 읽기 프로그램용 제목을 유지할지 정한 다음, 미리보기로 비교하세요.
이럴 때 좋아요
- 웹사이트 출시 전에 아이콘 줄이기
- 내보낸 일러스트 정리
- 코드에서 SVG를 읽기 쉽게 만들기
옵션 설명
- 소수 자릿수
- 1, 2 또는 3이며 기본값은 2예요. 도형, 위치, 크기의 숫자를 이 자릿수까지 반올림해요. 아주 작거나 세밀한 아트워크에는 3, 크고 단순한 도형에는 1을 사용하세요.
- 사용하지 않는 ID 제거
- 기본값은 켜짐이에요. 파일 안에서 아무것도 가리키지 않는 id 속성을 제거해요. CSS나 JavaScript가 ID로 요소를 지정한다면 끄세요.
- 제목 유지(화면 읽기 프로그램용)
- 기본값은 켜짐이에요. 화면 읽기 프로그램이 이미지를 설명할 때 쓰는 <title>과 <desc> 요소를 유지해요. 순전히 장식용인 SVG라면 끄세요.
권장 사항
- 작은 아이콘은 소수점 2–3자리에서 확인하세요. 소수점 1자리로 반올림하면 16이나 24 px 아이콘의 세밀한 부분이 어긋날 수 있어요.
- ID로 애니메이션이나 스타일을 적용하는 SVG, 또는 aria-labelledby로 제목을 가리키는 SVG에는 사용하지 않는 ID 제거를 끄세요.
- 차트나 다이어그램처럼 의미 있는 이미지는 제목을 켜 두어야 접근성이 유지돼요.
- SVG를 HTML에 인라인으로 넣거나 이미지를 Base64로 도구로 변환하기 전에 최적화하세요. 줄인 바이트는 페이지를 불러올 때마다 절약돼요.
- 원래 내보낸 파일은 보관하세요. 최적화한 파일은 배포용이지, 디자인 앱에서 다시 편집하기 위한 것이 아니에요.
함께 쓸 수 있는 곳
- 입력
- SVG 파일.
- 출력
- 이름에 “optimised”가 붙은 최적화된 SVG.
- 주석, 메타데이터, (Inkscape, Sketch, Illustrator, Figma 등의) 편집기 전용 요소와 속성, 빈 그룹, XML 선언을 제거해요.
- 올바른 SVG가 아닌 파일은 바꾸지 않고 보고만 해요.
SVG 최적화에 관한 질문
SVG 파일 크기를 줄이려면 어떻게 하나요?
SVG 최적화에 놓고 최적화를 클릭하세요. 편집기가 남긴 흔적, 주석, 메타데이터를 지우고 긴 소수점을 반올림해서, 보이는 모습은 그대로 두고 파일만 작아져요.
최적화하면 SVG의 모양이 바뀌나요?
그렇지 않아요. 도형은 그대로 두고 숫자는 선택한 소수점 자리까지만 반올림해요. 미리보기 버튼으로 비교해 보고, 아주 작고 정교한 아이콘에는 3자리를 사용하세요.
Figma나 Illustrator에서 만든 SVG는 왜 그렇게 큰가요?
디자인 앱은 브라우저에 필요 없는 메타데이터, 편집기 전용 속성, 소수점 자릿수가 많은 숫자를 더해요. 이를 제거하면 차이가 눈에 띄는 경우가 많아요.
사용하지 않는 ID란 무엇인가요?
파일 안에서 아무것도 참조하지 않는 id 속성으로, 대개 레이어 이름에서 남은 거예요. 직접 작성한 CSS나 JavaScript에서 쓰지 않는다면 지워도 안전해요.
SVG에 제목을 유지해야 하나요?
네, 아이콘 버튼이나 도표처럼 이미지에 의미가 있다면 화면 읽기 프로그램이 설명할 수 있도록 넣으세요. 순전히 장식용 이미지라면 지워도 돼요.
SVG 여러 개를 한 번에 최적화할 수 있나요?
네. 아이콘 세트 전체를 놓으면 파일마다 최적화된 사본이 만들어져요.
SVG 최적화이(가) 내 파일을 업로드하나요?
아니요. SVG 최적화은(는) 전적으로 Mac에서 실행되므로 파일이 Mac 밖으로 나가지 않고 오프라인에서도 작동해요.
SVG 최적화이(가) 원본 파일을 바꾸나요?
아니요. 결과는 다운로드 › OneMacTools의 날짜별 폴더에 새 파일로 저장되고, 따로 적힌 옵션을 켜지 않는 한 원본은 그대로 남아요.
SVG 최적화에는 무엇이 필요한가요?
macOS 26 이상이 설치된 Mac만 있으면 돼요. 따로 설치할 것은 없어요.
다음으로 할 일
이미지를 HTML, CSS, JSON에 바로 붙여 넣을 수 있는 Base64 데이터 URI로 바꿔요.
스프라이트 시트 만들기아이콘을 하나의 이미지로 묶고 각각을 표시할 CSS와 HTML 미리보기를 만들어요.
관련 이미지 도구
PNG, JPEG, HEIC, AVIF, TIFF 간에 변환해요. WebP, RAW 등도 읽을 수 있어요.
이미지 압축실시간 전후 미리보기와 함께 이메일과 웹용으로 사진을 줄여요.
WebP로 변환투명도를 유지한 채 손실 또는 무손실 방식으로 작은 웹용 WebP 이미지를 만들어요.
이미지 크기 조절긴 변, 정확한 픽셀, 비율 또는 원하는 DPI에서의 cm, mm, 인치 인쇄 크기로 크기를 조절해요.
이미지 자르기화면비나 정확한 영역으로 자르거나 단색 테두리를 자동으로 잘라내세요 — 사진 한 장이든 폴더 전체든.
이미지 회전 및 뒤집기사진을 한 번에 회전하거나 반전해요.
