개발자를 위한 SVG: 기본 사항, 이점 및 단점 이해

그래픽은 웹사이트에 고유한 표현을 제공할 뿐만 아니라 개발자가 사용자에게 심오한 아이디어와 개념을 쉽게 전달할 수 있도록 도와줍니다. 이것은 인터넷의 핵심 요소이며 1999년 이후로 스크립트가 가능해지면서 웹에서 이미지를 보다 복잡하게 표시할 수 있게 되었습니다.

JPG, PNG 및 GIF와 같은 다양한 래스터 이미지 파일 유형의 사용에 매우 익숙할 것입니다. 조금 기억해 봅시다. 256색(8비트)을 지원하는 GIF(Graphic Interchange Format)는 알파 투명도를 포함하지 않는 뛰어난 애니메이션 및 투명도 형식입니다. PNG(Portable Network Graphic) 형식은 애니메이션이 필요하지 않은 경우 1600만 개 이상의 색상(24비트)과 모든 유형의 투명도를 지원하므로 훨씬 더 좋습니다.

웹에서 가장 널리 사용되는 이미지 형식 JPG 또는 JPEG(Joint Photographic Experts Group)은 주로 압축 가능하기 때문에 1600만 개 이상의 색상을 지원합니다. 회색조의 경우 픽셀당 24비트 또는 8비트이지만 애니메이션이나 투명도는 지원하지 않습니다. 따라서 JPG는 개발자가 정적 사진에 사용하는 주요 그래픽 형식입니다. Bitmap(BMP)은 일반적으로 웹용 이미지 형식이 아니기 때문에 언급하지 않았습니다. BMP는 이미지의 각 픽셀에 대한 정확한 데이터를 저장하므로 파일이 정말 커서(동일한 해상도의 JPG 크기의 150배 이상) 웹사이트 그래픽에 적합하지 않습니다.

이러한 해상도 종속 그래픽 형식은 대부분 적절하게 사용될 때 훌륭합니다. 그러나 그것들은 모두 공통적인 결점을 공유하고 있으며, 그로 인해 웹을 위한 유일한 벡터 이미지 형식인 SVG가 도입되었습니다.

SVG 란 무엇입니까?

SVG(Scalar Vector Graphics)는 경로, 선, 원, 패턴, 텍스트 색상 등과 같은 2차원 그래픽을 설명하는 XML(Extensible Markup Language) 기반 이미지 형식입니다. 간단히 정의하면 이미지 형식을 나타냅니다. 전체 동작과 존재가 XML 텍스트 파일에 의해 제어되는 2차원을 지원합니다.

또 다른 흥미로운 기능은 확장성입니다. 해상도를 잃지 않고 SVG 이미지를 어떤 규모로든 가져올 수 있습니다. SVG는 각 픽셀을 칠해야 하는 색상을 정의하여 이미지를 렌더링하는 래스터 이미지 형식에서와 같이 픽셀이 아닌 모양, 숫자 및 좌표로 이미지를 렌더링하기 때문입니다.

SVG 이미지를 만드는 방법과 프로젝트에서 SVG 사용을 고려해야 하는 몇 가지 이유를 살펴보겠습니다.

SVG 이미지를 만드는 방법

모든 텍스트 편집기를 사용하여 SVG 이미지를 만들 수 있지만 프로세스가 약간 기술적이고 특히 복잡한 모양을 만드는 경우 약간의 디자인 및 수학 지식이 필요합니다. 코드 줄만 사용하여 캔버스에 비행기를 그리는 것을 상상해 보십시오. 그러나 더 쉬운 방법이 있지만 이를 사용하여 SVG의 기본 개념을 이해합시다.

SVG 그래픽 요소를 사용하여 텍스트 편집기에서 SVG 이미지를 만듭니다. 이 프로세스는 좌표, 치수, 색상 등을 지정하여 <svg> 및 </svg> 태그 안에 그래픽 요소를 삽입하기만 하면 됩니다. 예를 들어, <rect> 요소는 다음 예.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

위의 코드는 .svg 파일로 저장하고 브라우저에서 열 경우 브라우저의 맨 위 왼쪽 모서리에 300x x 300px의 파란색 직사각형을 그립니다. 이제 문서에 두 개의 높이와 너비가 있는 이유가 궁금할 것입니다. 전체 코드를 이해하여 그 이유를 알아보겠습니다. 앞서 언급했듯이 SVG 코드는 루트 요소(<svg> 및 </svg>) 내부에 작성되어 해당 행을 해석하는 방법을 브라우저에 알려야 합니다.

HTML과 마찬가지로 SVG는 루트 요소에 네임스페이스 선언이 필요합니다. 위의 예에서는 루트 요소 내에서 xmlns 매개변수 "http://www.w3.org/2000/svg"와 W3C 권장 SVG 버전 1.1을 제공했습니다. 루트 요소 내부의 차원을 SVG 관점이라고 하며 루트 태그 내에 그려진 SVG 이미지가 표시되는 창 또는 캔버스입니다. 관점은 브라우저에 표시되기 전에 전체 SVG 개체와 최소한 동일한 차원을 가져야 합니다.

두 번째 줄은 이해하기 쉽습니다. 직사각형을 그리는 데 사용되는 <rect> 요소는 치수로 시작하는 제안된 직사각형의 매개변수를 구현합니다. 획 너비는 선 두께를 설명하는 반면 두 개의 RGB 색상 모델은 브라우저에 직사각형과 선을 채울 색상을 알려줍니다. 아주 간단하죠?

이제 다음과 같이 x 및 y 값을 선언하여 페이지 내부에서 사각형을 이동할 수 있습니다.

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

물론 이 작업에 필요한 추가 공간을 수용하기 위해 관점 치수를 늘리는 것도 잊지 않을 것입니다.

SVG 이미지를 만드는 가장 쉬운 방법은 Adobe Illustrator, Inskape 및 Sketch와 같은 그리기 도구를 사용하는 것입니다. 처음부터 빌드하는 대신 Bonsai.js 및 D3.js와 같은 일부 JavaScript 라이브러리는 아이콘, 복잡한 모양 등을 찾고 있는 경우 SVG 이미지에 대한 좋은 소스입니다.

SVG 이미지 추가

SVG 이미지를 사용할 때의 이점 중 하나는 디자인과 쉽게 통합할 수 있다는 것입니다. img 태그의 src 속성에서 참조하기만 하면 됩니다. 이것은 다음과 같이 웹사이트 폴더에 저장된 .svg 파일을 참조해야 합니다.

<img src='example.svg'>

또는 앞서 언급한 것처럼 <svg></svg> 태그가 코드를 시작하고 종료하는 SVG 코드를 HTML 문서에 삽입할 수 있습니다.

다음과 같이 배경 이미지에 대해 CSS에서 SVG 이미지를 참조할 수도 있습니다.

.main-header {
background-image: url(example.svg);
}

개발자를 위한 SVG 사용의 이점

인터넷의 현재 그래픽 요구 사항을 고려할 때 후속 웹 프로젝트에서 SVG의 필요성은 아무리 강조해도 지나치지 않습니다. 강력한 해상도와 화면 크기를 가진 수많은 새로운 장치 외에도 웹 사이트는 이제 그래픽을 완전히 제어하지 못하면 전문가 수준의 웹 사이트를 제공하기 어려울 수 있을 정도로 많은 상호 작용을 제공합니다.

몇 가지 이점은 다음과 같습니다.

확장성 및 응답성

해상도에 의존하지 않는 이미지 형식인 SVG는 픽셀화되지 않고 무한정 확장될 수 있습니다. 이를 통해 개발자는 장치의 해상도 및 화면 크기에 관계없이 모든 사용자에게 최고 수준의 그래픽 이미지를 제공할 수 있습니다. 다양한 경로, 모양 및 텍스트 요소를 결합하여 모든 크기에서 선명하고 또렷한 멋진 시각 효과를 만들 수 있습니다.

이것은 고정된 치수의 래스터 이미지 형식에서는 사용할 수 없습니다. 단순히 확장할 때 모든 공간을 채울 충분한 데이터가 없기 때문입니다. SVG는 점 사이의 거리를 계산하여 경로를 지속적으로 연결하여 이미지가 어떤 크기에서도 선명하게 유지되도록 합니다.

매우 유연하고 애니메이션 지원

이미지의 최종 사본을 제공하는 래스터 이미지와 달리 SVG 이미지는 텍스트 편집기나 특수 그리기 도구를 사용하여 코드를 조정하여 완전히 편집할 수 있습니다. SVG 요소의 클래스 이름 또는 ID를 사용하여 CSS를 사용하여 SVG 이미지에 스타일을 지정하거나 애니메이션을 적용할 수 있습니다. SVG 이미지의 애니메이션은 Web Animation API, SMIL 또는 WebGL로도 가능합니다.

가장 중요한 것은 SVG 이미지를 다른 저명한 개방형 웹 플랫폼 기술 및 문서와 통합할 수 있다는 것입니다. SVG는 JavaScript로 스크립팅할 수 있고 HTML과 같은 CSS로 스타일을 지정할 수 있습니다.

SEO 친화적이며 작은 파일 크기

텍스트 형식으로 존재하는 SVG 이미지는 웹 사이트의 접근성을 향상시키며 이는 페이지 순위에 큰 자산입니다. 그 외에도 검색 엔진은 SVG 요소 텍스트를 색인화할 수 있으며 이를 통해 사용자는 SVG 파일의 키워드를 사용하여 웹사이트를 찾을 수 있습니다.

SVG는 다운로드할 파일이 없고 HTTP 요청이 필요 없기 때문에 훨씬 빠르게 로드됩니다. 래스터 이미지 파일의 해상도를 향상시킨다는 것은 도트(픽셀) 수를 늘리는 것을 의미합니다. 이렇게 하면 이미지 크기가 커져 웹사이트 로딩 시간이 길어집니다. SVG를 사용하는 경우와는 거리가 멉니다. 일련의 지침과 좌표를 사용하여 생성된 이미지인 SVG 파일 크기는 다른 이미지 파일 유형에 비해 (최적화 시) 엄청나게 작습니다. 그 결과 로딩 시간이 빨라지고 페이지 성능이 향상되며 검색 엔진 순위가 높아지면서 사용자 경험은 계속 향상됩니다. 이에 대한 자세한 내용은 SEO 컨설턴트 런던을 참조하십시오.

SVG에는 자체 문서 개체 모델이 있습니다.

SVG는 별도의 문서로 존재하며 고유한 구조를 가지며 일반 DOM 내부에 위치합니다. 이 평판은 모든 차원의 관점을 만들고 다양한 크기의 캔버스에 이미지를 그리고 SVG 속성을 업데이트하지 않고 표시할 수 있게 해주는 viewBox 속성에 매우 중요합니다.

SVG는 미래의 이미지 파일 형식입니다.

엄청나게 뛰어난 화면 해상도를 가진 더 강력한 장치가 없었다면 개발자는 다양한 장치에 맞게 이미지를 최적화하는 엄청난 골치 아픈 문제를 처리할 필요가 없었을 것입니다. 그러나 이것은 웹사이트의 상호작용 증가에 대한 갈망이 증가함에 따라 지금부터 몇 년 안에 더 쉬워지지 않을 것입니다.

사용자의 관점 차원에 맞게 다른 이미지를 제공하여 이러한 문제를 어떻게든 관리하는 것은 비용 효율적이지 않습니다. 그리고 대역폭, 비용을 절약하고 사용자 경험을 개선하여 비즈니스 지속 가능성을 위해 SVG 이미지 형식으로 전환하려는 노력이 불가피하게 최우선 과제가 됩니다. SVG 지지자 커뮤니티가 증가하고 있습니다.

W3C가 2011년 8월 16일 SVG 1.1(2판)을 도입하기 전에 잠재적으로 새 버전에 대한 검토가 진행 중이었습니다. SVG 1.0 및 1.1(초판)은 이미 우리가 인터넷에서 이미지를 처리하는 방식을 바꾸고 있었습니다. 이것은 현재의 웹 프로그래밍 상태에서 여전히 매우 유용한 일반 래스터 이미지 형식보다 더 가치 있는 것을 약속합니다. SVG가 모든 경우에 최상의 이미지 형식은 아닙니다. SVG의 후속 버전은 SVG의 일부 단점을 해결할 것으로 예상됩니다. 이 기사의 뒷부분에서 논의됩니다.

SVG 이미지 형식을 사용하는 경우

물론 해상도에 의존하는 이미지 형식은 여전히 ​​사진 및 기타 세부 이미지에 가장 적합합니다. 다음은 SVG 이미지 형식이 가장 좋은 일반적인 경우의 목록입니다.

1. 로고 및 아이콘
2. 차트, 그래프, 지도, 인포그래픽과 같은 대화형 이미지
3. 애니메이션
4. 애플리케이션 인터페이스
5. 일반 다이어그램 및 일러스트레이션
6. 끈적끈적하거나 모양 변형과 같은 특수 효과
7. 저강도 아트웍과 단순한 그래픽

개발자를 위한 SVG의 단점

SVG는 모든 브라우저에서 지원되지 않습니다. 이전 브라우저는 SVG를 연결하려고 할 때 오래된 Windows XP가 플래시 드라이브나 Canon EOS 5DSr을 처리하는 것과 같은 방식으로 처리합니다. 간단히 말해서 SVG는 이전 브라우저에서 작동하지 않습니다. IE8 이하. 그러나 레거시 브라우저가 실제로 미래 원인의 일부가 아니라는 점과 소수의 사람들만 여전히 사용한다는 사실을 고려할 때 SVG를 사용하지 않는 주요 이유는 아닙니다.

SVG는 많은 세부 사항을 지원하지 않습니다. 경로와 포인트가 혼합된 SVG는 픽셀 기반 래스터 이미지 형식만큼 세부 사항을 표시하는 프레임워크가 부족합니다. SVG는 카메라로 캡처한 어떤 것과도 작동하지 않습니다. 따라서 세부 정보가 많은 사진 및 기타 형식의 그래픽은 더 높은 밀도의 색상을 지원하기 때문에 래스터 이미지 형식을 사용하여 가장 잘 표시됩니다.

SVG 코드 이해: 개발자는 여러 웹 프로그래밍 언어를 사용하는 방법을 알고 있는 것으로 간주될 수 있지만 이 부담을 늘리는 것은 어려운 일임이 입증되었습니다. SVG 코드 패턴은 실제로 어렵지 않거나 웹 프로그래밍 언어와 완전히 다르지 않습니다. 그러나 눈길을 끄는 이미지를 만들거나 조작하려면 약간의 노력이 필요합니다. 이것은 비트맵 이미지가 편리하고 포함하는 데 노력이 필요하지 않을 때 모든 개발자가 많은 시간을 투자하고 싶어하는 것은 아닙니다.

결론

광범위한 사용자에 대한 웹사이트의 그래픽 동작은 오늘날 웹 개발의 중요한 측면입니다. 그리고 SVG 이미지 형식은 현재 디자인에서 일반적으로 볼 수 있는 여러 이미지 크기를 렌더링하는 대신 훌륭한 솔루션입니다. 이는 브라우저가 모든 규모에서 깨끗하고 선명한 이미지를 보장하는 일련의 지침을 사용하여 이미지를 렌더링하는 방법을 계산하기 때문입니다.

비트맵 이미지는 사진과 같은 매우 상세한 이미지에 가장 적합하지만 SVG 이미지는 아이콘, 로고, 차트, 인포그래픽 등과 같은 덜 상세한 이미지에 사용됩니다. 아이콘 및 인기 있는 모양에 대한 SVG 이미지 및 온라인 라이브러리 생성. 코딩은 SVG 이미지를 조작하려는 경우에만 필요합니다.

SVG를 사용하는 방법과 여기에 공유되지 않은 다른 멋진 팁에 대해 알려주십시오.