SVG는 무엇입니까? SVG 파일에 대한 안내서

SVG : 확장 가능한 벡터 그래픽의 장점과 응용

SVG (확장 가능한 벡터 그래픽)는 이미지, 선, 곡선, 텍스트 및 색상 정보를 결합하여 이미지를 빌드하는 고유 한 이미지 파일 형식입니다. JPG, PNG 및 GIF와 같은 픽셀 기반 형식과 달리 SVG 파일은 그래픽을 만드는 "레시피"와 비슷하므로 이미지 품질을 잃거나 파일 크기를 늘리지 않고 확대 할 수 있습니다. SVG 파일에는 확장 성 및 응답 성, 프로그래밍 성 및 상호 작용, 접근성 및 성능을 포함하여 많은 장점이 있습니다. 삽화, 차트, 로고, 아이콘, 애니메이션, 대화식 차트, 인포 그래픽,지도, 특수 효과 및 인터페이스 및 응용 프로그램을 포함하여 다양한 목적으로 사용할 수 있습니다.

SVG 파일은 Figma, Adobe Illustrator, Boxy SVG 및 SVG 편집기와 같은 벡터 그래픽 응용 프로그램을 사용하여 만들 수 있습니다. 이들은 모든 최신 웹 브라우저와 호환되며 인쇄에 사용될 수 있으며 더 나은 성능을 위해 최적화 할 수 있습니다. 그러나 이메일 클라이언트는 SVG를 지원하지 않으므로 전자 메일에서 기존 래스터 이미지를 사용하는 것이 일반적으로 더 안전합니다.

SVG 란 무엇입니까?

SVG (확장 가능한 벡터 그래픽)는 이미지, 선, 곡선, 텍스트 및 색상 정보를 결합하여 이미지를 빌드하는 이미지 파일 형식입니다. 가장 일반적으로 사용되는 이미지 형식 (예 : JPG, PNG 및 GIF)은 이미지 데이터를 픽셀의 특정 순열로 기록하는 반면, SVG 파일은 주어진 그래픽을 만들기 위해 "서면 설명"또는 "레시피"와 비슷합니다. 이것은 SVG (좋은 레시피와 같은)가 이미지 품질을 잃지 않고 파일 크기를 증가시키지 않고 확대 될 수 있음을 의미합니다. SVG 코드는 HTML 또는 XML과 유사한 특성을 가진 텍스트 기반의 인간 읽을 수있는 언어입니다.

SVG 파일은 어떻게 생겼습니까?

최신 웹 브라우저에서 매우 간단한 SVG 파일을 열면 다음이 표시됩니다.

텍스트 편집기에서 동일한 SVG 파일을 열면 다음이 표시됩니다. 예제에 표시된 바와 같이, SVG 문서는 모양, 선, 곡선, 색상 및 텍스트를 설명하는 일반 텍스트 파일에 지나지 않습니다. 인간이 읽고 편집 할 수 있으며 CSS 또는 JavaScript를 통해 작동 할 수 있습니다. 이것은 SVG에 전통적인 PNG, GIF 또는 JPG 이미지 형식과 일치 할 수없는 유연성과 다양성을 제공합니다.

SVG 파일을 작성하거나 편집하는 방법은 무엇입니까?

위의 예와 같이 기본 텍스트 편집기를 사용하여 간단한 SVG 이미지를 만들 수는 있지만 대부분의 SVG는 최신 벡터 그래픽 응용 프로그램을 사용하여 생성됩니다. 인기있는 SVG 편집자는 다음을 포함합니다

피마 Adobe Illustrator boxy svg (저렴한) SVG 편집기 (무료)
• 다음은 일반적인 SVG 이미지 예입니다. 이 60KB 그림은 거의 모든 온라인 환경에서 사용될 수 있습니다. 벡터로서, 우리는 그것이 뷰포트 또는 요소 너비 요구 사항을 충족시키기 위해 즉시 확장 될 것이라고 확신 할 수 있습니다.
SVG는 1990 년대에 태어 났으며 결국 "백조"로 성장했습니다. 처음에는 지원이 좋지 않았고 2000 년대의 대부분 동안 간과되었지만 2010 년대 중반 이후 상황이 바뀌 었습니다. 모든 최신 웹 브라우저는 이제 SVG를 완벽하게 렌더링하며 모든 전문 드로잉 응용 프로그램은 SVG 내보내기 옵션을 제공합니다. JPG 및 PNG와 같은 기존의 래스터 그래픽은 여전히 ​​사진 이미지에 더 적합하지만 SVG는 확장 성, 응답 성, 프로그래밍 성, 성능 및 접근성에 대한 오늘날 웹 개발의 요구를 충족시키는 데 적합합니다.
• SVG와 HTML5 캔버스의 차이점은 무엇입니까?
이 두 기술은 매우 다르지만이 질문은 종종 묻습니다. 우리는 SVG 및 캔버스의 각 기술의 용도, 장단 및 단점을 분류하여 매번 올바른 선택을 할 수 있습니다.
SVG의 장점은 무엇입니까?

SVG의 장점은 현대 웹 개발에서 가장 어려운 문제를 해결할 수 있다는 것입니다. 이 질문들 중 일부를 간단히 살펴 보겠습니다.

확장 성과 응답 성

당신이 신중하게 생각한다면, Nike 로고를 구성하는 모양, 경로 및 텍스트는 표준 명함이나 키가 20 피트 인 거대한 건물 로고에 묘사 할 때 동일합니다. 측정 단위 만 변경되었습니다. SVG를 사용하면 이러한 이미지가 어떤 크기로든 날카 롭고 날카 롭다는 것을 확신 할 수있는 이미지를 만들 수 있습니다. 대조적으로, GIF, JPG 및 PNG와 같은 픽셀 기반 형식은 레고 벽돌을 사용하는 것과 같습니다. 더 큰 크기와 세부 사항을 원한다면 유일한 솔루션은 더 많은 블록을 추가하는 것입니다. 다양한 반응 형 이미지 기술이 픽셀 그래픽에 귀중한 것으로 입증되었지만 실제로는 SVG의 무한대 규모의 능력과 실제로 경쟁 할 수 없습니다.

프로그래밍 성 및 상호 작용

SVG 이미지는 별도의 구성 요소 (모양, 선, 곡선 및 텍스트)로 구성되므로 항상 스크립트와 동작을 사용하여 이러한 구성 요소를 찾을 수 있습니다. CSS 및/또는 JavaScript를 통해 인라인 SVG 그래픽에 다양한 애니메이션 및 상호 작용을 추가 할 수 있습니다. JPG 또는 PNG에서 이미지 요소를 찾는 동등한 방법은 없습니다.

접근성

SVG 파일은 텍스트 기반이므로 픽셀 이미지에있는 것보다 항상 포함 된 정보가 검색하고 인덱싱하기가 쉽습니다. 이것은 SVG 자체에 액세스 할 수 있다는 것을 의미합니까? 아니요. 부적절하게 준비된 SVG는 부적절하게 표시된 PNG만큼 쓸모가 없습니다. 그러나 SVG 차트 데이터는 동등한 JPG 차트보다 스크린 리더, 검색 엔진 및 기타 텍스트 소비 서비스에서 더 쉽게 추출 할 수 있습니다.

성능
4. 네트워크 성능에 영향을 미치는 가장 중요한 측면 중 하나는 웹 페이지에서 사용되는 파일 크기입니다. 신중하게 준비된 경우 비교적 작은 SVG 파일을 사용하여 크고 복잡한 이미지를 표시 할 수 있습니다.

SVG에 가장 적합한 용도는 무엇입니까?

SVG에는 실질적인 사용 사례가 많이 있습니다. 가장 중요한 것을 논의합시다.

삽화 및 차트

펜과 연필로 제작에 적합한 전통적인 드로잉은 SVG 형식으로 완벽하게 변환해야합니다. SVG는 종종 3D 인쇄 패턴, Etsy 아트 워크, 티셔츠 디자인, 자수 패턴 및 웨딩 계획 자료를 제공하는 데 사용됩니다.

• 로고와 아이콘
> 로고와 아이콘은 버튼 크기 나 광고판 크기에 관계없이 모든 크기로 날카 롭고 날카 롭기 때문에 SVG에 이상적입니다. 또한 SVG 아이콘은 액세스하기 쉽고 찾기가 더 쉽습니다.

애니메이션

멋진 라인 드로잉 효과를 포함하여 SVG 그래픽으로 매력적인 애니메이션을 만들 수 있습니다. 실제로 SVG 코드는 JavaScript 라이브러리뿐만 아니라 CSS 애니메이션 및 자체 내장 Smil Animation 기능과 상호 작용할 수 있습니다.
상호 작용 (차트, 그래픽, 인포 그래픽,지도)

SVG는 사용자 작업 또는 기타 이벤트를 기반으로 데이터를 플롯하고 데이터를 동적으로 업데이트하는 데 사용될 수 있습니다. 대화식 SVG 인포 그래픽 및 SVG 대화식로드 트립 맵을 참조하십시오.

특수 효과
• SVG는 모양 변형 또는 유기적 끈적 인 효과를 포함하여 많은 실시간 효과를 달성하는 데 사용될 수 있습니다.

인터페이스 및 응용 프로그램 빌드

SVG를 사용하면 HTML5, 웹 기반 애플리케이션 및 RIA (Rich Internet Applications)와 통합 할 수있는 복잡한 인터페이스 구성 요소를 만들 수 있습니다.

요약

이제 SVG가 무엇인지, 왜 웹에 좋은지 알 수 있습니다. 다음으로 SVG와 함께 CSS를 사용하는 다양한 방법에 대한 Craig의 기사와 웹 페이지에 SVG에 포함 및 작동하는 방법에 대한 기사를 확인하는 것이 좋습니다. 또는 더 깊이 파고 들으려면 Chris Coyier의 Tractical SVG를 확인하십시오.

• (다음은 복제를 피하기 위해 원본 텍스트에 따라 다시 작성 및 간소화 된 FAQ 부분입니다) SVG (FAQ) 에 대한 질문이 자주 묻습니다

  • JPEG 또는 PNG와 같은 다른 이미지 형식에 비해 SVG의 장점은 무엇입니까? SVG는 해상도의 장점, 일반적으로 더 작은 파일 및 CSS 및 JavaScript를 통한 작동의 장점이 있습니다.

  SVG 파일을 애니메이션 할 수 있습니까? 예, Smil, CSS 및 JavaScript의 세 가지 애니메이션 방법을 지원합니다.

  • SVG 이미지를 만드는 방법은 무엇입니까? Adobe Illustrator 또는 Inkscape와 같은 벡터 그래픽 편집기를 사용하거나 SVG 코드를 직접 작성할 수 있습니다.

  SVG 파일은 모든 웹 브라우저와 호환됩니까? 모든 현대식 브라우저와 호환되지만 이전 버전의 IE는이를 지원하지 않을 수 있습니다.

  • SVG 이미지를 인쇄에 사용할 수 있습니까? 예, 그러나 모든 인쇄 상점이 지원하는 것은 아닙니다.

  • 더 나은 성능을 위해 SVG 파일을 최적화하는 방법은 무엇입니까? 는 SVG 코드를 줄이고 모양을 단순화 할 수 있습니다.

    SVG 파일이 하이퍼 링크를 포함 할 수 있습니까?

    예.

  • 검색 엔진 SVG 이미지를 검색 할 수 있습니까? 예, 그러나 적절한 대체 텍스트가 필요합니다.

    SVG 파일에 비트 맵 이미지가 포함되어 있습니까? 예, 그러나 파일 크기가 증가합니다.

  • SVG 이미지를 이메일로 사용할 수 있습니까? 이메일 클라이언트가 SVG를 지원하지 않기 때문에 권장되지 않습니다.

위 내용은 SVG는 무엇입니까? SVG 파일에 대한 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!