WordPress에서 SVG 파일 사용

게시 됨: 2020-11-18

웹 사이트에서 정기적으로 작업하는 경우 SVG 파일을 접하고 WordPress 웹 사이트에서 SVG 파일을 사용하려고 시도했을 수 있습니다. 일반적으로 WordPress에서 SVG 파일을 사용하는 것은 까다로울 수 있기 때문에 우리는 '시도'라고 말합니다! 이 기사에서는 SVG 파일이 정확히 무엇인지, 왜 이 파일을 사용하고 싶은지, 지금 WordPress 웹사이트에서 SVG 파일을 구현하는 방법을 살펴볼 것입니다.

시작하자!

SVG 파일이란 무엇입니까?

SVG는 'Scalable Vector Graphics'의 약자입니다. 이러한 유형의 이미지 파일은 픽셀을 기반으로 하는 JPEG, PNG 및 GIF와 같은 보다 일반적인 이미지 형식과 다릅니다. 반면 SVG 이미지는 벡터를 사용하여 수학적으로 그려지며 '벡터 그래픽'이라는 이미지 그룹에 속합니다.

이미지가 거칠거나 픽셀화되어 있는 웹사이트를 본 적이 있을 것입니다. 또는 JPEG 파일을 확대하려고 시도했는데(예를 들어) 확대하면 할수록 이미지가 거칠어지는 것을 알 수 있습니다. 이 문제를 해결할 수 있는 유일한 방법은 a) 축소하거나 b) 작업할 이미지의 고해상도 버전을 찾는 것뿐이므로 매우 실망스러울 수 있습니다.

다른 벡터 기반 그래픽과 공통된 SVG 파일은 이미지의 각 부분이 이미지 모양을 정의하는 2차원 맵을 사용하여 생성되기 때문에 이러한 '픽셀화' 문제를 겪지 않습니다. 이 때문에 SVG 파일을 무한정 확장할 수 있으며 항상 선명하고 선명하게 보입니다.

이것은 이미지를 보기 위해 어떤 해상도 화면을 사용하든 상관없이 웹사이트에 이상적입니다. 항상 좋게 보일 것입니다.

해상도 손실 없이 확장할 수 있는 이 기능은 이미지용 SVG 파일이 웹사이트에서 점점 더 많이 사용되는 이유 중 하나입니다. 웹사이트에서 로고를 SVG 파일로 업로드하고 웹사이트의 다른 많은 그래픽도 SVG 형식으로 추가되고 있는 것을 종종 볼 수 있습니다. 그리고 SVG 파일은 XML 언어를 사용하여 코딩되기 때문에 기술적으로 텍스트 편집기를 사용하여 편집할 수 있고 검색 엔진에서 쉽게 색인을 생성할 수 있습니다.

좋아하는 것은 많지만 단점이 있습니까?

SVG 파일 및 WordPress

SVG 파일에는 보안이라는 한 가지 주요 약점이 있습니다. SVG 파일은 설계상 실제로 안전하지 않으므로 WordPress에서 '안전하지 않은' 것으로 처리됩니다. 왜 이런 걸까요?

SVG 파일은 실제로 이미지 형식이 아닌 문서 형식으로 저장됩니다. 이 때문에 파일에 JavaScript를 포함하는 것이 기술적으로 가능합니다. 이 JavaScript는 최종 사용자의 브라우저에서 실행할 수 있습니다. JavaScript가 본질적으로 악의적이라면 분명히 나쁜 소식입니다.

SVG 취약점도 더 있습니다. 브라우저가 벡터 그래픽을 표시하기 위해 XML 마크업을 구문 분석해야 한다는 사실은 무단 사용자 날짜에 대한 액세스 권한 획득, 무차별 대입 공격 또는 크로스 스크립팅 공격 트리거와 같은 악의적인 사용에 취약합니다.

Pressidium으로 웹사이트 호스팅

60일 환불 보장

계획 보기

좀 더 산문적인 관점에서 보면, WordPress의 모든 사용자가 미디어 라이브러리에 액세스할 수 있다는 사실은 SVG 파일이 제기할 수 있는 위험을 모르는 누군가가 안전하지 않은 SVG 파일을 웹사이트에 업로드할 수 있는 위험을 높입니다.

이러한 문제 때문에 WordPress는 기본적으로 SVG 파일 업로드를 허용하지 않습니다. 서버가 SVG 파일을 허용하도록 구성되지 않은 경우 SVG 파일을 WordPress 미디어 라이브러리에 업로드하려고 시도한 후 아래 메시지를 보았을 수 있습니다.

svg 파일 워드 프레스

WordPress에서 SVG 파일을 사용하는 방법

SVG 파일과 WordPress는 완벽하게 호환됩니다. 기본적으로 SVG 파일을 업로드할 수 없는 유일한 진짜 이유는 이러한 유형의 파일을 둘러싼 보안 문제 때문입니다.

따라서 SVG 파일 사용의 보안 영향을 알고 있고 WordPress 웹 사이트에 악성 코드가 업로드되지 않도록 적절한 검사를 수행하는 한 WordPress 웹 사이트에서 SVG 파일을 자유롭게 사용할 수 있습니다.

SVG 파일 삭제

논의한 바와 같이 웹사이트에 업로드되는 SVG 파일에 악성 코드가 포함되어 있지 않은지 확인하는 것이 중요합니다. 이렇게 하려면 SVG 파일을 먼저 '삭제'해야 합니다. 이를 수행하는 가장 쉬운 방법은 WordPress 웹 사이트에서 SVG 플러그인을 사용하는 것입니다(자세한 내용은 다음에 설명). 그러나 수동으로 수행하려는 경우 WordPress 개발자 Darryll Doyle에서 제공하는 SVG Santizer Test와 같은 온라인 Sanitizer를 사용할 수 있습니다. .

SVG 파일 콘텐츠를 온라인 Santitizer에 업로드하면 코드를 통해 실행되고 사용하기에 좋은 '정리된' 버전이 만들어집니다.

이제 코드가 준비되면 코드 조각을 통해 WordPress에 직접 삽입할 수 있습니다.

실제로 플러그인을 사용하여 SVG 파일을 처리하는 것이 더 쉽다는 것을 알게 될 것입니다. 특히 많은 파일을 사용하려는 경우에는 더욱 그렇습니다. 다행히 몇 가지 훌륭한 옵션을 사용할 수 있습니다.

안전한 SVG

워드프레스용 svg 플러그인

Safe SVG는 Darryll Doyle(위에 링크된 SVG Sanitizer 웹사이트도 만든 사람)이 개발한 플러그인입니다. 'SVG 업로드를 허용하는 가장 좋은 방법'으로 설명된 이 플러그인은 a) SVG 파일을 허용하도록 WordPress를 구성하고 b) 업로드 시 SVG 파일을 삭제하여 안전한 사용을 보장하는 투인원 수준의 기능을 제공합니다.

플러그인이 설치되고 활성화되면 WordPress 웹사이트에서 사용할 SVG 파일을 바로 업로드할 수 있습니다. 언급한 바와 같이 이러한 파일은 미디어 라이브러리에 추가되기 전에 삭제되므로 부주의하게 웹사이트를 맬웨어에 감염시킬 위험이 없습니다.

업로드에 대한 이미지 최적화 및 사용자 제한과 관련된 몇 가지 추가 옵션을 제공하는 유료 버전의 플러그인도 있습니다.

SVG 지원

워드프레스용 svg 플러그인

Safe SVG와 마찬가지로 SVG 지원을 사용하면 SVG 파일을 미디어 라이브러리에 쉽고 안전하게 업로드하고 다른 이미지처럼 사용할 수 있습니다.

설치/활성화하고 관리자 메뉴에서 설정->SVG 지원으로 이동하면 관리자에게만 업로드를 제한하고 고급 모드와 일부 개방형 모드를 활성화하여 SVG 파일의 스타일을 향상시킬 수 있는 설정을 찾을 수 있습니다. SVG 파일에 애니메이션을 적용하고 최적화하기 위한 소스 도구.

코드 조각

플러그인을 사용하지 않고 SVG 지원을 활성화하려면 활성 테마의 functions.php 파일을 편집하면 됩니다. 즐겨 사용하는 텍스트 편집기를 사용하여 파일을 열고 다음 코드를 추가합니다.

 //add SVG to allowed file uploads function add_file_types_to_uploads($file_types){ $new_filetypes = array(); $new_filetypes['svg'] = 'image/svg+xml'; $file_types = array_merge($file_types, $new_filetypes ); return $file_types; } add_action('upload_mimes', 'add_file_types_to_uploads');

이 작업이 완료되면 SVG 파일을 미디어 라이브러리에 업로드할 수 있습니다. SVG 파일을 둘러싼 보안 문제를 기억하고 먼저 파일을 삭제해야 합니다.

SVG 및 CSS

SVG 파일을 웹사이트에서 로고로 사용하면 <img> 태그로 바로 적용됩니다.

CSS를 통해 로고 파일의 크기를 변경하면 이미지가 필요한 만큼 커질 수 있는 방법을 볼 수 있습니다. 물론 아래 데모에서 크기를 과장했지만(이렇게 큰 로그를 원할 것 같지는 않습니다!) 아이디어는 알 수 있습니다.

SVG 파일을 사용할 수 있는 것은 로고만이 아닙니다. 예를 들어 SVG 파일을 웹사이트 바닥글의 배경 이미지로 사용할 수 있습니다. 이를 달성하는 데 사용할 수 있는 일부 데모 코드가 아래에 나와 있습니다(물론 이미지에 대한 도메인과 경로를 변경하는 것을 잊지 마십시오).

 footer { background: url(http://YOURDOMAIN.com/wp-content/uploads/PATH-TO-YOUR-SVG/FILENAME.svg) no-repeat right; background-size: 240px; }

SVG 파일의 흥미로운 점은 이미지가 얼마나 크든 작든 상관없이 항상 선명하고 선명하게 보입니다.

SVG 파일에 대한 브라우저 지원은 요즘 매우 보편적입니다. 한 가지 주목할만한 예외는 Internet Explorer 8이지만 현재 전 세계 사용자의 0.3%만이 이것을 실행하므로 큰 문제가 되지 않을 수 있습니다.

웹사이트에서 CSS를 통해 SVG 파일을 사용하기 위한 올바른 코드를 생성하는 데 어려움을 겪고 있다면 SVG용 무료 URL 인코더를 확인하십시오. 훌륭한 도구이며 최소한의 노력으로 SVG 코드를 CSS 지원으로 쉽게 변환할 수 있습니다.

결론

SVG는 웹사이트의 그래픽이 어떤 화면에서 표시되든 선명하고 멋지게 보이도록 하려는 경우에 훌륭한 솔루션입니다. SVG 플러그인을 사용할 때 WordPress 설치에서 활성화하는 것은 간단하며 모든 화면 크기에서 하나의 이미지를 사용할 수 있으므로 반응형 웹 사이트를 디자인할 때 작업 속도를 정말 높일 수 있습니다.

SVG 파일의 유일한 단점은 실제로 발생하는 보안 위험입니다. 즉, 이들을 살균하는 플러그인을 사용하면 위험이 상당히 줄어들고 실제로 사용을 미루지 않아야 합니다.