6 일반적인 SVG 실패(및 이를 수정하는 방법)

누군가 최근에 인라인 SVG 디버깅에 접근하는 방법을 물었습니다. DOM의 일부이기 때문에 모든 브라우저 DevTools에서 모든 인라인 SVG를 검사할 수 있습니다. 그 때문에 우리는 사물의 범위를 파악하고 잠재적인 문제나 SVG를 최적화할 기회를 발견할 수 있는 능력이 있습니다.

그러나 때로는 SVG를 전혀 볼 수조차 없습니다. 이러한 경우 디버깅할 때 찾는 XNUMX가지 특정 항목이 있습니다.

1. 그만큼 viewBox 값

XNUMXD덴탈의 viewBox SVG로 작업할 때 흔히 혼동되는 지점입니다. 그것 없이 인라인 SVG를 사용하는 것은 기술적으로는 괜찮지만 가장 중요한 이점 중 하나인 컨테이너를 사용한 확장을 잃게 됩니다. 동시에 부적절하게 구성되면 원하지 않는 클리핑이 발생할 수 있습니다.

요소는 잘려도 그대로 있습니다. 우리가 보지 못하는 좌표계의 일부일 뿐입니다. 일부 그래픽 편집 프로그램에서 파일을 열면 다음과 같이 보일 수 있습니다.

이 문제를 해결하는 가장 쉬운 방법은? 추가하다 overflow="visible" 스타일시트에 있든 SVG에 인라인으로 style 속성 또는 SVG 표시 속성으로 직접. 하지만 우리가 background-color SVG로 전환하거나 주변에 다른 요소가 있는 경우 상황이 약간 이상하게 보일 수 있습니다. 이 경우 가장 좋은 옵션은 viewBox 숨겨진 좌표계 부분을 표시하려면 다음을 수행하십시오.

에 대한 몇 가지 추가 사항이 있습니다. viewBox 우리가 주제를 다루는 동안 다룰 가치가 있는 것:

어떻게합니까? viewBox 일하세요?

SVG는 무한한 캔버스이지만 뷰포트와 viewBox.

XNUMXD덴탈의 뷰포트 무한한 캔버스 위의 창틀이다. 치수는 다음과 같이 정의됩니다. width 및 height 속성 또는 해당하는 CSS에서 width 및 height 속성. 원하는 길이 단위를 지정할 수 있지만 단위 없는 숫자를 제공하면 기본적으로 픽셀이 됩니다.

XNUMXD덴탈의 viewBox 네 가지 값으로 정의됩니다. 처음 두 개는 왼쪽 위 모서리의 시작점입니다(x 및 y 값, 음수 허용). 이미지를 재구성하기 위해 이것을 편집하고 있습니다. 마지막 두 개는 뷰포트 내부 좌표계의 너비와 높이입니다. 여기에서 그리드의 크기를 편집할 수 있습니다(이에 대한 섹션에서 살펴보겠습니다). 확대).

다음은 SVG를 보여주는 단순화된 마크업입니다. viewBox 그리고 width 및 height 둘 다에 설정된 속성 <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

재구성

그래서 이건:

<svg viewBox="0 0 700 700">

...다음에 매핑됩니다.

<svg viewBox="start-x-axis start-y-axis width height">

우리가 보는 뷰포트는 0 x축과 0 y축에서 만납니다.

이것을 변경하면:

<svg viewBox="0 0 700 700">

…이에:

<svg viewBox="300 200 700 700">

...너비와 높이가 동일하게 유지됨(700 단위), 좌표계의 시작은 이제 300 x축의 점과 200 y축에.

다음 비디오에서는 빨간색을 추가합니다. <circle> SVG에 중심을 두고 300 x축의 점과 200 y축에. 어떻게 변경되는지 확인하십시오. viewBox 좌표를 동일한 값으로 지정하면 SVG의 렌더링된 크기는 동일하게 유지되지만 원의 위치는 프레임의 왼쪽 상단 모서리로 변경됩니다(700×700). 내가 한 모든 것은 viewBox.

확대

내부의 마지막 두 값을 변경할 수 있습니다. viewBox 이미지를 확대하거나 축소합니다. 값이 클수록 뷰포트에 맞게 더 많은 SVG 단위가 추가되어 이미지가 작아집니다. 1:1 비율을 유지하려면 viewBox 너비와 높이는 뷰포트 너비와 높이 값과 일치해야 합니다.

이 매개변수를 변경할 때 Illustrator에서 어떤 일이 발생하는지 살펴보겠습니다. 아트보드는 viewport 흰색 700px 정사각형으로 표시됩니다. 해당 영역 밖의 다른 모든 것은 무한한 SVG 캔버스이며 기본적으로 잘립니다.

아래의 그림 1은 파란색 점을 보여줍니다. 900 x축을 따라 900 y축을 따라. 마지막 두 개를 바꾸면 viewBox 값 700 에 900 이렇게 :

<svg viewBox="300 200 900 900" width="700" height="700">

… 그러면 아래 그림 2에서 볼 수 있듯이 파란색 점이 거의 완전히 다시 보입니다. viewBox 값을 늘렸기 때문에 이미지가 축소되었지만 SVG의 실제 너비와 높이 치수는 동일하게 유지되었고 파란색 점이 다시 잘리지 않은 영역에 더 가까워졌습니다.

그리드가 뷰포트에 맞게 크기가 조정되는 방법에 대한 증거로 분홍색 사각형이 있습니다. 단위가 작아지고 더 많은 그리드 선이 동일한 뷰포트 영역에 맞습니다. 다음 펜에서 동일한 값을 사용하여 작동하는 작업을 확인할 수 있습니다.

2. 누락 width 및 height

인라인 SVG를 디버깅할 때 살펴보는 또 다른 일반적인 사항은 마크업에 다음이 포함되어 있는지 여부입니다. width or height 속성. SVG가 절대 위치 지정이 있는 컨테이너 또는 유연한 컨테이너(Safari가 SVG를 계산하므로 width 가치 0px 대신 auto). 을 제외한 width or height 이러한 경우 전체 이미지를 볼 수 없습니다. 이 CodePen 데모 열기 Chrome, Safari 및 Firefox에서 비교합니다(더 크게 보려면 이미지를 탭하세요).

해결책? 프리젠테이션 속성, 스타일 속성의 인라인 또는 CSS에서 너비 또는 높이를 추가합니다. 특히 높이가 다음으로 설정된 경우 높이 자체를 사용하지 마십시오. 100% or auto. 또 다른 해결 방법은 권리를 설정 및 왼쪽 값.

가지고 놀 수 있습니다 다음 펜 다양한 옵션을 결합합니다.

3. 부주의 fill 및 stroke 색상

에 색을 적용하는 것일 수도 있습니다. <svg> 인라인 스타일이든 CSS에서 오는 태그든. 괜찮습니다. 하지만 마크업 전체에 다른 색상 값이 있거나 스타일에 설정된 색상과 충돌할 수 있습니다. <svg>, 부품이 보이지 않게 합니다.

그래서 찾는 경향이 있습니다. fill 및 stroke SVG 마크업의 속성을 삭제합니다. 다음 비디오는 빨간색으로 CSS 스타일을 적용한 SVG를 보여줍니다. fill. 누락된 부분을 표시하기 위해 제거한 마크업에서 SVG의 일부가 직접 흰색으로 채워지는 경우가 몇 가지 있습니다.

4. 신분증 분실

이것은 매우 명백해 보일 수 있지만 얼마나 자주 나타나는지 놀랄 것입니다. Illustrator에서 SVG 파일을 만들고 파일을 내보낼 때 마크업에서 잘 일치하는 ID를 얻을 수 있도록 레이어 이름을 지정하는 데 매우 부지런했다고 가정해 보겠습니다. 그리고 해당 ID에 연결하여 CSS에서 해당 SVG의 스타일을 지정할 계획이라고 가정해 보겠습니다.

좋은 방법입니다. 그러나 일반적으로 벡터를 직접 복사/붙여넣기할 때 동일한 SVG 파일을 동일한 위치로 두 번 내보냈고 ID가 다른 경우를 많이 보았습니다. 새 레이어가 추가되었거나 기존 레이어 중 하나의 이름이 변경되었을 수 있습니다. 어떤 경우이든 CSS 규칙은 더 이상 SVG 마크업의 ID와 일치하지 않아 SVG가 예상과 다르게 렌더링됩니다.

큰 SVG 파일에서는 해당 ID를 찾기 어려울 수 있습니다. 지금이 DevTools를 열고 작동하지 않는 그래픽 부분을 검사하고 해당 ID가 여전히 일치하는지 확인하기에 좋은 시기입니다.

따라서 내보낸 SVG 파일을 코드 편집기에서 열고 원본과 비교한 후 교체하는 것이 좋습니다. Illustrator, Figma, Sketch와 같은 앱은 똑똑하지만, 그렇다고 해서 우리가 이들을 조사할 책임이 없다는 의미는 아닙니다.

5. 클리핑 및 마스킹 체크리스트

SVG가 예기치 않게 잘리고 viewBox 괜찮아요, 저는 보통 CSS를 봅니다. clip-path or mask 이미지를 방해할 수 있는 속성. 인라인 마크업을 계속 살펴보고 싶은 유혹이 있지만 SVG의 스타일이 다른 곳에서 발생할 수 있다는 점을 기억하는 것이 좋습니다.

CSS 클리핑 및 마스킹 이미지 또는 요소의 일부를 "숨길" 수 있습니다. SVG에서는 <clipPath> 중간 결과 없이 이미지의 일부를 잘라내는 벡터 작업입니다. 그만큼 <mask> 태그는 투명도, 반투명 효과 및 흐린 가장자리를 허용하는 픽셀 작업입니다.

다음은 클리핑 및 마스킹이 관련된 디버깅 사례를 위한 작은 체크리스트입니다.

• 클리핑 패스(또는 마스크)와 그래픽이 서로 겹치는지 확인합니다. 겹치는 부분이 표시됩니다.
• 그래픽과 교차하지 않는 복잡한 경로가 있는 경우 일치할 때까지 변형을 적용해 보십시오.
• 개발자 도구로 내부 코드를 검사할 수 있습니다. <clipPath> or <mask> 렌더링되지 않으므로 사용하십시오!
• 내부에 마크업 복사 <clipPath> 및 <mask> 닫기 전에 붙여넣기 </svg> 꼬리표. 그런 다음 fill 해당 모양에 SVG의 좌표와 치수를 확인하십시오. 그래도 이미지가 보이지 않으면 추가해 보세요. overflow="hidden" ~로 <svg> 꼬리표.
• 확인 유일한 아이디는 다음을 위해 사용됩니다. <clipPath> or <mask>, 클리핑되거나 마스크된 도형 또는 도형 그룹에 동일한 ID가 적용됩니다. ID가 일치하지 않으면 모양이 깨집니다.
• 사이의 마크업에 오타가 있는지 확인합니다. <clipPath> or <mask> 태그.
• fill, stroke, opacity또는 내부 요소에 적용된 다른 스타일 <clipPath> 쓸모가 없습니다 — 유일하게 유용한 부분은 해당 요소의 채우기 영역 기하학입니다. 그렇기 때문에 <polyline> 그것은 다음과 같이 행동할 것입니다. <polygon> 그리고 당신이 사용하는 경우 <line> 클리핑 효과가 표시되지 않습니다.
• 적용 후 이미지가 보이지 않는 경우 <mask>, 확인하십시오 fill 마스킹 콘텐츠의 전체가 검은색이 아닙니다. 마스킹 요소의 광도는 최종 그래픽의 불투명도를 결정합니다. 더 밝은 부분을 통해 볼 수 있고 더 어두운 부분은 이미지의 내용을 숨길 것입니다.

에서 마스크 및 클립된 요소를 가지고 놀 수 있습니다. 이 펜.

6. 네임스페이스

SVG가 XML 기반 마크업 언어라는 사실을 알고 계셨나요? 글쎄요! SVG의 네임스페이스는 xmlns 속성:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

XML의 네임스페이스에 대해 알아야 할 것이 많고 MDN에 훌륭한 입문서가 있습니다. 네임스페이스는 브라우저에 컨텍스트를 제공하여 마크업이 SVG에만 해당됨을 알립니다. 네임스페이스는 SVG 및 XHTML과 같이 둘 이상의 XML 유형이 동일한 파일에 있을 때 충돌을 방지하는 데 도움이 됩니다. 이는 최신 브라우저에서는 훨씬 덜 일반적인 문제이지만 이전 브라우저나 doctype 및 네임스페이스를 정의할 때 엄격한 Gecko와 같은 브라우저의 SVG 렌더링 문제를 설명하는 데 도움이 될 수 있습니다.

SVG 2 사양 네임스페이스가 필요하지 않음 HTML 구문을 사용할 때. 하지만 결정적이다 레거시 브라우저에 대한 지원이 우선 순위인 경우 추가해도 아무런 문제가 없습니다. 그렇게 하면 <html> 집단 xmlns 속성이 정의되면 드문 경우에 충돌하지 않습니다.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

배경 이미지로 설정하는 것과 같이 CSS에서 인라인 SVG를 사용할 때도 마찬가지입니다. 다음 예에서는 유효성 검사가 성공한 후 입력에 확인 표시 아이콘이 나타납니다. CSS는 다음과 같습니다.

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

background 속성에서 SVG 내부의 네임스페이스를 제거하면 이미지가 사라집니다.

또 다른 일반적인 네임스페이스 접두사는 다음과 같습니다. xlink:href. 패턴, 필터, 애니메이션 또는 그래디언트와 같은 SVG의 다른 부분을 참조할 때 많이 사용합니다. 교체를 시작하는 것이 좋습니다. href 다른 하나는 SVG 2부터 더 이상 사용되지 않지만 이전 브라우저와의 호환성 문제가 있을 수 있습니다. 이 경우 둘 다 사용할 수 있습니다. 네임스페이스를 포함하는 것을 잊지 마십시오. xmlns:xlink="http://www.w3.org/1999/xlink" 아직 사용 중이라면 xlink:href.

SVG 기술을 향상시키세요!

이 팁이 부적절하게 렌더링된 인라인 SVG의 문제를 해결하는 데 많은 시간을 절약하는 데 도움이 되기를 바랍니다. 이것들은 내가 찾는 것들입니다. 주시하고 있는 다른 위험 신호가 있을 수 있습니다. 그렇다면 댓글로 알려주세요!

결론은 최소한의 기본적인 이해가 있어야 한다는 것입니다. SVG를 사용할 수 있는 다양한 방법. CodePen 과제 종종 SVG를 통합하고 모범 사례를 제공합니다. 다음은 레벨을 올릴 수 있는 몇 가지 리소스입니다.

SVG 관련 이점을 위해 다음을 제안하는 몇 사람이 있습니다.

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 출처: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/