반응성있는 SVG에 대한 10 개의 황금 규칙

Sep 14, 2025

어떻게

무한히 확장 가능한 벡터 이미지, 작은 파일 크기 및 DOM과의 직접적인 통합을 포함하여 SVG의 많은 이점 - 반응 형 웹 디자인 ...에 SVG 사양에도 불구하고 10 년이 오래되었지만 많은 브라우저와 도구에서 상대적으로 최근의 지원을 의미합니다. 아직도 많은 트릭, 허점 및 경험 많은 웹 디자이너와 개발자조차도 아프게하는 많은 트릭을 의미합니다.

여기에서는 10 개의 황금 규칙 으로이 중요한 것들을 요약했습니다.

01. 도구를 올바르게 설정하십시오

장인이 작업을 시작하기 전에 자신의 도구를 선명하게하기 때문에 SVG와 함께 일하는 사람은 응용 프로그램을 최대한 효율적이고 최적화 된 방법으로 벡터 형식을 제공하기 위해 응용 프로그램을 설정해야합니다. 구현할 수있는 여러 가지 설정이 있습니다.

첫째, 달리 수행 할 이유가없는 한, 벡터 도구에서 '픽셀'으로 측정 값을 설정하십시오. svg에 중요하지는 않지만 (이는 viewbox. 그리고 거의 모든 측정 시스템에서는 요소를 행복하게하고 있음) 인쇄 기본값이 아닌 일반적인 CSS 단위를 사용하여 SVG 도면을 개발하는 것이 좋습니다. 또한 더 쉽게 추가 할 수 있습니다 @미디어 쿼리 및 기타 개입 후 나중에.

캔버스 영역을 필요한 것보다 더 크게하지 마십시오. 비트 맵 이미지와 마찬가지로 SVG의 '공백 공간'은 사용되지 않으며 CSS 마진으로 가장 잘 대체되지 않습니다. 스케치와 같은 많은 벡터 도구는 자동으로 선택한 요소로 캔버스 영역을 자르십시오.

동시에 캔버스 영역을 요소의 정확한 가장자리로 자르지 마십시오. 앤티 앨리어싱은 여전히 SVG에 적용되며 너무 가까이 절단하면 앤티 앨리어싱이 자르지 못할 수도 있습니다. 대신 캔버스의 가장자리가 요소에 가까이 오면 적어도 2px를 맑게하십시오.

응답 성과 성능은 밀접하게 관련되어 있으므로 십진수 정밀도가 두 점 이하로 설정하십시오. SVG는 정수에서 생각하지 않으므로 벡터 점은 1.45882721px 값을 가질 수 있습니다. 이 극단적 인 정밀도는 완전히 불필요하고 코드 부풀어 오름과 파일 크기에만 추가 되므로이 시점에서 잘자는 것이 좋습니다.

유사하게, 가능한 한 적은 점을 사용하여 벡터 모양을 그립니다. 많은 새로운 디자이너가 반대가 실제로 진실되면 더 많은 포인트가 더 좋을 것으로 가정합니다. 몇 점이 잘 배치되고 요소를보다 잘 제어하고 파일 크기를 줄일 수 있습니다.

이 규칙을 따르지 않는 벡터 파일이 주어지면 걱정하지 마십시오. 벡터 아트 응용 프로그램은 모양을 변경하지 않고 요소의 포인트 수를 줄이기 위해 사용할 수있는 '단순화'옵션을 갖추고 있습니다. 또는 자세한 작업을 위해 Astute 그래픽 'VectorScribe와 같은 플러그인을 제안합니다.

02. 높이 및 너비 속성을 제거합니다

대부분의 앱은 SVG 수출에 많은 독점적 인 불필요한 코드를 추가합니다. 대부분의 svg 파일의 시작 부분에 필요한 유일한 코드는 다음과 같습니다.

 xmlns = "http://www.w3.org/2000/svg"viewbox = "0 500 500"& gt;
& lt;! - SVG 코드는 여기 - & gt;
& lt; / svg & gt;

우리의 목적을 위해 가장 중요한 측면은 폭 과 신장 대부분의 응용 프로그램에 자동으로 포함되는 속성. 이것은 현대 브라우저에서 SVG를 완전히 반응시킵니다.

많은 SVG를 처리하거나 러시에 있거나 손 으로이 단계를 완료 할 필요가 없습니다. 대신 세 번째 골든 규칙에있는 제안을 따를 수 있습니다 ...

03. SVG 출력을 최적화하고 미합합니다

A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly — 지능형 핸드 편집 및 사후 생산 최적화의 조합은 SVG 파일 크기를 현저하게 줄일 수 있습니다.

SVG 콘텐츠를 만드는 데 사용하는 도구가 무엇이든간에 공구를 통해 출력을 처리하는 것이 가치가 있습니다. svgomg. 또한 코드를 현저하게 트리밍합니다. 일반적으로 파일 크기로 약 20 ~ 80 %를 절약 할 수 있습니다. 동일한 코드가 로컬로 통합 될 수 있습니다 꿀꺽 꿀꺽 꿀꺽 마시고 ...에

04. IE의 코드 수정

규칙 2는 올바르게 최적화 된 SVG가 현대 브라우저에서 완전히 반응 함을 언급했습니다. Microsoft Edge를 현대 브라우저로 계산하면 사실입니다. IE 9-11의 경우 주소가 몇 가지 문제가 있습니다. 우리가 SVG를 이미지로 사용하는 경우 :

& lt; img src = "countdown.svg alt ="카운트 다운 "& gt;

IE9-11을 CSS 속성 선택기를 사용하여 이미지를 올바르게 표시하도록 강제 할 수 있습니다.

 img [src $ = ". svg"] {폭 : 100 %;}

SVG 이미지는 일반적인 생산에서 잘 작동하지만 상호 작용이 제한적입니다. 대부분의 브라우저는 페이지에 배치 된 SVG 내부의 상호 작용 및 애니메이션을 무시합니다. ...에 또한 SVG 이미지는 브라우저에 대한 추가 HTTP 요청입니다.

이들 및 다른 이유로 SVG는 점점 더 많이 사용되고 있습니다. 이 경우 SVG 코드는 IE에 대해 조금 더 많은 치료가 필요합니다.

& lt; body & gt; ...에 ... & lt; svg xmlns = "http://www.w3.org/2000/svg"viewbox = "0 0 525 365"preserveaspectratio = "xmidymin slice"& gt;

여기에 덧붙여 preserveaspectratio. 속성, 즉 이미지의 올바른 크기 조정을 보존하기위한 조금 더 많은 지침이 필요합니다. svg의 너비를 가져 가라. 365. 이 경우) 높이로 나눕니다 ( 525. ) 결과를 100 %까지 곱하십시오. 이것은이게 될 것입니다 패딩 바닥 SVG의 값, '프로판'IE에서 SVG를 올바른 종횡비로 표시하려면 충분히 열려 있습니다.

& lt; body & gt; ...에 ... & lt; svg xmlns = "http://www.w3.org/2000/svg"viewbox = "0 0 525 365" preserveaspectratio = "Xmidymin slice" 스타일 = "너비 : 100 %; 패딩 - 하단 : 69.52 %, 높이 : 1px; 오버플로 : 가시 광고"& gt;

사실을 간결하고 분명히하기 위해이 문서의 나머지 코드 샘플에는 이러한 변경 사항이 포함되어 있지 않습니다. Amelia Bellamy-Royds는 Ang을 작성했습니다 SVG 스케일링에 대한 훌륭한 기사 ...에

05. 영웅 텍스트를 위해 SVG를 고려하십시오

Using SVG for hero text means it will automatically scale in line with its container — 영웅 텍스트를 위해 SVG를 사용하는 것은 컨테이너와 자동으로 줄이됩니다.

현재 텍스트를 컨테이너에 크기 조정하기위한 CSS 표준이 없습니다. VW 유닛을 사용하여 텍스트를 축척 할 수 있지만 특정 뷰포트 제한에서 텍스트를 '클램프'에 거의 항상 필요로하는 최소한 두 개의 미디어 쿼리 개입이 필요합니다. 그러나 SVG 텍스트는 자동으로 컨테이너로 크기를 조정합니다.

& lt; 헤더 & gt; & lt; svg xmlns = "http://www.w3.org/2000/svg"viewbox = "0 0 285 80"& gt; & lt; 텍스트 x = "0"y = "66"& gt; 카우아이 & lt; text & gt; & lt; / svg & gt; & lt; / header & gt;

CSS :

 헤더 SVG 텍스트 {
글꼴 무게 : 900; 글꼴 크기 : 90px; 채우기 : 파란색;
}

SVG 인라인을 유지하면 접근성 및 SEO 값을 보존하고 이미 페이지에 이미 포함 된 글꼴을 사용하여 텍스트를 스타일로 지정할 수 있습니다. 보다 여기 자세한 내용은.

06. 진보적 인 아이콘을위한 너비와 높이를 놓습니다.

A non-scaling-stroke line has been applied to this speech bubble so it will not change in width when the viewport is resized — 이 연설 버블에는 비 스키 킹 스트로크 라인이 적용되어 뷰포트가 크기가 조정되면 폭이 변경되지 않습니다.

규칙 2에 대한 한 가지 예외는 아이콘과 작은 로고가 있으며, 이는 폭 과 신장 속성이 점차 향상되도록 원하는 경우 :

 & lt; a href = "http://codepen.io"& gt;
    & lt; svg role = "img"aria-label = "Codepen"폭 = "50"높이 = "50"& gt;
        & lt; Title & gt; Codepen & lt; / title & gt;
        & lt; XLINK를 사용하십시오 : href = "# Codepen"/ & gt;
    & lt; / svg & gt;
& lt; / a & gt;
...에 ...
& lt; svg style = "display : 없음"& gt;
    & lt; Symbol ID = "Codepen"viewbox = "0 0 50"& gt;
        & lt; 경로 D = "..."/ & gt;
    & lt; / symbol & gt;
& lt; / svg & gt;

이 기술의 예를 볼 수 있습니다. 여기 ...에

우리가 CSS가있는 SVG 아이콘 만 크기를 지정하면 사이트 스타일 시트가로드되지 않으면 아이콘이 교체 된 요소의 기본 크기로 표시됩니다. 300px x 150px. 높이와 너비를 속성으로 유지함으로써 우리는 기본적으로 가장 가까운 합리적인 터치 크기로 지정하고 CSS를 사용하여 제시되는 방식을 향상시킬 수 있습니다.

07. 벡터 효과를 사용하여 헤어 라인을 얇게 유지합니다

기본적으로 SVG는 스트로크 두께를 포함하여 뷰포트로 모든 것을 확장합니다. 일반적으로 이것은 괜찮습니다. 그러나 어떤 경우에는 특히 텍스트 외부에 효과로 적용되는 다이어그램 및 스트로크가 발생할 수 있습니다. 도면의 크기에 관계없이 동일한 두께를 유지할 수 있습니다. 이것은 작은 알려진 도메인입니다 벡터 효과 속성 프레젠테이션 속성 또는 CSS로 적용 할 수있는 속성 :

 경로 {
    채우기 : #fff; 스트로크 : # 111;
    스트로크 폭 : 2;
    벡터 효과 : 비 스키 킹 스트로크;
}

보세요 이 기술의 전체 예제 ...에

08. 비트 맵을 기억하십시오

많은 개발자가 SVG가 벡터를 사용할 수 있지만 JPEG 및 PNG는 SVG 도면에도 적용 할 수 있습니다. 그리고 당신이 지금까지 내 규칙을 따르는 한, 이들 이미지는 비트 맵을 추가 할 때 이러한 이미지가 반응합니다. 꼬리표:

& lt; 이미지 폭 = "1024"높이 = "768"xlink : href = "lake-louise.jpg"x = "1300"y = "150"역할 = "이미지"title = "crowsnest pass"& gt; & lt; / image & gt;

09. 적응 형 솔루션을 고려하십시오

다른 적응 형 크기로 렌더링 된 고전적인 코카콜라 로고

물건을 '쪼그리고 앉는 것'으로 만드는 것은 반응이 좋은 디자인의 한 부분입니다. 적응 형 디자인의 더 큰 감각에서 RWD가 무엇인지, 모든 뷰포트 크기에 적절한 콘텐츠를 제시하고 있습니다.

이것은 다양한 방법으로 달성 될 수 있습니다. responsivelogos.co.uk는 SVG 스프라이트를 사용하는 일련의 예를 제공하지만 미디어 쿼리를 SVG에 통합하여 "브랜딩 모듈"이라고 부르는 것을 만들기를 선호합니다. 이 방법을 사용하면 구성 요소의 가시성을 추가, 제거 및 수정할 수 있습니다. 적응 형 브랜딩 모듈에 대해 자세히 알아보십시오 내 기사에서 ...에

이 동일한 기술은 다이어그램, 일러스트레이션, 맵 등에 사용할 수 있습니다. 가장 간단한 모듈에서 CSS 자체는 SVG 내부에 기록되어 이전 규칙에 설명 된대로 모든 곳에서 사용할 수 있습니다.

10. 미디어 쿼리를 SVG에 통합합니다

많은 사람들이 CSS 미디어 쿼리가 SVG 자체 안에 작성 될 수 있음을 알지 못합니다.

 & lt; svg xmlns = "http://www.w3.org/2000/svg"viewbox = "14 82 272 139"& gt;
& lt; defs & gt;
& lt; 스타일 & gt;
SVG G {전환 : 1S; }
@media all 및 (최대 너비 : 90REM) {
#srink, #coke {불투명도 : 0; }
}
& lt; style & gt;
& lt; / defs & gt;
& lt; g id = "코카콜라"& gt;
& lt; path d = "m109.6 ... & gt;

미디어 쿼리가 내부에있는 요소 만 '볼 수 있습니다'라는 점에 유의해야합니다. 즉, 측정은 모든 측정 값이 페이지가 아닌 요소 자체와 관련이 있습니다. 이 접근 방식의 한 가지 잠재적 단점은 SVG의 캔버스 영역이 내부의 요소에 비해 항상 동일하게 유지된다는 것입니다.

이로 인해 상대적으로 큰 캔버스 영역 내부에서 프레임 된 작은 뷰포트 크기에서 매우 작은 요소가 발생할 수 있습니다. 이를 포함하는 몇 가지 솔루션이 있습니다 viewbox 크기 조정 과 보상 할 요소를 확장하십시오 ...에

결론

SVG의 무한한 확장 성은 가장 큰 자산이지만 브라우저와 벡터 그래픽 편집기에 의해 여전히 다소 숨겨진 기능입니다. 이러한 가이드 라인을 프로덕션 워크 플로에 통합하고 팀의 다른 사람들과 통신하면 웹에 대해 원활하게 응답하는 SVG를 만들 수 있으므로 매일 개발에 사용하는 자산의 일부가됩니다.

이 기사는 원래 나타났습니다 그물 잡지 문제 283; 여기 그것을 구입하십시오 ...에!

관련 기사:

12 필수 코드 테스트 도구가 있어야합니다
스케치 기술을 선명하게하십시오
GSAP로 SVG 애니메이션 과급하십시오

반응성있는 SVG에 대한 10 개의 황금 규칙

01. 도구를 올바르게 설정하십시오

02. 높이 및 너비 속성을 제거합니다

03. SVG 출력을 최적화하고 미합합니다

04. IE의 코드 수정

05. 영웅 텍스트를 위해 SVG를 고려하십시오

06. 진보적 인 아이콘을위한 너비와 높이를 놓습니다.

07. 벡터 효과를 사용하여 헤어 라인을 얇게 유지합니다

08. 비트 맵을 기억하십시오

09. 적응 형 솔루션을 고려하십시오

10. 미디어 쿼리를 SVG에 통합합니다

결론

어떻게 - 가장 인기있는 기사

혼합 미디어 아트 튜토리얼 : 디지털 아트웍을 수채화시키는 방법

변수 글꼴 사용 4 단계

UserLook

Photoshop에서 로고를 만드는 방법

캐릭터 아트를 향상시키는 방법

인증 착용 된 k-2so droid

Photoshop의 템플릿에서 포스터를 만드십시오

POSTCSS-FlexBox로 복잡한 레이아웃을 빌드

카테고리