SVG 도구 모음: 변환, 최적화, 편집, 아이콘

SVG 파일을 웹에서 바로 활용하기 위해 변환이 필요한 경우가 있습니다. 확대해도 선명한 벡터를 XML 코드로 표현하며, 삽입 방식에 따라 쓰는 도구가 달라집니다.

URL-encoder for SVG는 SVG 파일의 코드를 URL-safe 문자열로 변환하는 도구입니다. 인코딩한 결과는 CSS background-image 등에서 직접 사용할 수 있습니다.

1. SVG 파일의 코드를 도구에 붙여 넣는다
2. URL-safe 문자열로 인코딩된 결과를 복사한다
3. CSS background-image 등에 복사한 문자열을 넣어 사용한다

불필요한 메타데이터와 코드를 줄여 용량을 낮출 때 씁니다. 웹 화면에서는 SVGOMG, 빌드·명령줄에서는 SVGO가 맞습니다. SVGOMG는 온라인 이미지 편집 도구 모음과도 공유합니다.

다른 이미지 형식과 SVG를 주고받거나, 래스터를 벡터로 바꾸고, React에서 컴포넌트로 쓸 때 쓰는 도구입니다.

브라우저나 디자인 도구에서 SVG를 고치고, 애니메이션을 붙일 때 씁니다.

아이콘·일러스트를 찾거나 패턴·배경을 만들 때 쓰는 리소스입니다. unDraw는 무료 이미지 서비스 모음과도 공유합니다.

필요한 작업과 결과물 형태를 먼저 고른 뒤, 무료 범위와 라이선스를 확인합니다.