브라우저만 읽을 수 있던 SVG

코드로 다이어그램을 만드는 보드를 만들었다. 브라우저 안의 미리보기는 잘 보였고, 이를 SVG로 저장하면 그대로 옮길 수 있을 것 같았다. 하지만 저장한 파일은 데스크톱 미리보기와 그래픽 도구에서 안정적으로 표시되지 않았다. 화면에서 보인다는 사실은 내보낸 파일의 호환성을 증명하지 않았다.

라벨이 경계를 넘었다

실시간 다이어그램은 SVG 안에 HTML 라벨을 썼다. HTML을 이미 그릴 줄 아는 브라우저에서는 편리하지만, 내보낸 SVG에는 foreignObject 요소가 들어간다. 확인 대상이던 다른 뷰어들은 그 파일을 기대한 대로 처리하지 못했다.

브라우저 미리보기는 유지하고, 파일을 내보낼 때는 HTML 라벨을 끈 상태로 한 번 더 렌더링했다. 새 SVG에는 foreignObject가 없었고, 확인한 데스크톱 뷰어들에서 열렸다. 보드에서는 계속 풍부한 미리보기를 볼 수 있었다.

출력 두 개, 계약도 두 개

다이어그램의 내용을 다시 생성할 필요는 없었다. 차이는 렌더링 경계에 있었다. 하나는 브라우저의 대화형 화면이고, 다른 하나는 다른 프로그램으로 옮길 파일이다. 둘을 같은 산출물로 취급해서 파일 호환성 요구를 놓치고 있었다.

이후 완료 기준도 나눴다. 화면에서 잘 보이는지 확인하는 것은 첫 검사다. 내보내기가 끝났다고 말하려면 저장된 SVG를 다른 뷰어에서 직접 열어 봐야 한다.