PPCLE
모음 목록

SVG 편집과 변환

URL-encoder for SVG를 비롯해 SVG 최적화, 변환, 편집, 애니메이션 도구와 SVG 아이콘·배경 리소스를 작업 순서대로 모았다.

TOP 6

SVG 도구 모음

SVG 파일의 변환·최적화·편집·애니메이션과 SVG 아이콘·일러스트·배경 리소스를 다루는 웹 서비스와 개발 도구를 모았습니다. 확대해도 선명한 벡터를 웹에서 쓰고 다듬을 때 골라 쓰도록 정리했습니다.

더 살펴볼 소스

SVG와 웹에서의 사용 방식

P345

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

방식설명
이미지 파일img 태그나 CSS에서 .svg 파일을 불러와 사용
인라인 SVGHTML 안에 SVG 코드를 직접 삽입, CSS와 자바스크립트로 제어
CSS 배경 이미지background-image에 SVG를 인코딩한 문자열(data URI)로 삽입

SVG를 URL-safe 문자열로 변환

P346

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

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