확장 가능한 벡터 그래픽 사용의 이점
Scalable Vector Graphics 또는 SVG는 오늘날 웹 사이트 디자인에서 중요한 역할을합니다. 현재 웹 디자인 작업에서 SVG를 사용하고 있지 않다면,이 파일을 지원하지 않는 구형 브라우저에서 사용할 수있는 대체 기능과 함께 시작해야하는 몇 가지 이유가 있습니다.
해결
SVG의 가장 큰 장점은 해결책 독립성입니다. SVG 파일은 픽셀 기반 래스터 이미지 대신 벡터 그래픽이므로 이미지 품질을 잃지 않고 크기를 조정할 수 있습니다. 이는 특히 보기 좋고 다양한 화면 크기 및 장치에서 잘 작동 해야하는 반응 형 웹 사이트를 만들 때 특히 유용 합니다 .
SVG 파일은 반응 형 웹 사이트의 변화하는 크기와 레이아웃 요구를 수용 할 수 있도록 확장 또는 축소 할 수 있으며, 품질 저하가 발생한 그래픽에 대해 걱정할 필요가 없습니다.
파일 크기
반응 형 웹 사이트 에서 래스터 이미지 (JPG, PNG, GIF)를 사용하는 데 따르는 문제 중 하나는 해당 이미지의 파일 크기입니다. 래스터 이미지는 벡터가 수행하는 방식으로 확장되지 않기 때문에 픽셀 기반 이미지를 표시 할 가장 큰 크기로 전달해야합니다. 항상 이미지를 작게 유지하고 품질을 유지할 수 있기 때문에 이미지를 더 크게 만드는 것은 사실이 아닙니다. 최종 결과는 사람의 화면에 표시되는 것보다 훨씬 큰 이미지가있는 경우가 많아 불필요하게 매우 큰 파일을 다운로드해야하는 경우입니다.
SVG는 이러한 문제를 해결합니다. 벡터 그래픽은 확장 가능하기 때문에 표시해야 할 이미지의 크기에 관계없이 매우 작은 파일 크기를 가질 수 있습니다. 이것은 궁극적으로 사이트의 전반적인 성능과 다운로드 속도에 긍정적 인 영향을 미칩니다.
CSS 스타일링
SVG 코드는 페이지의 HTML에 직접 추가 할 수도 있습니다. 이것은 "인라인 SVG"라고합니다. 인라인 SVG를 사용하면 그래픽이 브라우저에서 코드에 따라 실제로 그려지기 때문에 이미지 파일을 가져 오기 위해 HTTP 요청을 할 필요가 없습니다. 또 다른 이점은 CSS를 사용하여 인라인 SVG 스타일을 지정할 수 있다는 것입니다.
SVG 아이콘의 색상을 변경해야합니까? 일종의 편집 소프트웨어에서 해당 이미지를 열고 파일을 다시 내보내고 업로드해야하는 대신 몇 줄의 CSS로 SVG 파일을 간단하게 변경할 수 있습니다.
SVG 그래픽에서 다른 CSS 스타일을 사용하여 호버 상태 또는 특정 디자인 요구에 맞게 변경할 수 있습니다. 그래픽을 움직여 페이지에 움직임과 상호 작용을 추가 할 수도 있습니다.
애니메이션
인라인 SVG 파일은 CSS로 스타일을 지정할 수 있으므로 CSS 애니메이션도 사용할 수 있습니다. CSS 변형과 전환은 SVG 파일에 생명을 추가하는 두 가지 쉬운 방법입니다. 현재 웹 사이트에서 Flash 를 사용하면서 발생하는 단점을 극복하지 않고도 풍부한 Flash와 유사한 경험을 한 페이지에서 얻을 수 있습니다.
SVG의 용도
SVG만큼 강력하기 때문에이 그래픽은 웹 사이트에서 사용하는 다른 모든 이미지 형식을 대체 할 수 없습니다. 깊은 색상이 필요한 사진은 여전히 JPG 또는 PNG 파일이어야하지만 아이콘과 같은 간단한 이미지는 SVG로 실행하기에 완벽하게 적합합니다.
SVG는 회사 로고나 그래프, 차트와 같은보다 복잡한 일러스트레이션에도 적합합니다. 모든 그래픽은 확장 성이 뛰어나고 CSS로 스타일을 지정할 수 있으며이 기사에 나열된 다른 이점을 활용할 수 있습니다.
이전 브라우저 지원
SVG에 대한 현재 지원은 최신 웹 브라우저에서 매우 유용합니다. 이러한 그래픽을 지원하지 않는 유일한 브라우저는 이전 버전의 Internet Explorer (버전 8 이하)와 몇 가지 이전 버전의 Android입니다. 결국 브라우징 인구의 극히 일부만이 여전히이 브라우저를 사용하며 그 수가 계속 줄어들고 있습니다. 즉, SVG는 오늘날 웹 사이트에서 매우 안전하게 사용할 수 있습니다.
SVG에 대한 대체 기능을 제공하려는 경우 Filament Group의 Grumpicon과 같은 도구를 사용할 수 있습니다. 이 리소스는 SVG 이미지 파일을 가져와 이전 브라우저의 PNG 폴백을 만듭니다.
제레미 지라드 편집 : 1/27/17