SVG URL 인코더

SVG란 무엇인가요?

SVG는 Scalable Vector Graphics(확장 가능한 벡터 그래픽)의 약자입니다. 웹을 위한 벡터 기반 그래픽을 XML 형식으로 정의하는 데 사용됩니다. SVG 파일의 모든 요소와 속성은 애니메이션으로 만들 수 있습니다.

• Wikipedia - SVG

CSS에서 SVG를 사용하는 방법은?

CSS에서 SVG 코드를 직접 사용하려면 먼저 SVG 코드를 인코딩해야 합니다. 이 SVG URL Encoder 도구 또는 JavaScript 함수 encodeURIComponent()를 사용하면 됩니다. 인코딩된 SVG 데이터 URI는 url() 함수를 통해 background-image, border-image, mask CSS 속성과 함께 사용할 수 있습니다. 예시: background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='red'/%3E%3C/svg%3E");

CSS에서 SVG 색상을 변경하는 방법은?

SVG의 색상을 바꾸려면 CSS의 mask 속성과 background-color 속성을 함께 사용하면 됩니다. 아래 예시는 SVG의 색상을 파란색으로 변경합니다. 예시: mask: url(“data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='currentColor'/%3E%3C/svg%3E”); background-color: blue;

URL이란 무엇인가요?

URL(Uniform Resource Locator)은 인터넷상의 고유한 리소스 주소입니다. 브라우저가 HTML 페이지, CSS 문서, 이미지 등의 리소스를 가져오는 데 사용하는 핵심 메커니즘 중 하나입니다.

• MDN - What is a URL?

URL을 인코딩하는 방법은?

URL을 인코딩하려면 encodeURIComponent() 함수를 사용할 수 있습니다. 이 함수는 특정 문자의 각 인스턴스를 해당 문자의 UTF-8 인코딩을 나타내는 하나, 둘, 셋 또는 네 개의 이스케이프 시퀀스로 교체하여 URI를 인코딩합니다. encodeURI()와 비교하여 이 함수는 URI 구문의 일부인 문자를 포함하여 더 많은 문자를 인코딩합니다.

• MDN - encodeURIComponent()

URL을 디코딩하는 방법은?

URL을 디코딩하려면 decodeURIComponent() 함수를 사용할 수 있습니다. 이 함수는 %XX 형태의 각 이스케이프 시퀀스를 UTF-8 코드 단위 하나(한 바이트)로 처리하여 URI를 디코딩합니다. UTF-8에서 첫 번째 바이트의 선행 1비트 수(1바이트 ASCII 문자의 경우 0, 그 외 2, 3 또는 4)는 해당 문자의 바이트 수를 나타냅니다.

• MDN - decodeURIComponent()