SVG Grabber는 웹 페이지에 있는 모든 SVG를 찾아줍니다. 인라인 SVG 요소, 외부 .svg 파일 참조, SVG 스프라이트(use/symbol 패턴), SVG data URI까지 모두 감지합니다. 각 SVG를 다양한 크기로 미리보고, 밝은/어두운 배경에서 투명도를 확인하며, 원시 SVG 마크업을 복사하거나 최적화된 SVG 파일로 다운로드할 수 있습니다.
현대 웹사이트에는 로고, 아이콘, 일러스트, 장식 그래픽, 데이터 시각화 등 SVG가 곳곳에 사용되지만, 이를 추출하는 것은 의외로 어렵습니다. 인라인 SVG는 HTML에 직접 포함되어 있어 "이미지로 저장"할 수 없고, SVG 스프라이트는 use/symbol 참조로 되어 있어 단독 파일로 해결되지 않습니다. 외부 SVG는 네트워크 탭을 열지 않고는 검사하기 어렵습니다. SVG Grabber는 이러한 모든 소스를 자동으로 처리합니다. DOM에서 인라인 SVG를 스캔하고, 스프라이트 참조를 완전한 symbol 정의로 해석하며, 외부 SVG URL을 찾고, SVG data URI를 디코딩합니다. 각 SVG는 갤러리에 라이브 미리보기로 표시되며, 밝은 배경, 어두운 배경, 체커보드 배경을 전환하여 투명도를 확인할 수 있습니다. 코드에 인라인으로 넣을 원시 SVG 코드를 복사하거나, 프로젝트에서 바로 사용할 수 있는 SVG 파일로 다운로드하세요.
페이지에 있는 모든 소스에서 SVG를 찾습니다: DOM의 인라인 <svg> 요소, img 또는 object 태그로 로드된 외부 .svg 파일, CSS background-image SVG, use/symbol 스프라이트 참조(완전한 SVG로 해석), base64 data URI 인코딩 SVG까지 모두 포함됩니다.
각 SVG를 원본, 2x, 4x 크기로 미리보고, 어두운 배경, 밝은 배경(흰색), 체커보드 배경을 전환할 수 있습니다. 체커보드는 단색 배경에서는 보이지 않는 투명 영역을 드러내줍니다.
"Copy SVG"를 클릭하면 viewBox, paths, groups, 모든 속성을 포함한 완전한 SVG 마크업을 얻을 수 있습니다. HTML, JSX, Vue 템플릿, 또는 SVG 스프라이트 파일에 바로 붙여넣을 수 있으며 코드가 깔끔하고 제대로 포맷팅되어 있습니다.
개별 SVG를 적절한 XML 선언과 인코딩이 포함된 .svg 파일로 다운로드할 수 있습니다. 파일명은 SVG의 ID, 클래스 이름, 또는 aria-label을 기반으로 자동 생성되어 "download.svg" 같은 일반적인 이름이 아닙니다.
각 SVG에 소스 유형(inline, external, sprite, data URI), viewBox 크기, 파일 크기, DOM에서 발견된 위치가 표시됩니다. 사이트가 SVG를 어떻게 구현했는지 이해하는 데 유용합니다.
페이지가 use href="#icon-name" 형식의 SVG 스프라이트를 사용할 때, SVG Grabber는 각 참조를 완전한 symbol 정의로 해석하여 use 요소가 아닌 독립적인 전체 SVG를 제공합니다.
훌륭한 아이콘 시스템을 가진 웹사이트를 방문하여 전체 SVG 아이콘 세트를 가져오세요. SVG Grabber는 스프라이트, 인라인 SVG, 외부 파일에 있는 아이콘을 모두 찾아 구현 방식과 관계없이 완전한 아이콘 라이브러리를 수집합니다.
파트너 페이지, 케이스 스터디, 또는 프레스 키트용으로 회사 SVG 로고가 필요한가요? 현대 웹사이트의 대부분 로고는 SVG입니다. SVG Grabber가 원본 벡터 품질(무한 확장 가능)로 찾아 추출해줍니다.
복잡한 SVG 일러스트, 애니메이션, 데이터 시각화를 어떻게 구현했는지 공부하세요. 원시 SVG 코드를 복사하여 path 구조, viewBox 설정, CSS 애니메이션 적용 방식을 검사할 수 있습니다.
새 아이콘 시스템으로 전환 중인가요? 참고 사이트에서 SVG를 가져와 자신의 SVG 스프라이트나 컴포넌트 기반 아이콘 시스템에 추가하세요. 올바른 viewBox 값을 가진 깔끔한 SVG 코드가 바로 통합 준비가 됩니다.
사이트에서 SVG가 어떻게 구현되었는지 검토하세요. 인라인(조작에 좋음), 외부(캐싱에 좋음), 스프라이트(효율성에 좋음) 중 어떤 방식인지 확인할 수 있습니다. SVG Grabber가 각 SVG의 소스 유형을 보여주어 SVG 전략을 최적화하는 데 도움이 됩니다.
DevSuite Pro 플로팅 독을 열고 SVG Grabber 아이콘을 클릭하세요. 도구가 페이지의 모든 SVG 소스를 스캔하여 갤러리를 구축합니다.
발견된 모든 SVG가 썸네일 그리드로 표시됩니다. 각 항목에는 SVG 이름, 소스 유형, viewBox 크기가 표시됩니다.
원하는 SVG를 클릭하면 더 큰 미리보기가 열립니다. 어두운/밝은/체커보드 배경을 전환하고, 미리보기 크기를 조정하여 SVG가 어떻게 스케일되는지 확인하세요.
"Copy SVG"를 클릭하면 코드에 인라인으로 넣을 원시 마크업을 가져오고, "Download"를 클릭하면 독립적인 .svg 파일로 기기에 저장하세요.
갤러리로 돌아가 더 많은 SVG를 살펴보세요. 배지에는 페이지에서 발견된 총 SVG 수가 표시됩니다.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
