한 줄짜리 SVG 를 읽어야 할 때
빌드 도구를 거친 SVG 는 줄바꿈이 전부 사라진 채로 옵니다. 그 상태로는 어느
path 가 어느 도형인지, g 가 몇 겹인지 볼 수 없습니다.
요소마다 줄을 나누고 들여쓰기하면 구조가 그대로 드러납니다.
글자 요소는 줄을 바꾸지 않습니다
HTML 과 달리 SVG 의 <text> 안에서는 줄바꿈이 공백 하나로
렌더됩니다. 보기 좋으라고 줄을 나누면 글자 사이가 실제로 벌어집니다.
그래서 tspan, textPath, tref, a 는
한 줄에 붙여 둡니다.
속성이 너무 많을 때
요소 하나에 속성이 열 개씩 붙으면 줄이 화면 밖으로 나갑니다. 속성마다 줄 바꾸기를 켜면 이렇게 됩니다.
| 끔 | 켬 |
|---|---|
<path fill="none" stroke="#000" d="M0 0"/> |
<path |
깃 커밋에서 어느 속성이 바뀌었는지 보려면 켜는 쪽이 낫습니다. 한 속성만 고쳐도 줄 전체가 바뀐 것으로 표시되는 일이 없어집니다.
정렬하면 파일이 커지나요?
커집니다. 들여쓰기와 줄바꿈이 그대로 글자 수이기 때문입니다. 읽으려고 푸는 것이니, 웹에 올릴 때는 SVG 압축으로 다시 줄이세요.
d 속성 안의 좌표도 줄을 나눠 주나요?
나누지 않습니다. d 는 속성값 하나라서 중간에 줄을 넣으면 값이
달라 보일 뿐 구조가 드러나지는 않습니다. path 하나가 실제로 무슨 도형인지는
좌표를 읽어서 알기 어렵고, 브라우저 개발자 도구에서 해당 요소를 짚어 보는 편이
빠릅니다.
일반 XML 도 되나요?
구조는 잘 나옵니다. 다만 이 도구는 입력이 <svg> 를 포함하는지
확인하므로, SVG 가 아닌 XML 은 받지 않습니다. HTML 이라면 브라우저 개발자 도구가
더 낫습니다.