SVG에 이미지, 폰트 임베드
SVG 1개와 참조하는 이미지(PNG, JPEG, WebP, GIF)나 폰트(TTF, OTF, WOFF, WOFF2)를 추가해, 소재를 따로 전달하지 않아도 되도록 하나의 SVG로 묶습니다. 각 참조에 사용할 소재를 지정해 만들고, 미리보기가 표시되면 SVG를 저장할 수 있습니다. 외부 URL의 소재는 자동으로 가져오지 않습니다.
할 수 있는 일
이미지와 글꼴 묶기
추가한 로컬 소재를 SVG 안에 포함해 소재를 따로 보내는 수고를 줄입니다.
참조와 소재 확인
SVG 안의 이미지 경로나 글꼴 이름마다 대응하는 파일을 지정합니다. 미해결 참조를 남긴 채 만들지 않습니다.
만든 뒤 표시를 확인하고 저장
이미지로 표시되는지 확인하고 소재를 포함한 SVG를 저장합니다. 원본 파일은 덮어쓰지 않습니다.
사용 방법
SVG와 소재 추가
SVG 하나와 그것이 참조하는 이미지·글꼴을 선택합니다. 폴더에서 한꺼번에 추가할 수도 있습니다.
포함할 소재 대응
각 참조에 쓸 로컬 파일을 확인합니다. 자동으로 대응하지 않는 참조는 이미 추가한 소재에서 선택하세요.
SVG 만들기
미해결 참조가 없어지면 '이미지·글꼴 포함 SVG 만들기'를 누릅니다.
표시를 확인하고 저장
만든 뒤 미리보기에서 글자와 이미지를 확인한 다음 저장합니다. 표시에 실패하면 원본 SVG와 소재를 확인하세요.
이럴 때 편리
SVG와 소재를 함께 전달
다른 폴더의 이미지나 글꼴을 참조하는 그림을 전달하기 쉬운 SVG 하나로 묶습니다.
끊긴 참조의 원인 확인
필요한 소재와 추가한 파일을 대조해 찾을 수 없는 이미지나 글꼴을 지정합니다.
참조와 포함의 원리
상대 경로와 파일 대응
SVG에서 본 참조 경로와 추가한 소재의 경로가 유일하게 일치하면 자동으로 대응합니다. 이름이 같아도 폴더가 다르거나 후보가 겹치면 수동으로 선택합니다.
글꼴 이름에 쓸 파일 지정
SVG의 글꼴 이름만으로 기기의 글꼴을 가져오지는 않습니다. 필요한 글꼴 파일을 추가하고 대응하는 것을 지정하세요.
URL 소재는 자동으로 가져오지 않음
외부 URL이 참조된 경우에도 이미지나 글꼴을 직접 준비해 지정합니다. 이 화면에서 URL을 가져오는 작업은 없습니다.
포함은 용량 줄이기와 별개
이미지 데이터를 SVG 안에 넣기 때문에 SVG 자체의 용량은 늘어날 수 있습니다. 글꼴은 WOFF2로 변환해 포함합니다. SVG 코드 최적화는 별도 도구로 합니다.
표시 방법에 따른 차이
미리보기는 SVG를 이미지로 표시합니다. 모든 앱에서 같은 모습이 된다는 보장은 없으므로 전달할 곳에서도 필요한 표시를 확인하세요.
자주 묻는 질문
소재를 찾을 수 없으면 어떻게 하나요?
이미지나 글꼴을 추가하고 해당 참조의 선택란에서 지정하세요. 폴더가 다르거나 같은 경로가 중복되거나 외부 URL인 경우 자동 대응이 되지 않을 수 있습니다.
어떤 소재를 쓸 수 있나요?
이미지는 PNG, JPEG, WebP, GIF, 글꼴은 TTF, OTF, WOFF, WOFF2를 쓸 수 있습니다. SVG는 하나씩 지정합니다.
글꼴을 자동으로 찾아 주나요?
글꼴 이름만으로 기기나 웹에서 글꼴을 찾지는 않습니다. 가지고 있는 파일을 추가해 선택하세요.
이미 포함된 소재는 어떻게 되나요?
data URI로 포함된 이미지·글꼴과 SVG 안의 # 참조는 외부 참조로 세지 않습니다. 검출된 미해결 참조가 없으면 만들 수 있습니다.
소재를 추가하거나 다시 선택하면 어떻게 되나요?
소재만 추가하면 목록에 더하고 이미 지정한 소재는 유지합니다. 같은 경로의 후보가 늘어난 경우 등에는 자동 대응을 확인하세요. 새 SVG가 포함된 입력은 현재 SVG와 소재 일체를 바꿉니다.
지원하지 않는 참조가 있으면 어떻게 하나요?
외부 use나 script 참조는 포함할 수 없습니다. 외부 CSS import를 포함한 SVG도 불러올 수 없으므로, 작성한 앱 등에서 참조를 정리한 뒤 지정하세요.
SVG가 가벼워지나요?
용량 줄이기는 이 도구의 목적이 아닙니다. 소재를 SVG 안에 넣으면 용량이 늘어날 수 있습니다. 코드를 정리하려면 SVG 최적화를 사용하세요.
만든 SVG를 표시할 수 없으면 어떻게 하나요?
이 화면에서는 표시에 성공할 때까지 저장을 표시하지 않습니다. 원본 SVG와 소재를 확인하고 대응이나 파일을 다시 살펴 만들어 보세요.
입력과 결과
- 입력
- SVG 1개와 이미지·글꼴. 파일 또는 폴더에서 추가.
- 이미지
- 추가한 이미지의 원본 데이터를 포함합니다. 이미지 크기 조정이나 압축은 하지 않습니다.
- 글꼴
- 대응한 글꼴을 WOFF2로 변환해 포함합니다.
- 출력
- 원래 이름-embedded.svg. 만든 뒤 표시에 성공하면 저장할 수 있습니다.