받은 파일에서 가 발견됐습니다. 위험한가요?

파일을 어디에 쓰느냐에 전적으로 달렸고, 보고서가 그 구분을 알려 줍니다. 페이지에 인라인으로 붙여 넣으면 SVG의 스크립트가 그 페이지의 출처로 실행됩니다. 쿠키도 저장소도 DOM도 그 페이지 것입니다. 나 CSS 배경으로 불러오면 아예 실행되지 않습니다. 이 도구의 미리보기는 그리기 전에 스크립트를 제거하고, 그리는 프레임 자체가 스크립트를 실행할 수 없으므로 여기서 파일을 열어 보는 것은 어느 쪽이든 안전합니다.

SVG 편집기 · 해설

SVG Editor and Explainer

SVG를 실시간 미리보기 옆에서 고치면서 파일을 해설합니다. viewBox와 확대, 변환, 경로 명령, 상속된 채색, 낭비되는 바이트, <img>·데이터 URI·인라인에서 무엇이 깨지는지 알려 줍니다.

SVG를 고치면서 옆에서 결과를 보고, 이 파일이 실제로 무엇인지 읽는 도구입니다. 확대가 되는 파일인지, 도형까지 내려오는 변환이 각각 무슨 일을 하는지, d 속성이 명령 하나씩 무엇을 뜻하는지, 채우기 색이 상속을 거쳐 어떻게 정해지는지, 편집기가 남긴 찌꺼기가 몇 바이트인지, 같은 파일을 <img>로 쓸 때와 CSS 배경으로 쓸 때와 인라인으로 붙일 때 각각 무엇이 깨지는지를 알려 줍니다. 모든 지적은 문제가 되는 속성을 정확히 짚습니다. 파싱한 파일 위에 사람이 쓴 규칙을 돌리는 것이지 모델이 아니어서, 있는 것만 보고하고 파일의 용도를 추측하지 않습니다.

🔒 브라우저 안에서만 처리svgeditorviewboxexplainaccessibility

예시

SVG 원본

.svg 파일을 놓으세요

이 탭에서 읽습니다. 아무것도 올리지 않습니다.

여기에 입력하면 미리보기가 따라옵니다. 미리보기에서 도형을 누르면 원본이 그 요소로 이동합니다.

미리보기

배경

클릭할 수 있는 테두리는 파일만 보고 상자를 계산할 수 있는 도형에만 붙습니다. <text>, <use>, 크기 없는 <image>는 렌더러가 있어야 알 수 있어서 원본에서 골라야 합니다.

파싱한 트리에서 다시 만든 마크업을 샌드박스 프레임에 넣어 그립니다. 원본 바이트를 그대로 넣지 않습니다. 프레임은 고정된 상자이고 파일에 그 상자를 통째로 주므로, 확대되지 않는 문서는 상자를 채우지 못하는 모습이 눈에 보입니다.

바이트

395

요소

도형

경로 명령

최대 중첩

이 파일이 무엇인지

설명프레임
크기도 있고 확대도 됩니다
width="24", height="24" 속성이 있어 고유 크기가 정해지고, viewBox="0 0 24 24" 덕분에 그 크기는 한계가 아니라 출발점이 됩니다. CSS에서 너비를 바꾸면 안의 내용이 그에 맞춰 다시 배율이 잡힙니다. 아이콘이라면 이 형태가 맞습니다.
설명좌표
사용자 단위 하나의 크기
안쪽 좌표는 가로 0부터 24까지, 세로 0부터 24까지입니다. 선언된 너비 24 기준으로 사용자 단위 1은 1 CSS 픽셀로 그려지고, 이 값은 파일이 실제로 받는 크기에 따라 달라집니다.
설명경로
절대·상대 명령이 섞여 있습니다
한 경로 안에 절대 명령 3개와 상대 명령 6개가 있습니다. 둘 다 적법하고 그려지는 모양도 같습니다. 실제 차이는, 전부 상대로 쓴 경로는 첫 M 하나만 고쳐서 옮길 수 있는데 이 경로는 그렇지 않다는 점입니다.
설명채색
currentColor — 색을 페이지가 정합니다
1개 속성이 currentColor로 칠해집니다. currentColor는 SVG가 놓인 자리에서 상속된 CSS `color` 값으로 풀립니다. 페이지에 인라인으로 넣으면 아이콘에 딱 맞는 동작입니다. 주변 글자색을 그대로 따르고 테마 전환도 공짜로 따라갑니다. 하지만 <img>나 CSS background-image로 쓰면 상속받을 요소가 없어 검정으로 나옵니다.
설명접근성
이름: "보관함에 저장"
<title>은 그래픽의 접근성 이름이고, 대부분의 뷰어는 마우스를 올렸을 때 툴팁으로도 보여 줍니다. 그래서 파일 이름을 <title>에 넣으면 없느니만 못합니다. 지금 값은 "보관함에 저장"입니다.
설명접근성
<desc>가 없습니다
<title>은 짧은 이름이고, <desc>는 내용 자체가 중요한 그래픽(차트, 다이어그램, 지도)을 위한 긴 설명입니다. 아이콘에는 필요 없고, 빈 <desc>를 넣는 것은 없느니만 못합니다.

선택한 요소

미리보기에서 도형을 누르거나, 원본에서 요소 안에 커서를 두세요.

SVG 최적화로 군더더기 걷어내기 · CSS data URI로 바꾸기 · 경로 하나만 따로 다루기

사용 방법

SVG를 붙여넣거나 파일을 놓습니다
원본 상자에 붙여넣거나 아래 영역에 .svg 파일을 놓으면 됩니다. 전부 이 탭에서 읽습니다. 위쪽 예시 네 개를 먼저 눌러 보세요. 각각 실제로 존재하는 다른 형태의 파일이고, 보고서 내용도 서로 다릅니다.
먼저 프레임 항목을 읽습니다
이 문서가 네 형태 중 어느 것인지 말해 주고, 뒤따르는 이야기 대부분이 거기서 갈립니다. viewBox에 width·height가 함께 있으면 고유 크기를 가지면서 확대도 되고, viewBox만 있으면 주어진 상자를 채우고, viewBox 없이 width·height만 있으면 아예 확대되지 않습니다. 디자인 도구에서 복사한 아이콘이 크기 조절을 거부하는 이유가 대개 이것입니다. 미리보기가 파일에 고정된 상자를 통째로 주기 때문에 어느 쪽인지 눈으로 확인할 수 있습니다.
도형을 눌러 두 창을 맞춥니다
미리보기의 테두리를 누르면 원본에서 그 요소로 커서가 옮겨 가고 요소 패널이 채워집니다. 바깥에서부터 내려오는 변환 사슬, 누적된 행렬이 하는 일, 상속을 거쳐 정해진 채색, 경로라면 모든 명령을 풀어 쓴 설명이 나옵니다. 원본에서 커서를 옮기면 반대 방향으로도 선택됩니다.
찾지 말고 "위치 보기"를 누릅니다
모든 지적은 자기가 가리키는 원본 구간을 함께 들고 있어서, 버튼을 누르면 정확히 그 글자들이 선택됩니다. id가 겹치는 두 번째 그라디언트를 첫 번째 대신 짚고, 태그 전체가 아니라 그 속성 하나를 짚습니다.
용량 항목은 최적화 도구로 넘깁니다
용량 항목은 바이트를 세고 그것이 무엇인지 이름을 붙여 줍니다. 편집기 메타데이터, 아무도 쓰지 않는 그라디언트, 아무도 고르지 않은 소수점 일곱 자리 같은 것들입니다. 다만 이 도구는 파일을 고쳐 쓰지 않습니다. 그 작업은 SVG 최적화 도구가 문서 전체에 한 번에 하고, 전후 차이를 겹쳐 보여 주므로 무엇도 움직이지 않았는지 확인할 수 있습니다.

자주 묻는 질문

CSS로 너비를 줬는데 아이콘이 왜 커지지 않나요?

거의 언제나 파일에 width·height는 있고 viewBox가 없기 때문입니다. viewBox가 없으면 사용자 단위가 곧 CSS 픽셀이라 브라우저가 다시 배율을 잡을 대응 관계 자체가 없습니다. 상자만 커지고 그림은 그대로 있습니다. 프레임 항목이 그 사실을 알려 주고 추가할 viewBox를 그대로 적어 줍니다. 대개 파일에 이미 있는 숫자로 "0 0 <너비> <높이>"입니다.

아이콘 두 개를 인라인으로 넣었더니 두 번째 그라디언트가 사라졌습니다. 왜 그런가요?

id가 충돌한 것입니다. 디자인 도구는 a, Layer_1, SVGID_1_ 같은 이름을 자동으로 붙이는데, 두 파일이 한 페이지에 들어오면 모든 url(#a)이 문서에서 먼저 나온 쪽으로 풀립니다. 그래서 두 번째 아이콘이 조용히 첫 번째 아이콘의 그라디언트나 클립을 빌려 씁니다. 이식성 항목이 바로 이 경우를 위해 자동 생성 id를 짚어 줍니다. 인라인으로 넣기 전에 모든 id 앞에 그 파일만의 접두사를 붙이세요.

페이지에서는 되는데 CSS 배경으로 넣으면 빈 화면입니다. 무엇이 달라진 건가요?

달라지는 것이 셋이고, 보고서가 해당하는 것을 짚어 줍니다. xmlns가 없으면 HTML 파서는 넘어가 주지만 그 밖에서는 치명적입니다. currentColor는 페이지 밖에서는 상속받을 것이 없어 검정이 됩니다. 외부 참조는 <img>나 background-image에서 아예 요청되지 않아, 그것이 필요한 요소는 아무것도 그리지 않습니다. 그리고 hex 색상의 #는 %23으로 쓰지 않으면 data URI를 거기서 잘라 버립니다.

경로의 구멍이 꽉 차서 나옵니다. 위치를 옮겨야 하나요?

아닙니다. 방향을 뒤집으세요. 기본값인 fill-rule="nonzero"에서는 안쪽 고리가 바깥 고리와 감기는 방향이 반대일 때만 구멍이 됩니다. 구멍이 꽉 찬다면 위치가 아니라 방향 문제입니다. 경로 항목이 서브패스가 몇 개인지, 어느 규칙이 결정하고 있는지 알려 줍니다. 서브패스 하나를 뒤집는 일은 SVG 경로 도구가 합니다.

받은 파일에서 <script>가 발견됐습니다. 위험한가요?

파일을 어디에 쓰느냐에 전적으로 달렸고, 보고서가 그 구분을 알려 줍니다. 페이지에 인라인으로 붙여 넣으면 SVG의 스크립트가 그 페이지의 출처로 실행됩니다. 쿠키도 저장소도 DOM도 그 페이지 것입니다. <img>나 CSS 배경으로 불러오면 아예 실행되지 않습니다. 이 도구의 미리보기는 그리기 전에 스크립트를 제거하고, 그리는 프레임 자체가 스크립트를 실행할 수 없으므로 여기서 파일을 열어 보는 것은 어느 쪽이든 안전합니다.

채색 패널이 실제로 보이는 것과 다릅니다. 왜 그런가요?

파일에 <style> 블록이 있고 이 보고서가 그것을 적용하지 않기 때문입니다. CSS 선택자를 푸는 데는 CSS 엔진이 필요하고, 여기 나오는 값은 표현 속성과 인라인 style에서만 읽은 것입니다. <style> 블록이 있으면 보고서가 그 사실을 먼저 밝힙니다. 스타일시트가 덮어쓴 값을 아무 말 없이 보여 주지는 않습니다.