SVG 병합
☞ 모든 처리가 브라우저 안에서 이루어집니다 — 아무것도 업로드되지 않습니다여기에 SVG 파일을 놓으세요
또는 클릭해서 찾기 — SVG 파일 최대 12개
미리보기
OneImageTool
무료 이미지 도구
SVG 병합
여러 SVG 파일을 하나로 합칩니다. 가로, 세로, 격자, 겹치기로 배치할 수 있고 각 파일은 자기 그러데이션, 필터, 스타일을 그대로 유지합니다.
또는 클릭해서 찾기 — SVG 파일 최대 12개
미리보기
파일끼리 서로 침범하지 않게
각각으로는 완벽히 올바른 SVG 파일 두 개가, 한 문서를 공유하는 순간 깨질 수 있습니다. 둘 다 id가 "a"인 그러데이션을 정의하고 있을 수 있고, 둘 다 모든 것을 .st0이라 부르는 Illustrator 스타일시트를 품고 있을 수 있습니다. 그냥 이어 붙이면 두 번째 그러데이션이 조용히 첫 번째를 가리키고, 한쪽 스타일시트가 다른 쪽을 덮어씁니다. 파일은 멀쩡히 열리고, 그저 잘못 보일 뿐입니다.
이 도구는 각 원본 파일의 모든 id와 클래스에 고유한 접두사를 붙이고, 그에 맞춰 모든 참조를 다시 씁니다. url() 값, href 프래그먼트, 인라인 스타일, style 요소 안의 선택자까지 포함해서요. 그런 다음 각 파일을 자체 중첩 svg 안에 배치해, 그 좌표계만의 뷰포트를 갖게 합니다.
세 단계
.svg 파일을 최대 12개까지 추가하세요 — 파일은 기기에 남습니다.
가로, 세로, 격자, 겹치기 중에서 고르고 원하는 간격을 주세요.
전부를 담은 SVG 하나가 나옵니다.
간단한 답변
네. 각 파일의 id에 접두사(f1-, f2- 등)가 붙고 그 id를 가리키는 모든 참조가 함께 다시 쓰입니다. 그래서 둘 다 url(#a)를 쓰던 두 파일이 하나를 두고 다투는 대신 각자 자기 정의를 가리키게 됩니다.
똑같이 처리됩니다. Illustrator와 Figma 내보내기는 거의 모든 것을 .st0이나 .cls-1로 이름 붙이기 때문에, 사실 id 충돌보다 클래스 충돌이 더 흔합니다. class 속성과 style 요소 안의 선택자에 접두사가 함께 붙습니다.
네 — 파일 목록의 화살표를 쓰세요. 목록의 순서가 곧 배치 순서이며, 왼쪽에서 오른쪽으로, 위에서 아래로 이어집니다.
아니요. 각 파일은 자기 치수를 유지한 채 그대로 배치됩니다. 가로 배치에서는 세로 가운데로 맞추고, 격자에서는 각 칸이 가장 큰 파일 크기가 됩니다. 크기를 맞추고 싶다면 먼저 SVG 크기 조정 도구를 쓰세요.
모든 파일을 같은 자리에 가운데를 맞춰 포개 놓습니다 — 아이콘 위에 배지를 얹거나, 같은 그림의 두 버전을 비교할 때 유용합니다.
아니요. 모든 해석과 조립이 브라우저 안에서 이뤄집니다.