SVG 파일이란 무엇입니까(그리고 SVG를 WordPress에 어떻게 업로드합니까?)

SVG 파일이 개발자와 디자이너 사이에서 특히 인기가 있는 주된 이유는 SVG 파일이 확장 가능한 이미지 형식이고 일반적으로 파일 크기가 더 작고(때로는 꽤 많이) 레티나 화면에서 픽셀화되지 않기 때문입니다. 기본적으로 WordPress는 주로 보안 문제로 인해 SVG 파일 형식을 업로드하는 것을 허용하지 않습니다.

오늘 우리는 SVG가 무엇인지, 어떻게 유용할 수 있으며, WordPress SVG 지원을 안전하게 활성화할 수 있는 방법에 대해 알아볼 것입니다. 또한 브라우저 지원과 벡터 이미지 형식으로 전환하려는 경우 몇 가지 주의 사항에 대해서도 설명합니다.

언젠가는 SVG를 WordPress 코어의 일부로 포함할 수 있기를 바라지만 아직 거기까지는 아닙니다.

SVG 파일이란 무엇입니까?

SVG(Scalable Vector Graphics)는 웹사이트와 브랜드에서 웹사이트에 로고와 아이콘을 표시하기 위해 일반적으로 사용하는 XML 기반 벡터 이미지 입니다. Wikipedia는 SVG를 다음과 같이 정의합니다.

SVG(확장 가능한 벡터 그래픽)는 상호 작용 및 애니메이션을 지원하는 2차원 그래픽용 XML 기반 벡터 이미지 형식입니다. SVG 사양은 1999년부터 W3C(World Wide Web Consortium)에서 개발한 공개 표준입니다.

코드나 텍스트 편집기를 사용하여 SVG 파일을 조작할 수도 있습니다. SVG는 현재 전체 웹사이트의 33%에서 사용되고 있으며 아래에서 볼 수 있듯이 채택률이 빠르게 증가하고 있습니다. Google, Reddit, Dropbox, ESPN과 같은 인기 사이트와 Kinsta의 자체 웹사이트에서도 SVG를 사용합니다.

SVG 파일 브라우저 지원

SVG 파일은 현재 모바일 브라우저를 포함한 모든 주요 브라우저에서 지원됩니다. 직면할 수 있는 유일한 문제는 여전히 IE8에 대한 지원이 필요한 경우이며, 그렇지 않기를 바랍니다. IE8은 브라우저 시장 점유율이 약 0.36%에 불과하며 더 이상 지원되지 않습니다. 다음은 개발자가 IE8, IE9 및 IE10 지원을 중단해야 하는 이유에 대한 Lubos의 훌륭한 기사입니다. 비즈니스 관점에서 이것이 항상 가능한 것은 아니지만 그는 몇 가지 좋은 점을 제시합니다. 어떤 절박한 이유로 여전히 IE8 지원이 필요한 경우 SVG 이미지에 대한 대체 이미지(PNG 또는 JPG)를 정의할 수 있지만 오늘은 이에 대해 다루지 않겠습니다. 다음은 지원되는 브라우저 목록입니다.

• Internet Explorer 9, 10, 11+ 및 Edge
• 파이어폭스 2+
• 크롬 4+
• 사파리 3.1+
• 오페라 10+
• iOS 사파리 3.2+
• 안드로이드 브라우저 3+
• Android 86+용 Firefox
• 오페라 미니(전체)
• 오페라 모바일 12+
• Android 89+용 크롬
• Android 12.12+용 UC 브라우저
• 삼성 인터넷 4+
• QQ 브라우저 10.4
• 바이두 브라우저 7.12
• 카이OS 브라우저 2.5

SVG 파일 사용의 이점

SVG 파일은 벡터 형식이므로 브라우저와 사진 편집 도구 모두에서 자동으로 확장 할 수 있습니다. 이것은 그래픽 디자이너와 웹 디자이너 모두에게 유용합니다. 일반적으로 Photoshop, Sketch 또는 Paint와 같은 도구에서 PNG 또는 JPG를 편집하려고 할 때 픽셀화 없이는 업스케일링할 수 없습니다. SVG를 사용하면 SVG를 무한대로 확장할 수 있으며 매번 픽셀 완벽한(또는 완벽한 벡터라고 해야 할까요)로 보일 것입니다. 이것이 망막 스크린에 사용하기에 좋은 이미지 형식인 이유입니다.

Google은 SEO 목적으로 좋은 소식인 SVG를 색인화 합니다. 파일 자체에 연결된 SVG 콘텐츠는 색인이 생성되어 Google 이미지 검색에 표시됩니다. 고급 이미지 검색을 통해 Kinsta에서 사용하는 SVG 일러스트레이션으로 이를 직접 확인할 수 있습니다. 참고: 인라인 SVG 또는 코드만으로 구성된 SVG는 일반적으로 인덱싱되지 않습니다.

SVG는 전통적으로(항상 그런 것은 아님) 파일 크기가 PNG 또는 JPG보다 작습니다 . SVG를 사용하면 전체 페이지 크기를 줄일 수 있으므로 실제로 WordPress 사이트의 속도를 높일 수 있습니다. Genki는 SVG와 PNG, JPEG의 크기를 비교하는 훌륭한 기사를 작성했으며 여기에 JPG와 JPEG 비교가 있습니다. 다음은 세 가지 다른 이미지 유형을 비교한 그의 테스트에서 얻은 몇 가지 내용입니다.

JPG(최적화된 크기: 81.4KB)

PNG(최적화된 크기: 85.1KB)

SVG(최적화된 크기: 6.1KB)

위에서 볼 수 있듯이 SVG는 JPG에 비해 파일 크기가 92.51% 감소한 것입니다. 그리고 PNG와 비교할 때 92.83% . 꽤 인상적인 파일 크기 차이입니다. 그러나 한 가지 주의할 점은 그가 더 자세한 이미지를 테스트하면서 SVG가 결국 JPG 또는 PNG보다 크기가 더 커졌다는 것입니다.

이것이 많은 사이트에서 로고, 아이콘 등과 같은 덜 상세한 이미지에 SVG를 사용하는 이유입니다. 파일 크기가 크게 줄어들기 때문입니다. 그러나 블로그 게시물 "추천 이미지"와 같이 세부 정보가 더 많은 이미지의 경우 PNG 또는 JPG를 계속 사용하고 싶지만 여전히 최적화할 수 있습니다. 많은 웹 사이트는 두 파일 형식을 함께 사용하는 하이브리드 접근 방식을 사용합니다.

또한 Facebook 및 Twitter와 같은 소셜 미디어 네트워크는 공유를 위해 SVG를 지원하지 않습니다. 따라서 추천 이미지에 SVG를 사용한 경우 Yoast SEO 기능을 활용하고 OG 및 메타 태그에 대해 PNG 또는 JPG를 업로드해야 합니다. 그렇지 않으면 추천 이미지가 전혀 표시되지 않을 위험이 있습니다.

SVG 보안이 중요한 이유

SVG가 아직 WordPress 코어의 일부가 아닌 이유는 해결해야 할 보안 문제가 있기 때문입니다. 2013년에 시작된 WordPress 코어(#24251)에서 SVG에 대한 활발한 토론을 볼 수 있습니다. SVG는 XML 파일이며, 그 자체로 일반 이미지 형식이 영향을 받지 않는 다양한 취약점에 노출됩니다. 여기에는 XML XXE(외부 엔터티 공격), 폭탄 중첩 엔터티 및 XSS 공격이 포함됩니다.

Mario Heiderich는 SVG 파일을 사용한 활성 콘텐츠 주입으로 인한 보안 위험에 대한 통찰력 있는 프레젠테이션을 게시했습니다. 주어진 한 가지 예는 JavaScript가 SVG에 포함되어 실제로 Skype에서 Mario를 호출할 수 있다는 것입니다. 그것은 일종의 무서운 것입니다! WordPress 보안 플러그인의 작성자인 SecuPress는 SVG를 WordPress에 추가할 때 주의할 점과 올바른 방식으로 수행하는 것의 중요성에 대해서도 언급했습니다.

리포지토리의 많은 SVG 플러그인은 다음 코드를 활용하고 있습니다. 이 코드는 MIME 유형이 SVG를 WordPress 미디어 라이브러리에 업로드할 수 있도록 하기만 하면 됩니다. 이것은 안전한 방법이 아닙니다! 따라서 이동하지 말고 첫 번째 무료 SVG 플러그인을 다운로드 하거나 이 코드를 복사하여 붙여넣고 잘 되었다고 생각하세요.

 function cc_mime_types($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'cc_mime_types');

해결책은 SVG를 삭제해야 한다는 것 입니다. 정리는 기본적으로 보안 문제(예: 코드 삽입), 코드 충돌 및 오류를 피하기 위해 코드 또는 입력을 정리하는 것입니다. 이것은 데이터 인코딩, 문자열 필터링 및 유효성 검사 등과 같은 작업을 수반할 수 있습니다. Daryll Doyle의 SVG-Sanitizer 라이브러리가 작동하는 곳입니다. Daryll Doyle은 이를 "PHP에서 적절한 SVG Sanitizer를 구축하려는 시도"라고 부릅니다. SVG 새니타이저의 데모를 확인하여 작동하는지 확인하십시오.

사이트에서 SVG 업로드에 액세스할 수 있는 사람을 고려하는 것도 중요합니다. 예를 들어 다중 작성자 사이트에 있는 경우 다른 사람이 업로드하여 사이트가 노출될 수 있는 SVG의 종류를 알 수 없습니다. SVG 업로드를 관리자와 일부 보안 문제를 이해하는 사람으로 제한 하는 것이 좋습니다.

WordPress SVG 지원을 안전하게 활성화하는 방법

Daryll은 SVG 이미지를 WordPress 미디어 라이브러리에 업로드할 때 SVG-Sanitizer 라이브러리를 활용 하는 플러그인인 WP SVG(Safe SVG라고도 함)를 개발했습니다. 플러그인을 사용하면 미디어 라이브러리에서 일반 이미지와 같은 SVG를 볼 수도 있습니다.

Safe SVG는 WordPress 저장소에서 무료로 다운로드하거나 WordPress 대시보드의 "새 항목 추가" 플러그인에서 검색하여 다운로드할 수 있습니다. 몇 번의 간단한 클릭으로 일어나서 이동할 수 있습니다.

wpsvg.com에서 사용할 수 있는 프리미엄 버전도 있습니다. 이 버전을 사용하면 특정 사용자가 SVG 및 추가 SVG 최적화를 업로드하지 못하도록 제한할 수 있습니다. 아래 예에서는 단순히 무료 버전을 사용할 것입니다.

대체 플러그인으로 SVG 지원을 확인하고 싶을 수 있습니다.

SVG 파일을 업로드하기 전에 이미지와 약간 다르게 동작한다는 점을 이해하는 것이 중요합니다. 사진 편집 도구에서 SVG를 내보낼 때 텍스트를 곡선으로 내보내고(또는 윤곽선 만들기) 그렇지 않으면 다양한 브라우저에서 약간 다르게 렌더링될 수 있습니다.

플러그인을 설치한 후에는 설정이 없으며 업로드 시 SVG를 삭제하기만 하면 됩니다. 아래 테스트 사이트에서 로고를 SVG 파일로 대체한 것을 볼 수 있습니다. 미디어 라이브러리에서 정상적으로 볼 수 있습니다.

이것은 또한 테마의 제어판을 사용하여 WordPress 헤더의 로고를 SVG 파일로 변경할 수 있게 해주었습니다. 아래에서 실제로 .svg 파일을 제공하는 것을 볼 수 있습니다. 이제 망막 화면에서 아름답게 보입니다.

한 가지 추가 조정이 필요했습니다. IE9-11 데스크톱 및 모바일에서는 아직 SVG 파일의 크기를 적절하게 조정하지 않습니다. 높이와 너비를 추가하면 이 문제가 해결됩니다. 이것은 테마마다 다를 수 있지만 테스트 사이트에서는 단순히 header.php 파일을 수정하고 이러한 사용자 정의 치수를 추가했습니다. 일부 WordPress 테마는 CSS를 사용하여 성능상의 이유로 좋지 않은 크기 조정을 수정하지만 이로 인해 IE 문제를 해결하기 위해 추가 코드를 추가해야 할 수 있습니다.

그리고 그게 다야! 이제 WordPress SVG 지원을 안전하게 활성화했습니다. 이 플러그인 및/또는 방법은 WordPress 코어에서 보증하거나 지원하지 않으므로 물론 사용에 따른 위험은 사용자가 감수해야 합니다. 그러나 이미 MIME 유형 스니펫만으로 SVG를 업로드하고 있었다면 반드시 이 방법으로 업로드하십시오.

또한 이전에 SVG를 사용한 적이 없는 경우 "image/svg+xml" 파일 유형에 대해 서버에서 GZIP을 활성화했는지 확인하십시오. 이렇게 하면 파일이 압축되고 가능한 한 빨리 로드됩니다. 때때로 시스템 관리자는 보다 표준적인 파일 형식만 활성화합니다. 참고: GZIP은 이미 SVG용으로 모든 Kinsta 서버에서 활성화되어 있습니다.

요약

SVG는 사이트의 외관을 향상시키는 좋은 방법입니다! 매우 상세한 이미지는 SVG 형식에서 성능이 좋지 않으므로 최상의 성능을 얻으려면 SVG, PNG 및 JPG를 함께 사용하는 것이 좋습니다. SVG는 로고가 아이콘과 함께 모든 화면에서 픽셀 단위로 완벽하게 보이도록 하는 데 적합합니다.

당신의 생각은 무엇입니까? WordPress 사이트에서 SVG를 아직 사용하지 않았습니까?