SVG에 투명도를 적용하는 방법

Adobe Illustrator CC의 SVG 그래픽은 배경이 있는 디지털 디자이너에게 거의 전달되지 않습니다. 일반적으로 그래픽은 웹사이트, 앱, 애니메이션 또는 대화형 컨텍스트에 존재하는 모든 배경 위에 떠 있습니다.

SVG 아트웍의 배경을 없애는 것과 관련된 것을 논의하기 전에 SVG 그래픽에 투명도를 적용하는 데 초점을 맞추십시오. 투명도 패널을 사용하여 아트웍의 불투명도를 정의해야 합니다. 예를 들어, 그림의 노란색 모양에 50% 투명도가 적용되었으며 투명도가 적용된 것을 볼 수 있습니다. 그리고 네, 그 이미지 는 SVG에 내장된 가볍고 빠른 로딩과 무한 확장 기능을 갖춘 SVG 파일입니다.

컬러 배경 위에 있는 반투명 SVG 모양.

투명한 배경으로 SVG를 출력하는 방법

디자이너는 투명하게 만들거나 계속 볼 수 있는 배경에 대해 생각하는 데 익숙합니다. 우리는 배경을 노크하는 것에 대해 생각합니다. PNG 이미지와 GIF 이미지는 그런 식으로 작동합니다. 배경으로 만들거나 Illustrator 또는 Photoshop과 같은 프로그램에서 투명한 배경을 선택하여 해당 배경을 제거합니다.

GIF 및 PNG를 사용하면 배경 색상이나 이미지가 웹 페이지를 통해 표시되도록 하는 하나의 투명 색상을 가질 수 있습니다. 그러나 SVG 파일에서 배경을 녹아웃시키는 논리는 PNG 및 GIF와 다릅니다. 기본적으로 배경이 없기 때문에 배경이 투명하지 않은 SVG 그래픽 같은 것은 없습니다. 즉 , 기본적으로 SVG 그래픽은 배경 없이 저장하고 내보냅니다.

그래서, 문제가 무엇입니까? 글쎄, SVG 파일을 저장하거나 내보낼 때 실수로 투명한 배경으로 끝나기 쉽습니다! 다음 그림은 배경이 흰색이거나 배경이 투명할 수 있습니다. Illustrator 화면만 보고는 알 수 없습니다. 보기 → 투명도 격자 표시를 선택해야 합니다.

이 그래픽은 배경이 흰색이거나 배경이 없을 수 있습니다.

그림과 같이 Transparency Grid를 활성화하면 새 뒤에 흰색 사각형이 있고 파일을 SVG로 저장하거나 SVG로 내보내면 흰색 배경이 그래픽과 "함께" 표시되는 것을 볼 수 있습니다.

투명도 격자를 보면 그래픽 뒤에 흰색 사각형이 나타납니다.

이것을 다른 각도에서 강조하고 조명하겠습니다. 이 이미지를 SVG로 내보내려고 하면 표시된 화면용 내보내기 대화 상자에 투명도 색상을 선택하는 옵션이 없습니다.

배경색이 없기 때문에 SVG에서 투명도 색상을 선택할 수 없습니다.

SVG 대상 아트워크 뒤에 배경 사각형을 넣어야 한다고 주장하는 디자이너를 종종 만나곤 합니다. 그래야 대상 매체(예: 웹 페이지 또는 앱)의 배경색으로 그래픽이 어떻게 보이는지 알 수 있습니다. 괜찮습니다. SVG를 저장하거나 내보낼 때 배경 사각형을 제거하는 것을 기억하는 한 주의해야 합니다. 그리고 오늘날의 압박감, 높은 생산성, 빠른 턴어라운드 세상에서 기억해야 할 한 가지가 더 필요한 사람은 누구입니까?

더 나은 솔루션은 그래픽이 배치될 환경과 일치하는 단일 색상으로 투명도 "격자"를 정의하는 것입니다. 그리드 를 따옴표로 묶는 이유는 무엇 입니까? 이 기술은 속임수를 사용하기 때문에: 이 기술을 사용하면 두 그리드 색상을 동일한 색상으로 정의하여 웹 페이지 또는 앱 배경 색상을 효과적으로 시뮬레이션할 수 있습니다.

SVG 아트웍을 개발하는 동안 해당 기술을 사용하여 사용자 정의 배경을 만들려면 다음 단계를 따르십시오.

파일→문서 설정을 선택합니다.

일반 탭에서 투명도 및 중복 인쇄 옵션 섹션을 찾습니다.
원하는 변경 사항은 대화 상자의 이 섹션에서 제어됩니다.
그리드를 효과적으로 분배하고 있으므로 그리드 크기를 정의하는 것에 대해 걱정하지 마십시오.

대화 상자의 투명도 격자 섹션에서 두 격자 색상 패널 중 첫 번째를 클릭하고 다음 그림에 표시된 색상 팝업에서 다양한 색상 팔레트 중 하나를 사용하여 배경 색상을 선택합니다.
그런데 이러한 색상 팔레트 중 어느 것도 특히 디지털 친화적이지 않습니다. RGBA, 16진수 또는 기타 표준 웹 색상 형식에 대한 팔레트는 없지만 색상 선택기 스포이드를 사용하면 일치시키려는 배경 색상을 얻을 수 있습니다.

투명도 격자로 미리보기 배경색 정의하기.

두 그리드 색상 패널 중 두 번째 패널을 선택하고 동일한 색상을 할당합니다.
색상 선택기 스포이드를 사용하여 해당 색상을 잡을 수 있음을 기억하십시오.

문서 설정 대화 상자에서 확인을 클릭합니다.

이전 단계에서 수행한 작업은 Transparency Grid 가 활성화되었을 때 표시 되는 방식을 정의하는 것뿐이었습니다 . 따라서 투명도 격자가 활성화되지 않은 경우 보기→투명도 격자를 선택합니다.

이 그림에서는 그래픽이 있는 아트보드를 선택했으며 시뮬레이션된 배경색에 대해 프로젝트를 미리 봅니다.

사용자 정의 투명도 격자로 출력 배경색 미리보기.

SVG에 투명도 효과 적용

투명도(예: 50% 불투명도) 또는 색상 번, 어둡게 또는 곱하기와 같은 투명 효과를 SVG 그래픽에 적용하면 해당 효과 는 SVG의 확장성을 유지합니다.

이 그림은 PNG 파일(상단) 및 SVG로 내보낸 동일한 그래픽(3개의 반투명 주황색 직사각형)을 보여줍니다. 브라우저에서 확대하면 PNG 파일의 품질이 어떻게 저하되는지 확인할 수 있습니다. 당신이 볼 수 없는 것은 PNG 파일이 SVG보다 거의 두 배 크다는 것입니다.

투명도 적용 시 SVG와 PNG 출력(상단) 비교

다음은 투명도 효과를 위해 SVG를 사용할 때의 이점에 대한 요약입니다.

• 파일 크기는 질적으로 더 작습니다.
• 웹 또는 앱 개발자는 투명도 값을 조정하거나 편집하고 상호 작용을 할당할 수 있습니다.
• 파일을 아무리 확대해도 이미지와 투명도가 저하되지 않습니다.

그런데 이 직사각형 세트에 대해 생성된 SVG 코드가 어떻게 생겼는지, 웹 또는 앱 개발자가 이 코드로 작업하는 것이 얼마나 쉬운지 궁금하다면 다음은 세 개의 SVG 상자 중 첫 번째에 대한 코드입니다. , 60% 불투명도 적용:

<="" 코드="">