-
티스토리 SVG본문 추가Soliloquy 2019. 9. 26. 08:44
✍️
이전 에디터로 작성하다가 임시 저장에 필요한 플래시가 안켜져있어서 글을 하나 날려먹었다.1 다시 이런일이 일어나지 않게 어제 부터는 새 에디터로 글을 작성하기로 했다. 예전에는 새 에디터가 불편하다고 생각했는데, 수정이 어느 정도 된것인지 에디터가 깔끔하고 괜찮았다. https를 지원하기도 하고 코드블럭이라는 코드 틀도 제공해줘서 좋긴 한데 SVG파일 업로드에 문제가 하나 있었다.
새 에디터로 본문에 SVG 파일을 업로드하는 경우 에디터에서는 업로드가 잘 된 것처럼 보이지만, 실제로 글을 보면 SVG파일 출력에 실패하는지 해당 이미지가 보이지 않고 이미지를 무한히 로딩하기만 하는 문제였다.
파이어폭스에서 SVG파일이 본문에 포함된 경우를 캡처한 화면 개발자 도구에서 네트워크 항목을 보니 imgset로딩에 계속 실패하는 것 같이 보였다. 혹시나 반응형 웹스킨 이미지 최적화 플러그인이 문제인가 싶어서 플러그인을 꺼보기도 했지만, 달라지는 것이 없었다. 티스토리 자체 이미지 태그는 SVG파일을 지원하지 않는 것 같았다.
이전 에디터에서는 SVG파일을 본문에 업로드 하고 img태그로 끌어다 사용하는 방식이 가능했는데, 이번에도 가능할까 해서 시도를 한 번 해봤다. 처음에는 이전 에디터처럼 본문에 SVG 파일을 파일로 업로드하고 난 후에 글을 비공개로 올린 다음 파일 다운로드 주소를 따오면 되지 않을까 했는데 이상하게도 이렇게 하면 img태그가 먹히지를 않았다.
하는 수 없이 SVG파일은 이전 에디터로 밖에 사용할 수 없을까 하고 생각하던 찰나 에디터에서 파일 업로드 주소가 실제 본문에서 보여지는 주소와 다르다는 것을 찾았다. 실제 본문에는 파일 이름.svg로 끝나는데 반해서 에디터에서는 tfile.svg 로 끝난다는 사실을 발견했다.
실제 본문에서 본 주소
에디터에서 본 주소
https://k.kakaocdn.net/dn/dNt8vP/btqyzcnkTEF/kGadrDLrLfwYGCu2c7Teq0/tfile.svg
이미지 주소 목록2
중간 주소까지는 동일하고, 파일명만 차이가 있었다
혹시 이전 에디터의 이게 절대 주소처럼 써먹을 수 있나?라는 생각에 이 주소로 img 태그를 사용해 보았다. 그랬더니, 다행히도 SVG 파일이 잘 올라감을 확인할 수 있었다.
여담
사진 업로드 시 SVG파일을 허용을 해줬음에도 제대로 로딩이 되지 않았던 이유가 뭘까?
img 태그로 업로드할 시, 이미지를 중앙에 정렬하기 위해서 문단 <p> 태그에 텍스트 가운데 정렬 스타일로 이미지를 가운데 정렬했었는데, 이상하게 HTML에서 가운데 정렬 태그를 넣고 바로 글을 올리면 정상적으로 가운데 정렬이 되지만, 기본 작성 모드에 한번 들어갔다 오면 가운데 정렬 태그가 사라짐을 확인할 수 있었다. 왜 제거가 되는 것일까?
- 최근에 나온 에디터와 다르게 티스토리의 이전 에디터는 임시 저장을 하거나 임시 저장된 글을 불러오기 위해서 플래시 플레이어를 사용한다. [본문으로]
- 해당 파일은 https://tattler.tistory.com/212 에서 가져왔다. [본문으로]