'Reskinable'SVG 기호 : 만드는 방법 (.. 왜)

SVG 아이콘은 확장 성, 작은 파일 크기 및 CSS 스타일 기능 덕분에 최신 웹 디자인에 점점 더 많이 사용되므로 반응 형 웹 사이트에 이상적입니다.

SVG는 CSS를 사용하여 스타일을 지정할 수 있지만 SVG 코드가 HTML 페이지에 포함 된 경우에만 작동합니다. 이는 SVG가 포함되지 않으면 SVG의 단일 부분을 수정할 수 없음을 의미합니다. 이 기사는 SVG 이미지의 "골격"이 변경되지 않은 상태로 유지되는 "탈착식 SVG 기호"의 개념을 소개합니다. 그러나 표면 모양은 쉽게 변경 될 수 있습니다.

이 기사는 SVG의 단일 부분을 수정할 수 없다는 문제에 대한 해결책을 제안합니다. 여기에는 SVG의 각 모양에 대한 기호를 생성하는 것이 포함되며, 동일한 뷰 박스의 각 기호는 필요에 따라 각 요소에 대한 스타일을 허용하는 것이 포함됩니다.

저자는 Adobe Illustrator 및 Gulp를 사용하여 SVG 기호를 구축하는 워크 플로를 자세히 설명 하고이 방법은 모든 최신 브라우저와 호환됩니다.

파일 크기, 확장 성 및 CSS 스타일 기능 덕분에 현대 웹 페이지에서 SVG의 광범위한 사용은 2016 년에 크게 향상되었습니다.

아이콘 시스템에서 사용할 수 있지만 (자체 SVG 아이콘 구축 참조) 아이콘 글꼴이 경우에 따라 아이콘 전쟁이 바람직 할 수 있습니다 (아이콘 전쟁 : 글꼴 및 SVG 참조).

그러나 SVG는 로고 또는 그래픽 요소 (적어도 지나치게 복잡한 요소가 아님)에도 사용될 수 있으며, 자연스러운 유연성은 반응 형 웹 사이트를위한 완벽한 솔루션입니다 (Sara Soueidan의 "CSS와의 반응 형 SVG 만들기"참조).

SVG를 사용하면 CSS를 활용하여 전체 요소의 크기와 색상을 찾아 변경할 수 있지만 SVG 코드가 HTML 페이지에 포함되지 않으면 이러한 방식으로 개별 부품을 수정할 수 없습니다.

질문

더 간단한 예를 살펴 보겠습니다. 다음은 여러 색상으로 표시 해야하는 이미지입니다.

전통적으로, 우리는 다른 "스타일"을 가진 세 가지 별도의 이미지를 만듭니다. 그러나 단일 SVG 파일을 사용하고 렌더링 할 때 스타일을 유지하려면 어떻게해야합니까?

또한 브라우저 캐시를 활용하기 위해 이미지를 "SVG 기호"로 만들 수있는 방법이 있습니까?

나는 그것을 "스킨 가능한 SVG 기호"라고 부릅니다. SVG 이미지의 "골격"은 동일하지만 표면 모양은 쉽게 변경됩니다.

이상적인 솔루션은 CSS 선택기를 통해 상징적 요소에 액세스하고 몇 가지 규칙을 추가하는 것입니다 (임베디드 SVG에서 사용하는 동일한 방법).

아래의 예에서 각 삼각형에 클래스 (상단, 오른쪽, 하단 및 왼쪽)를 추가하고 이미지를 기호로 배열하고 다음과 같이 CSS를 통해 수정하려고 시도했습니다.

.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */

불행히도 현재는 아래 코드 펜 데모에서 볼 수 있듯이 Firefox에만 작동합니다. Firefox에서만 두 번째 이미지가 파란색 색조로 나타납니다 (편의를 위해 펜에 상징적 코드를 포함 시키지만 외부 SVG 파일을 사용하면 동일한 결과가 나타납니다).

코드 펜 링크 1

코드 펜 링크 2 대규모 프로젝트에서는 이러한 요소가 많이있을 수 있으며 유지 보수 문제는 중요한 요소이므로 항상 프로젝트 리소스를 더 잘 구성 할 수있는 방법을 찾고 있습니다.

내 목표는 순수한 CSS 솔루션입니다. 이전 예제는 단일 삼각형 SVG를 사용하여 다시 작성할 수 있으며 CSS를 통해 회전, 이동 및 음영 처리 할 수 ​​있습니다.

그러나 나는이 솔루션이 마음에 들지 않습니다 : 그것은 단지 문제를 바꾸고 문제를 해결하지 않는 것 같습니다. 실제 로고 구성 요소는 몇 개가 동일한 모양입니까? Sara Soueidan 은이 문제를 나보다 더 잘 설명하고 CSS 변수를 사용하는 영리한 솔루션을 제공합니다. 불행히도 CSS 변수는 여전히 실험 기술이며 Microsoft 브라우저는이를 지원하지 않습니다. 솔루션

종종 발생하는 것처럼 솔루션은 너무 간단하여 전에는 기대하지 않았기 때문에 바보 같은 느낌이들 것입니다.

몇 달 전에 새로운 매체 로고를 보았을 때 발견했습니다 (매체가 로고 코드를 변경 한 것처럼 보입니다 - 당신은 나를 믿어야합니다).

중간 로고는 각각 다른 단색으로 채워진 4 개의 "모양"으로 구성되어 있음을 알 수 있습니다. 흑백 버전은 녹색 버전과 동일합니다 (물론 색상 제외).

단일 파일의 두 버전을 소유하는 솔루션은 각 모양에 대한 기호를 단순히 구축하는 것입니다.

이 예제에 적용하고 이미지에서 각 모양에 대한 기호를 만들어 봅시다. 그들은 모두 전체 이미지와 동일한 뷰 박스 (0 0 54 54)를 공유하므로 추가 지침없이 올바른 위치에 배치됩니다. 기호 코드의 충전, 스트로크, 스타일 및 기타 속성을 사용하지 않도록주의하십시오.

이제 우리는 그것들을 단일 SVG 컨테이너로 결합 할 수 있습니다 : 각 사용 요소는 필요에 따라 스타일을 유지할 수 있으며 가장 중요한 것은 모든 현대식 브라우저와 호환됩니다. 코드 펜 링크 3

<.> 그게 다야.

우리는 이와 같은 SVG 파일을 정리해야합니다. 물론 수동으로 수행 할 수 있지만 많은 그래픽 요소를 관리해야하거나 더 많은 프로젝트에서 빠르게 편집하고 재사용 해야하는 경우 더 똑똑하고 빠른 워크 플로가 필요합니다. Adobe Illustrator와 약간의 꿀벌을 사용하여 솔루션을 찾았습니다.

SVG 기호 건축 워크 플로우 이 기술의 원리는 "자신의 SVG 아이콘 빌드 빌드"및 "일러스트 레이터 및 Icomoon을 사용하여 아이콘 글꼴 생성"에서 소개 한 것과 동일하므로 첫 번째 단계를 확인하십시오.

아래 이미지와 마찬가지로 두 가지 요소가 있다고 가정합니다. 각 요소는 특정 아트 보드로 배열됩니다 편의를 위해, 우리는 채우기 색상 (및 뇌졸중, 스트로크 크기 등)이 CSS를 통해 편집 될 것이라는 것을 알고 있지만 몇 가지 색상을 추가했습니다.

각 기호에는 아트 보드가 있어야하므로 이제 각 이미지가 각 색상의 부분만큼 많은 아트 보드로 분류해야합니다.

이것은 Illustrator에서 매우 빠르게 수행 할 수 있으며, 각 요소를 자르고, 대상 아르트 보드를 선택하고, 페이스트를 제자리에 선택하는 명령을 선택할 수 있습니다.

각 아트 보드에는 특정 이름이 있습니다. 상징적 인 ID에 사용됩니다.

이제 우리는 새로운 "파일 → 내보내기 → 화면으로 내보내기"명령을 사용하여 Artboard를 SVG로 내보낼 수 있습니다. 이것은 최신 일러스트 레이터 버전에 정말 유용한 새로운 도구입니다. 단일 명령을 사용하여 각 아르트 보드 또는 사용자 정의 리소스를 여러 형식으로 저장할 수 있습니다.

> 내보내기 패널에서 "아트 보드"를 선택하고 "SVG"를 출력 형식으로 설정하고 대상 폴더를 선택하십시오.

각 아르트 보드는 단일 SVG 파일로 내보낼 것입니다 :

이제 모든 파일을 SVG 기호로 결합하고 원치 않는 SVG 속성을 제거해야합니다.

다음 섹션은 약간 기술적이지만, 원하는 경우, 다재다능한 SVG를 생성하는 빠르고 간결한 방법을 제공합니다.

나는 itepoint에서 Gulp에 대해 글을 썼는데, Gulp 설치 및 모든 관련 매개 변수에 대해 온라인으로 많은 리소스를 찾을 수 있으므로 설치했다고 가정하고 우리가 무엇을 말하는지 알고 있습니다.

어쨌든, Gulp가 마음에 들지 않으면 다음 단계를 모두 수동으로 완료 할 수도 있습니다. Gulp 사용을 시작하기 전에 여러 번이 작업을 수행했습니다. 확실히 배우는 좋은 방법이며, 소규모 프로젝트 나 지속적인 편집 및 유지 보수가 필요하지 않은 장소에서 충분합니다.

따라서 우리는 몇 가지 SVG 파일이 있습니다. 각각 아래 예제와 같이 배열됩니다 (편의를 위해 D 속성이 단축되었습니다) : .

.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */

우리의 목표는 모든 이미지를 원치 않는 속성을 모두 제거하는 동안 모든 이미지를 단일 파일의 SVG 기호로 배열하는 것입니다.

Gulp 이외의

우리의 작업은 다른 확장이 필요합니다.

우선, Gulp-Svgstore 및 Gulp-Svgmin은 SVG 파일을 결합하고 압축하는 데 사용됩니다 Gulp-Rename은 ID 이름을 조정하고 대상 파일의 이름을 지정하는 데 사용됩니다. 이 모듈은 이전 Illustrator SVG Export 명령을 사용하려는 경우 특히 필요합니다. 나중에 다룰 것입니다.

<svg xmlns="https://www.w3.org/2000/svg">
    <symbol id="top" viewBox="0 0 54 54">
        <polygon points="54 0 0 0 27 27 54 0"></polygon>
    </symbol>
    <symbol id="right" viewBox="0 0 54 54">
        <polygon points="54 54 54 0 27 27 54 54"></polygon>
    </symbol>
    <symbol id="bottom" viewBox="0 0 54 54">
        <polygon points="0 54 54 54 27 27 0 54"></polygon>
    </symbol>
    <symbol id="left" viewBox="0 0 54 54">
        <polygon points="0 0 0 54 27 27 0 0"></polygon>
    </symbol>
</svg>

이제 우리는 gulpfile을 정리할 수 있습니다 (코드는 공개 요점으로도 얻을 수 있음) :

모듈을로드 한 후 파일에 구문 분석을 지시합니다 (SVG_FILES/*. SVG).

svgstore는 각 파일의 이름을 사용하여 Symber ID 속성을 설정합니다 (즉, umbrella.svg라는 파일은 가있는 기호가됩니다). 새 Illustrator Export를 화면 패널로 사용하는 경우 파일의 이름이 명령을 변경하지 않아도됩니다. 파일의 이름이 속한 아트 보드와 정확히 동일하기 때문입니다.
• 그러나 삽화의 기존 버전은 삽화가 파일 이름을 아트 보드 이름으로 연결하여 파일 이름을 만듭니다. 따라서 일러스트 레이터 파일 이름 접두사를 제거하려면 파일 이름을 바꿔야합니다.
이제 파일을 청소할 수 있습니다. Gulp-Svgmin은 "SVG 벡터 그래픽 파일을 최적화하기위한 NodeJS를 기반으로 한 도구"(Jake Archibald는 SVGO의 온라인 버전을 출시했는데, 이는 수동으로 파일을 예약하려면 매우 유용합니다)의 GULP 버전 "SVGO"(Jake Archibald는 매우 유용합니다)입니다.
• svgo는 많은 구성 가능한 옵션이 있습니다 (프로젝트 페이지에서 모든 것을 찾아 볼 수 있음). 그러나 몇 가지만 필요합니다 (물론 원하는대로 스크립트를 사용자 정의 할 수 있습니다).
CleanupIds : 파일 에서 모든 ID를 제거하십시오 removedocType, RemoveComments 및 RemovestyleElement : 모든 문서 유형 선언, 댓글 및

요소를 제거하십시오. removedImensions : 뷰 박스가 존재하면 모든 너비와 높이 특성이 삭제됩니다 CleanupNumericValues ​​: 값을 합리적인 정확도 수준으로 반올림 removeAttrs : 지정된 모든 속성을 제거하십시오 다음으로 파일을 svgstore로 전달하여 고유 한 파일로 결합 한 다음 이름을 바꾸고 저장하십시오.

<svg>
    <use class="top" xlink:href="#top"></use>
    <use class="right" xlink:href="#right"></use>
    <use class="bottom" xlink:href="#bottom"></use>
    <use class="left" xlink:href="#left"></use>
</svg>

몇 번 사용한 후에는 각 프로젝트에 대해 몇 분 안에 예약 할 수 있어야하며 필요한 경우 SVG 심볼 파일을 신속하게 재건 할 수 있습니다.

다음은 결과 예입니다 (이 펜에서도 편의를 위해 SVG 파일을 내장했지만 외부 파일로 안전하게 연결할 수 있습니다) : . 코드 펜 링크 4

경고가 있습니까? id="umbrella" 이 방법은 스타일의 사용 요소를 기반으로하기 때문에 폴리 플릴 (예 : SVG4EveryBody)이 삭제할 때 문제가 있습니다. 외부 상징적 링크 (모든 IE)를 지원하지 않는 브라우저에서 svg4everybody 는 모든 사용 요소를 일치하는 기호의 내용으로 대체합니다. 따라서 사용에 적용되는 모든 CSS 규칙은 적용되지 않습니다.

이것은 내부 상징적 요소 (경로, 원 등)에 맞게 CSS 선택기를 조정하여 해결할 수 있지만 약간 까다로울 수 있습니다.

아웃 보너스

이 워크 플로에는 무제한 변형이 있습니다. 스트로크, 텍스트 등을 처리 할 수 ​​있습니다.

탐색 할 가치가있는 또 다른 흥미로운 기능은 일러스트 레이터 기호를 사용하는 것입니다. SVG 기호로 내보내므로 많은 가능성을 제공합니다.

읽어 주셔서 감사합니다.

피부가있는 SVG 기호

에 대한 자주 묻는 질문 웹 디자인을위한 다른 이미지 형식 대신 SVG 기호를 사용하는 장점은 무엇입니까?

SVG 기호는 JPEG, PNG 또는 GIF와 같은 다른 이미지 형식에 비해 많은 장점이 있습니다. 첫째, SVG는 확장 가능한 벡터 그래픽으로 품질을 잃지 않고 크기를 조정할 수 있습니다. 이것은 다른 크기의 다른 장치에 동일한 이미지를 표시 해야하는 반응 형 웹 디자인에 특히 유용합니다. 둘째, SVG 기호는 CSS를 사용하여 스타일링하여 설계 유연성을 향상시킬 수 있습니다. 마지막으로 SVG의 파일 크기는 일반적으로 비트 맵 대응 물보다 작으므로로드 속도를 높이고 웹 사이트 성능을 향상시킬 수 있습니다.

SVG 기호의 색상을 수정하는 방법은 무엇입니까? CSS를 사용하여 SVG 기호의 색상을 수정할 수 있습니다. 기본적으로 SVG는 부모 요소의 색상을 상속합니다. 그러나 SVG 또는 하위 요소를 CSS에 배치하고 원하는 색상을 적용 하여이 설정을 무시할 수 있습니다. 예를 들어,

속성을 ​​사용하여 SVG 내부의 색상을 변경하거나

속성을 ​​사용하여 개요의 색상을 변경할 수 있습니다.

모든 웹 브라우저에서 SVG 기호를 사용할 수 있습니까?

SVG 기호는 Chrome, Firefox, Safari 및 Edge를 포함한 모든 최신 웹 브라우저에서 널리 지원됩니다. 그러나 이전 버전의 Internet Explorer (IE8 이하)는 SVG를 지원하지 않습니다. 이러한 이전 브라우저를 지원 해야하는 경우 PNG 또는 JPEG 이미지를 폴백으로 제공해야 할 수도 있습니다. SVG 기호를 애니메이션하는 방법은 무엇입니까? CSS 애니메이션 또는 JavaScript를 사용하여 SVG 기호를 애니메이션 할 수 있습니다. CSS 애니메이션은 더 간단하고 성능이 향상되지만 JavaScript는 더 많은 제어와 유연성을 제공합니다. 위치, 크기, 회전, 색상 및 불투명도와 같은 SVG의 다양한 특성을 애니메이션 할 수 있습니다.

html에서 svg 기호를 사용할 수 있습니까?

예, SVG 기호는 HTML에 직접 내장 할 수 있습니다. 이것은 및 태그를 사용하여 수행 할 수 있습니다. 태그는 SVG 기호를 정의하는 데 사용되며 태그는이를 인스턴스화하는 데 사용됩니다. 이를 통해 SVG 기호를 한 번에 정의하고 HTML 전체에서 여러 번 재사용 할 수 있습니다.

내 SVG 기호를보다 접근하기 쉽게 만드는 방법은 무엇입니까?

SVG 기호에 더 액세스 할 수 있도록하려면 SVG의

및 태그를 사용하여 대체 텍스트를 제공해야합니다. 태그는 SVG에 대한 짧은 설명 제목을 제공하고 태그는 더 긴 설명을 제공합니다. 이 태그는 스크린 리더가 읽고 시각 장애가있는 사용자에게 중요한 컨텍스트를 제공합니다.

CSS에서 SVG 기호를 사용할 수 있습니까?

예, SVG 기호는 CSS의 배경 이미지로 사용할 수 있습니다. 이는 SVG를 데이터 URL로 인코딩하고이를

속성의 값으로 사용하여 수행 할 수 있습니다. 그러나이 방법을 사용하면 CSS로 SVG를 스타일링하거나 애니메이션 할 수 없습니다.

성능을 위해 SVG 기호를 최적화하는 방법은 무엇입니까? background-image 성능을 위해 SVG 기호를 최적화하는 몇 가지 방법이 있습니다. 먼저 SVG 코드를 압축하여 파일 크기를 줄일 수 있습니다. 둘째, GZIP 압축을 사용하여 파일 크기를 더욱 줄일 수 있습니다. 마지막으로 HTTP/2를 사용하여 SVG에 서비스를 제공 할 수있어보다 효율적이고 효율적인 데이터 전송이 가능합니다.

JavaScript에서 SVG 기호를 사용할 수 있습니까?

예, SVG 기호는 JavaScript에서 작동 할 수 있습니다. 이를 통해 색상, 크기, 위치 및 가시성과 같은 SVG의 특성을 동적으로 변경할 수 있습니다. JavaScript를 사용하여 SVG를 애니메이션하고 대화식 SVG를 생성하며 SVG를 동적으로로드 할 수도 있습니다.

반응 형 SVG 기호를 만드는 방법은 무엇입니까?

응답 형 이를 통해 SVG는 부모 요소로 스케일링 할 수 있습니다. 또한 속성을 ​​사용하여 SVG의 종횡비 및 좌표계를 지정하여 스케일로 확장 할 수 있습니다.

위 내용은 'Reskinable'SVG 기호 : 만드는 방법 (.. 왜)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!