SVG 서포트

미디어 라이브러리에 SVG 파일을 안전하게 업로드하고 다른 이미지처럼 사용할 수 있습니다. 이제 옵션으로 살균 처리도 가능합니다!

하지만 SVG 서포트에는 더 많은 기능이 있습니다!!! 자세히 알아보려면 계속 읽어보세요.

워드프레스 사이트에서 SVG 이미지를 사용할 때 CSS를 사용하여 SVG 내의 요소에 스타일을 지정하기 어려울 수 있습니다. 이제 쉽게 할 수 있습니다!

최신 웹 디자인에서는 품질 저하 없이 모든 시각적 크기에 맞게 확장 가능한 작은 파일 크기의 이미지를 삽입할 수 있는 SVG(확장 가능한 벡터 그래픽)가 보편화되고 있습니다.

이 플러그인은 이름처럼 SVG 서포트 기능을 제공할 뿐만 아니라 간단한 IMG 태그를 사용하여 전체 SVG 파일의 코드를 쉽게 임베드할 수 있습니다.

IMG 요소(또는 외부 컨테이너)에 "style-svg" 클래스를 추가하면 이 플러그인은 대상 클래스 내부에 있는 src에 SVG가 포함된 모든 IMG 요소를 전체 SVG 코드로 동적으로 대체하여 인라인으로 렌더링합니다.

이 태그의 주된 목적은 SVG 요소의 스타일링과 애니메이션을 허용하는 것입니다. 일반적으로 embed, object 또는 img 태그만 사용하는 경우 스타일링 옵션이 제한됩니다.

기능

• 미디어 라이브러리에 대한 SVG 서포트
• SVG 업로드 살균
• SVG 파일 축소
• SVG 코드 인라인
• CSS를 사용하여 직접 SVG 요소 스타일 지정
• CSS 및 JS를 사용하여 SVG 요소에 애니메이션 적용
• 지침이 포함된 매우 쉬운 설정 페이지
• SVG 업로드 기능을 관리자로만 제한
• 사용자 정의 대상 클래스 설정(2.4부터 외부 요소에 사용 가능)
• 매우 간편한 사용 – 복잡한 SVG 파일 사용 간소화

사용법

먼저 SVG 서포트(이 플러그인)을 설치하고 활성화합니다.

활성화되면 다른 파일처럼 미디어 라이브러리에 SVG 이미지를 간단히 업로드할 수 있습니다.

관리자는 관리자 설정 페이지 ‘설정; SVG 서포트’으로 이동하여 관리자만 SVG 파일 업로드를 제한할 수 있습니다.

이미지로 사용할 SVG 파일만 업로드해야 하는 경우에는 ‘고급 모드’를 활성화할 필요가 없습니다. 이 기능을 비활성화하면 프론트엔드 스크립트가 대기열에 추가되지 않고 불필요한 설정이 숨겨집니다.

고급 사용 시: “설정 &; SVG 서포트”에서 “고급 모드”를 활성화합니다.

이제 SVG 업로드의 축소 및/또는 축소를 활성화하고, 타겟팅할 사용자 지정 CSS 클래스를 정의하고, 다른 설정을 조정할 수 있습니다.

고급 모드를 활성화하면 이 플러그인이 실제 SVG 코드로 대체할 IMG 태그에 "style-svg" 클래스(또는 정의한 사용자 정의 클래스)를 추가(텍스트 보기에서)하여 표준 이미지와 마찬가지로 SVG 이미지를 임베드할 수 있습니다.

예시:

또는

이제 전체 IMG 태그 요소가 SVG의 실제 코드로 동적으로 대체되어 내부 콘텐츠를 타겟팅할 수 있게 됩니다.. 이렇게 하면 CSS와 JS를 사용하여 SVG 내의 요소를 타깃팅할 수 있습니다.

IMG 태그에서 다른 모든 속성은 어쨌든 사라지므로 제거할 수 있습니다.

또한 이제 대상 클래스를 IMG 자체에 직접 추가할 수 없는 경우 외부 요소에 추가할 수 있습니다. 이 플러그인은 인라인 코드로 대체할 SVG를 찾는 하위 요소를 탐색합니다.

글이나 페이지에 SVG를 삽입할 때 자동으로 IMG 태그에 클래스를 추가하는 설정이 있어 불필요한 태그도 제거할 수 있습니다.

2.3.11부터는 체크박스 하나만으로 사이트 전체의 모든 SVG 파일이 인라인으로 렌더링되도록 강제할 수 있습니다(주의해서 사용하세요). 또한 이제 JS 파일의 축소 버전 또는 확장 버전을 사용할지 여부를 선택할 수 있습니다.

추천 이미지: 글/페이지가 SVG와 함께 추천 이미지로 저장된 경우 추천 이미지 메타 상자에 확인란이 표시되어 인라인으로 렌더링할 수 있습니다(고급 모드가 활성화된 경우에만 해당).

참고: SVG가 표시되지 않는다면 높이와 너비가 0으로 표시되고 있을 가능성이 높습니다. 이 경우 SVG 파일이 올바르게 표시되도록 CSS에서 높이와 너비를 직접 설정해야 합니다.

문제가 있으시면 지원 탭을 이용해 주시면 최선을 다해 빠르게 답변해 드리겠습니다.

테스트 사이트 스핀업

클릭 한 번으로 완전 무료 테스트 사이트를 실행하여 TasteWP를 사용하여 SVG 지원을 테스트할 수 있습니다! 가입도, 카드도, 아무것도 필요 없습니다! 얼마나 멋진가요? 한번 사용해 보세요: 여기를 클릭하면 몇 초 안에 테스트 사이트를 실행할 수 있습니다

보안

모든 파일 업로드를 허용하는 것과 마찬가지로 잠재적인 위험이 있습니다. 그래서 도움이 되는 몇 가지 기능을 추가했습니다!

• 업로드 시 SVG 파일에서 악성 코드를 제거하는 데 도움이 되는 살균 기능(선택 사항).
• 업로드를 관리자만 할 수 있도록 제한합니다.

사용자가 신뢰할 수 있는 경우에만 SVG 파일을 업로드할 수 있도록 허용하세요. 설정 페이지에서 SVG 사용을 관리자로만 제한할 수 있는 옵션과 업로드된 모든 SVG 파일을 정리하려고 시도하는 SVG 살균 기능을 활성화할 수 있는 옵션이 있습니다.

기본적으로 미디어 라이브러리 액세스 권한 또는 upload_files 기능이 있는 모든 사용자(관리자, 작성자 및 편집자)는 SVG 파일을 업로드할 수 있습니다. SVG 파일은 실제로 XML이므로 업로드 권한이 있는 사람을 주의하지 않으면 누군가 악성 코드를 삽입할 수 있다는 점에 유의하세요.

피드백

제안 및 피드백 – SVG 서포트팀을 이용해 주셔서 감사합니다!

트위터에서 @SVGSupport 팔로우하기 @benbodhi 트위터 팔로우하기

주: 이 플러그인이 마음에 드셨기를 바랍니다! 잠시 시간을 내어 평가해 주세요.

번역

여기에서 번역을 기여할 수 있습니다. 워드프레스 번역이 처음이신가요? 번역자 핸드북을 읽고 시작하세요.