기본 모양을 사용하여 SVG 코드를 단순화하는 방법

아이콘을 다루는 방법에는 여러 가지가 있지만 최상의 접근 방식에는 항상 SVG가 Inline 또는 이미지 파일에 대한 링크로 포함됩니다. 이는 코드로 "그려"되어 모든 환경에서 유연하고 적응 가능하며 확장 가능하기 때문입니다.

그러나 SVG를 사용할 때는 항상 많은 불필요한 코드를 포함 할 수 있습니다. 경우에 따라, 인화 된 SVG 코드는 너무 길어서 문서가 더 오래 스크롤되어 사용하기에 불편할 수 있으며, 그렇습니다. 필요한 것보다 조금 무겁습니다.

우리는 사용할 수 있습니다<use></use> 요소는 코드 블록을 재사용하거나 기본 변수를 적용하여 SVG 스타일을 한 곳에서 관리합니다. 또는 서버 측 환경에서 작업하는 경우 항상 SVG 파일의 내용을 직접 넣는 대신 일부 PHP (또는 이와 유사한)를 추가 할 수 있습니다.

이것은 모두 좋지만 코드 기반 접근 방식에 의지하는 대신 파일 레벨 에서이 문제를 해결할 수 있다면 좋지 않습니까? 기본 모양을 사용하여 코드가 적은 코드 로 동일한 그래프를 만드는 방법 에 따라 다른 관점에 집중하고 싶습니다. 이런 식으로, 우리는 품질이나 시각적 변화를 희생하지 않고 프로젝트에서 더 작고 통제 가능하며 의미 론적 아이콘의 이점을 얻을 수 있습니다. 다른 예제를 다루고, 일반적인 아이콘 코드를 탐색하고, 우리가 만들 수있는 가장 간단한 SVG 모양을 사용하여 그것들을 다시 칠하는 방법.

다음은 다음과 같이 처리 할 아이콘입니다.

코드를 작고 단순하게 유지하는이 아이콘을 만드는 데 사용할 수있는 기본 모양을 살펴 보겠습니다.

녀석! 다음은 holasvg.com에서 만든 간단한 아이콘 목록입니다! 이 기사를 읽은 후에는 수정 방법을 알게되고 귀하를 만드는 방법을 알게 될 것입니다.

사용<line></line> 요소 단순화 된 닫기 아이콘

다음은 flaticon.com에서 다운로드하고 Pixel-Perfect에서 구축 한 "Close"또는 "Cross"아이콘에 대한 코드입니다.

이 예에서는 모든 것이 발생합니다<path></path> 내부에는 데이터 속성 (d)에 많은 명령과 매개 변수가 있습니다. 이 SVG가하는 일은 경계에서 모양을 추적하는 것입니다.

Illustrator에 익숙한 경우, 이는 두 개의 개별 선을 그려서 모양으로 변환 한 다음 두 개를 경로 파인더와 결합하여 복합 모양을 만듭니다.

<path></path> 요소는 복잡한 모양을 그릴 수 있지만이 경우 동일한 모양을 유지하면서 두 줄로 동일한 그림을 만들 수 있습니다.

<code><svg height="50" overflow="visible" stroke="black" stroke-linecap="round" stroke-width="10" viewbox="0 0 50 50" width="50" xmlns="http://www.w3.org/2000/svg">
<line x1="0" x2="50" y1="0" y2="50"></line>
<line x1="50" x2="0" y1="0" y2="50"></line></svg></code>

먼저 0,0에서 50,50까지의 뷰 박스를 정의합니다. 원하는 크기를 선택할 수 있습니다. SVG는 항상 당신이 정의하는 모든 너비와 높이까지 잘 확장됩니다. 작업을 단순화하기 위해이 경우 50 단위의 인라인 너비와 높이를 정의하여 도면에서 추가 계산을 피했습니다.

사용합니다<line></line> 요소, 우리는 선의 첫 번째 지점의 좌표와 마지막 지점의 좌표를 선언해야합니다. 이 예에서는 x = 0 y = 0으로 시작하고 x = 50 y = 50으로 끝납니다.

이것이 코드의 모습입니다.

<code><line x2="50" y2="50"></line></code>

두 번째 줄은 x = 50 y = 0으로 시작하고 x = 0 y = 50으로 끝납니다.

<code><line x1="50" y2="50"></line></code>

SVG 스트로크는 기본적으로 색상이 없습니다. 그래서 우리는 스트로크 속성에 검은 값을 추가합니다. 또한 스트로크 폭을 위해 10 단위의 너비를 제공하고 스트로크 린 캡을 원 값으로 설정하여 원래 디자인의 둥근 모서리를 복사합니다. 이 속성은 직접 추가됩니다<svg></svg> 태그에서 두 줄 모두 상속됩니다.

스트로크는 기본 크기 1 단위보다 10 단위가 크기 때문에 뷰 박스는 선을자를 수 있습니다. 포인트 10 단위를 뷰 박스로 이동하거나 스타일에 보이는 오버플로 =를 추가 할 수 있습니다.

0이 기본값이기 때문에 0과 같은 값을 삭제할 수 있습니다. 즉, 두 줄은 두 개의 매우 작은 코드 라인만으로 끝납니다.

<code><line x2="50" y2="50"></line><line x1="50" y2="50"></line></code>

바로<path></path> 변경<line></line> , 우리는 더 작은 SVG 파일을 생성 할뿐만 아니라 더 의미적이고 제어 가능한 코드 블록을 만들어 향후 유지 보수를 더 쉽게 만들 수 있습니다. 시각적 효과는 원본 이미지와 정확히 동일합니다.

같은 십자가, 다른 코드.

사용<circle></circle> 그리고<path></path> 요소 단순화 된 시계 아이콘

명사 프로젝트에서 Barracuda 에서이 시계 아이콘 예제를 얻었습니다.

이 모양도 사용됩니다<path></path> Draw, 그러나 우리는 또한 SVG에 영향을주지 않고 삭제할 수있는 소프트웨어 및 파일 라이센스와 관련된 많은 네임 스페이스 및 XML 지시문이 있습니다. 아이콘을 만들기 위해 어떤 일러스트레이션 편집기를 사용할 것인지 알 수 있습니까?

원과 더 간단한 명령이있는 경로를 사용하여 이것을 처음부터 다시 만들어 봅시다. 다시 말하지만, 우리는 이번에는 0,0에서 100,100까지 뷰 박스로 시작해야하며 너비와 높이는 해당 장치와 일치해야합니다.

<code><svg fill="none" height="100" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" viewbox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40"></circle><path d="M50 25V50 H75"></path></svg></code>

우리는 할 것입니다<svg></svg> 레이블의 스타일은 이전 아이콘과 동일하게 유지됩니다. 기본값을 검은 색으로 채우므로 삭제하려면 값을 명시 적으로 할당해야합니다. 그렇지 않으면 원은 순수한 검은 색 채우기가있어 다른 모양을 방해합니다.

그리기 위해<circle></circle> , 우리는 반경이 위치 할 중심 지점을 표시해야합니다. CX (중심 X) 및 CY (중심 Y)로이를 수행 할 수 있습니다. 그러면 r (Radius)은 우리의 원이 얼마나 큰지 선언합니다. 이 예에서는 반경이 뷰 박스보다 약간 작으므로 스트로크 너비가 10 단위 일 때 자르지 않습니다.

이 모든 편지로 무슨 일이 일어나고 있습니까? SVG 문법 소개는 Chris Coyier의 일러스트레이션 안내서를 확인하십시오.

시계 포인터를 사용할 수 있습니다<path></path> 매우 유용하고 간단한 드로잉 명령이 있기 때문입니다. d (data)에서는 m (move to to) 명령으로 시작하고 이어지는 좌표가 이어지기 시작해야합니다.이 경우 50,25 (원의 상단 중앙 근처).

V (vertical) 명령 후에는 음수 또는 양수를 사용하여 위 또는 아래로 이동할 수 있기 때문에 하나의 값 만 필요합니다. 양수는 아래쪽으로 이동합니다. H (레벨)에 대해서도 마찬가지이며, 양수 75가 오른쪽으로 끌어 올릴 것입니다. 모든 명령은 자본화되므로 우리가 선택한 번호는 그리드의 포인트가됩니다. 우리가 소문자 (상대 명령)를 사용하기로 결정한 경우, 숫자는 좌표계의 절대 지점이 아니라 한 방향으로 이동하는 단위의 수입니다.

같은 시계, 다른 코드.

사용<rect></rect> 그리고<polyline></polyline> 요소 단순화 된 봉투 아이콘

원래 모양을 확장하지 않고 Illustrator에서 봉투 아이콘을 그렸습니다. 다음은 수출에서 얻은 코드입니다.

Illustrator는 그래픽 내보내기위한 SVG 옵션을 제공합니다. "CSS 속성"드롭 다운 메뉴에서 "스타일 요소"를 선택하여 CSS 파일로 이동하려는 범주가있는 태그를 가질 수 있도록했습니다. 물론 SVG 스타일을 적용하는 방법에는 여러 가지가 있습니다.

우리는 이미이 코드에 몇 가지 기본 모양이 있습니다! 나는 Illustrator의 "Shape to Path"옵션을 선택하지 않았으며, 여기에는 많은 도움이됩니다. SVGOMG를 사용하여이를 최적화하여 댓글, XML 지시문 및 빈 요소와 같은 불필요한 데이터를 제거 할 수 있습니다. 필요한 경우 거기에서 추가 엑스트라를 수동으로 삭제할 수 있습니다.

우리는 이미 더 간단한 것이 있습니다.

<code><svg version="1.1" viewbox="0 0 310 190" x="0" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0">
 .st0 {fill : none; stroke :#000; 뇌졸중 width : 10; 스트로크-린 캡 : 라운드; 스트로크-라인 조인 : 라운드; 스트로크-미터 라미트 : 10}
<rect height="180" width="300" x="5" y="5"></rect>
<polyline points="5 5 155 110 305 5"></polyline></svg></code>

우리는 다음을 포함하여 봉투의 시각적 외관에 영향을 미치지 않고 더 많은 컨텐츠를 삭제할 수 있습니다.

• 버전 = "1.1"(SVG 2 이후 감가 상각)
• (이것은 의미 나 목적이 없습니다)
• x = "0"(이것은 기본값입니다)
• y = "0"(이것은 기본값입니다)
• XML : Space = "Preserve"(SVG 2 이후 감가 상승)

<code><svg viewbox="0 0 310 190" xmlns="http://www.w3.org/2000/svg">
 .st0 {fill : none; stroke :#000; 뇌졸중 width : 10; 스트로크-린 캡 : 라운드; 스트로크-라인 조인 : 라운드; 스트로크-미터 라미트 : 10}
  
<rect height="180" width="300" x="5" y="5"></rect>
<polyline points="5 5 155 110 305 5"></polyline></svg></code>

우리가 정말로 매우 공격적이기를 원한다면 CSS 스타일을 별도의 스타일 시트로 옮길 수 있습니다.

<rect></rect> 너비와 높이를 확장 할 출발점이 필요하므로 X = "5"및 y = "5"를 왼쪽 상단 코너 포인트로 사용해 보겠습니다. 거기에서 너비는 300 단위와 높이 180 단위의 사각형을 만듭니다. 시계 아이콘과 마찬가지로, 우리는 좌표가 0,0이면 잘린 10 단지 스트로크가 있기 때문에 5,5를 시작점으로 사용합니다.

<polyline></polyline> 비슷합니다<line></line> 그러나이 요소는 항상 동봉 된 모양을 정의합니다. 다음은 MDN의 직접 예입니다.

우리가 시계 아이콘을 위해 그린 원을 기억하십니까? R (반경)을 RX 및 RY로 교체하십시오. 이제 두 가지 다른 반경 값이 있습니다. MDN의 또 다른 예는 다음과 같습니다.

요약

우리는 단기간에 많은 콘텐츠를 다루었습니다! SVG 최적화 과정을 보여주기 위해 예제를 사용하지만이 게시물에서 다음을 받으시기 바랍니다.

• 압축은 일러스트레이션 소프트웨어에서 SVG가 그려지는 방식으로 시작한다는 것을 기억하십시오.
• SVOMG와 같은 사용 가능한 도구를 사용하여 SVG를 압축하십시오.
• 필요한 경우 불필요한 메타 데이터를 수동으로 삭제하십시오.
• 복잡한 경로를 기본 모양으로 교체하십시오.
• <use></use> SVG를 "인라인"하고 재사용 가능한 아이콘 라이브러리를 구축하는 좋은 방법입니다.

이러한 기본 모양을 결합하여 몇 개의 아이콘을 만들 수 있습니까?

Holasvg.com/icons에서 목록을 작성하고 있으며 여기에 더 많은 아이콘과 기능을 계속 업로드 할 것입니다. 이제 몇 가지 숫자를 변경하여 쉽게 수정하는 방법을 알 수 있습니다. 계속 가십시오.

위 내용은 기본 모양을 사용하여 SVG 코드를 단순화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!